Use SVG api to provide black-white icons

.gitignore

@@ -1,8 +1,10 @@
 ######################
 ## Files build by make
 ######################
-/css/src/sprites.scss
-/img/sprites.svg
+/css/src/sprites-bw.scss
+/css/src/sprites-color.scss
+/img/bw.svg
+/img/color.svg
 /js/
 
 #################

css/src/style.scss

@@ -18,7 +18,7 @@
 				z-index: -1;
 				width: 16px;
 				height: 16px;
-				background: url('../../../apps/tasks/css/../img/sprites.svg') no-repeat;
+				background: var(--icon-tasks-bw-000) no-repeat;
 				margin: 14px;
 				margin-left: -30px;
 				background-position: inherit;
@@ -721,7 +721,13 @@
 				.icon {
 					height: 24px;
 					width: 24px;
-					background-size: 144px 144px;
+					&.icon-color {
+						background-size: 96px 72px;
+					}
+
+					&.icon-bw {
+						background-size: 120px 120px;
+					}
 				}
 			}
 
@@ -798,7 +804,8 @@
 				&.date .icon {
 					&.icon-calendar-due,
 					&.icon-calendar-overdue,
-					&.icon-percent {
+					&.icon-percent,
+					&.icon-percent-active {
 						opacity: 1;
 					}
 				}

css/tasks.scss

@@ -21,5 +21,6 @@
 
 @import './src/vars';
 @import './src/nc12';
-@import './src/sprites';
+@import './src/sprites-color';
+@import './src/sprites-bw';
 @import './src/style';

img/sprites.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg width="64" height="48" viewBox="0 0 64 48" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><svg width="16" height="16" version="1.1" viewbox="0 0 16 16" viewBox="0 0 16 16" id="calendar-due" xmlns="http://www.w3.org/2000/svg"><path d="m4 1c-0.554 0-1 0.446-1 1v2c0 0.554 0.446 1 1 1s1-0.446 1-1v-2c0-0.554-0.446-1-1-1zm8 0c-0.554 0-1 0.446-1 1v2c0 0.554 0.446 1 1 1s1-0.446 1-1v-2c0-0.554-0.446-1-1-1zm-6.5 2v1c0 0.831-0.669 1.5-1.5 1.5s-1.5-0.669-1.5-1.5v-0.9375c-0.8841 0.227-1.5017 1.0247-1.5 1.9375v8c0 1.108 0.892 2 2 2h10c1.108 0 2-0.892 2-2v-8c0.0017-0.9128-0.61588-1.7105-1.5-1.9375v0.9375c0 0.831-0.669 1.5-1.5 1.5s-1.5-0.669-1.5-1.5v-1zm-2.453 4h9.906c0.02644-0.0012 0.0482 0.02056 0.047 0.047v5.906c0.0012 0.02644-0.02056 0.0482-0.047 0.047h-9.906c-0.02644 0.0012-0.048204-0.02056-0.047-0.047v-5.906c-0.0012-0.02644 0.02056-0.048205 0.047-0.047z" fill="#4574A9"/></svg><svg width="16" height="16" version="1.1" viewbox="0 0 16 16" viewBox="0 0 16 16" id="calendar-overdue" x="16" xmlns="http://www.w3.org/2000/svg"><path d="m4 1c-0.554 0-1 0.446-1 1v2c0 0.554 0.446 1 1 1s1-0.446 1-1v-2c0-0.554-0.446-1-1-1zm8 0c-0.554 0-1 0.446-1 1v2c0 0.554 0.446 1 1 1s1-0.446 1-1v-2c0-0.554-0.446-1-1-1zm-6.5 2v1c0 0.831-0.669 1.5-1.5 1.5s-1.5-0.669-1.5-1.5v-0.9375c-0.8841 0.227-1.5017 1.0247-1.5 1.9375v8c0 1.108 0.892 2 2 2h10c1.108 0 2-0.892 2-2v-8c0.0017-0.9128-0.61588-1.7105-1.5-1.9375v0.9375c0 0.831-0.669 1.5-1.5 1.5s-1.5-0.669-1.5-1.5v-1zm-2.453 4h9.906c0.02644-0.0012 0.0482 0.02056 0.047 0.047v5.906c0.0012 0.02644-0.02056 0.0482-0.047 0.047h-9.906c-0.02644 0.0012-0.048204-0.02056-0.047-0.047v-5.906c-0.0012-0.02644 0.02056-0.048205 0.047-0.047z" fill="#CE3433"/></svg><svg width="16" height="16" version="1.1" viewBox="0 0 16 16" id="checkmark-color" y="16" xmlns="http://www.w3.org/2000/svg"><path d="m7.1754 13.693c2.5618-5.7886 5.8526-9.6003 7.3076-11.335 1.183-1.401 0.719-1.177 0.199-0.8234-2.137 1.4563-6.1287 6.1399-7.6559 7.7638-0.2793 0.299-0.9223 1.0036-1.067 1.0036-0.1596 0-0.7052-0.263-1.0197-0.4552-1.1895-0.7316-2.3298-1.4514-3.0451-1.7203-1.5226-0.5738-1.0921-0.0263-1.0048 0.1568 0.2709 0.5679 3.9479 3.6637 5.1652 5.1237 0.66413 0.7746 0.72507 1.2925 1.1207 0.286z" fill="#71b73d" stroke="#71b73d" stroke-miterlimit="10" stroke-width=".535"/></svg><svg width="16" height="16" version="1.1" viewBox="0 0 16 16" id="clock-due" x="16" y="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="#4574A9" stroke-width="1.5"><circle cx="8" cy="8" r="5"/><path d="m5.1005 12.027-1.5 2.5981"/><path d="m10.9 12.027 1.5 2.5981"/><path d="m4.9731 1.6495-2.5981 1.5"/><path d="m11.027 1.6495 2.5981 1.5"/><path d="m8 5v3h2"/></g></svg><svg width="16" height="16" version="1.1" viewBox="0 0 16 16" id="clock-overdue" x="32" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="#CE3433" stroke-width="1.5"><circle cx="8" cy="8" r="5"/><path d="m5.1005 12.027-1.5 2.5981"/><path d="m10.9 12.027 1.5 2.5981"/><path d="m4.9731 1.6495-2.5981 1.5"/><path d="m11.027 1.6495 2.5981 1.5"/><path d="m8 5v3h2"/></g></svg><svg width="16" height="16" version="1.1" viewBox="0 0 16 16" id="percent-active" x="32" y="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="#4574a9" stroke-linecap="round" stroke-width="1.5"><circle cx="4" cy="4" r="2.25" fill="none"/><path d="m11.603 1.7597-7.206 12.481"/><circle cx="12" cy="12" r="2.25"/></g></svg><svg width="16" height="16" version="1.1" viewBox="0 0 16 16" id="tag-active" y="32" xmlns="http://www.w3.org/2000/svg"><path d="m1.3594 1c-0.2723 0-0.3584 0.2237-0.3594 0.3594v4.791l8.7012 8.7016c0.1946 0.197 0.5048 0.197 0.6988 0l4.454-4.452c0.197-0.194 0.196-0.5051 0-0.7008l-8.7036-8.6992h-4.791zm2.4648 1.5a1.325 1.325 0 0 1 1.3262 1.3242 1.325 1.325 0 0 1-1.3262 1.3262 1.325 1.325 0 0 1-1.3242-1.3262 1.325 1.325 0 0 1 1.3242-1.3242z" fill="#4574a9"/></svg><svg width="16" height="16" version="1.1" viewBox="0 0 16 16" id="task-star-high" x="16" y="32" xmlns="http://www.w3.org/2000/svg"><path d="m8 0.2 2.2 5.5 5.8 0.4-4.5 3.7 1.5 5.7-5-3.1-5 3.1 1.5-5.7-4.5-3.7 5.8-0.4z" fill="#CE3433"/></svg><svg width="16" height="16" version="1.1" viewBox="0 0 16 16" id="task-star-low" x="32" y="32" xmlns="http://www.w3.org/2000/svg"><path d="m8 0.2 2.2 5.5 5.8 0.4-4.5 3.7 1.5 5.7-5-3.1-5 3.1 1.5-5.7-4.5-3.7 5.8-0.4z" fill="#4574A9"/></svg><svg width="16" height="16" version="1.1" viewBox="0 0 16 16" id="task-star-medium" x="48" xmlns="http://www.w3.org/2000/svg"><path d="m8 0.2 2.2 5.5 5.8 0.4-4.5 3.7 1.5 5.7-5-3.1-5 3.1 1.5-5.7-4.5-3.7 5.8-0.4z" fill="#FFCC0C"/></svg></svg>

package.json

@@ -16,7 +16,7 @@
 		"lint": "eslint --ext .js,.vue src tests",
 		"lint:fix": "eslint --ext .js,.vue src tests --fix",
 		"test": "jest --verbose",
-		"svg_sprite": "svg-sprite --config svg-sprite.json img/src/**/*.svg"
+		"svg_sprite": "svg-sprite --config svg-sprite-color.json img/src/color/*.svg && svg-sprite --config svg-sprite-bw.json img/src/bw/*.svg"
 	},
 	"repository": {
 		"type": "git",

src/components/SortorderDropdown.vue

@@ -24,8 +24,8 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 		<div v-click-outside="closeMenu" class="app-navigation-entry-utils" @click="toggleMenu">
 			<div :title="t('tasks', 'Change sort order')" class="app-navigation-entry-utils-menu-button">
 				<button class="sortorder-dropdown-button">
-					<span :class="sortOrderIcon" class="icon" />
-					<span :class="sortDirection ? 'icon-sort-up' : 'icon-sort-down'" class="icon sort-indicator" />
+					<span :class="sortOrderIcon" class="icon icon-bw" />
+					<span :class="sortDirection ? 'icon-sort-up' : 'icon-sort-down'" class="icon icon-bw sort-indicator" />
 				</button>
 			</div>
 		</div>
@@ -36,9 +36,9 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 					:class="{active: sortOrder == order.id}"
 					@click="setSortOrder(order.id)">
 					<a>
-						<span :class="order.icon" class="icon" />
+						<span :class="order.icon" class="icon icon-bw" />
 						<span class="label">{{ order.text }}</span>
-						<span :class="sortDirection ? 'icon-sort-up' : 'icon-sort-down'" class="icon sort-indicator" />
+						<span :class="sortDirection ? 'icon-sort-up' : 'icon-sort-down'" class="icon icon-bw sort-indicator" />
 					</a>
 				</li>
 			</ul>

src/components/Task.vue

@@ -40,30 +40,30 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 				name="toggleCompleted"
 				role="checkbox"
 				@click="toggleCompleted(task)">
-				<span :class="{'icon-checkmark': task.completed}" class="icon task-checkbox reactive no-nav" />
+				<span :class="{'icon-checkmark': task.completed}" class="icon icon-bw task-checkbox reactive no-nav" />
 			</span>
 			<span class="icon task-separator" />
 			<span class="task-star" @click="toggleStarred(task.uri)">
-				<span :class="[iconStar]" class="icon icon-task-star right large reactive no-nav" />
+				<span :class="[iconStar]" class="icon right large reactive no-nav" />
 			</span>
 			<span v-if="!task.calendar.readOnly"
 				class="task-addsubtask add-subtask">
 				<span :taskId="task.uri"
-					:title="subtasksCreationPlaceholder" class="icon icon-add right large reactive no-nav"
+					:title="subtasksCreationPlaceholder" class="icon icon-bw icon-add right large reactive no-nav"
 					@click="showSubtaskInput = true" />
 			</span>
 			<span v-if="task.subTasks.length" @click="toggleSubtasks(task)">
 				<span :title="t('tasks', 'Toggle subtasks')"
 					:class="task.hideSubtasks ? 'icon-subtasks-hidden' : 'icon-subtasks-visible'"
-					class="icon right large subtasks reactive no-nav" />
+					class="icon icon-bw right large subtasks reactive no-nav" />
 			</span>
 			<span v-if="hasCompletedSubtasks" @click="toggleCompletedSubtasks(task)">
 				<span :title="t('tasks', 'Toggle completed subtasks')"
 					:class="{'active': !task.hideCompletedSubtasks}"
-					class="icon icon-toggle right large toggle-completed-subtasks reactive no-nav" />
+					class="icon icon-bw icon-toggle right large toggle-completed-subtasks reactive no-nav" />
 			</span>
 			<span v-if="task.note!=''">
-				<span class="icon icon-note right large" />
+				<span class="icon icon-bw icon-note right large" />
 			</span>
 			<span :class="{overdue: overdue(task.due)}" class="duedate">{{ task.due | formatDate }}</span>
 			<span v-if="$route.params.collectionId=='week'" class="listname">{{ task.calendar.displayName }}</span>
@@ -161,11 +161,13 @@ export default {
 
 		iconStar: function() {
 			if (this.task.priority > 5) {
-				return 'icon-task-star-low'
+				return 'icon-color icon-task-star-low'
 			} else if (this.task.priority === 5) {
-				return 'icon-task-star-medium'
+				return 'icon-color icon-task-star-medium'
 			} else if (this.task.priority > 0 && this.task.priority < 5) {
-				return 'icon-task-star-high'
+				return 'icon-color icon-task-star-high'
+			} else {
+				return 'icon-bw icon-task-star'
 			}
 		},
 

src/components/TheDetails.vue

@@ -30,11 +30,11 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 					class="checkbox reactive"
 					role="checkbox"
 					@click="toggleCompleted(task.uri)">
-					<span :class="{'icon-checkmark': task.completed, 'disabled': task.calendar.readOnly}" class="icon detail-checkbox" />
+					<span :class="{'icon-checkmark': task.completed, 'disabled': task.calendar.readOnly}" class="icon icon-bw detail-checkbox" />
 				</a>
 				<a class="star reactive" @click="toggleStarred(task.uri)">
 					<span :class="[{'disabled': task.calendar.readOnly}, iconStar]"
-						class="icon icon-task-star" />
+						class="icon" />
 				</a>
 				<div v-click-outside="() => finishEditing('summary')">
 					<div :class="{'strike-through': task.completed}"
@@ -60,8 +60,8 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						class="section detail-start">
 						<div v-click-outside="() => finishEditing('start')"
 							@click="editProperty('start', $event)">
-							<span :class="{'icon-calendar-due': valid(task.start), 'icon-calendar-overdue': overdue(task.start)}"
-								class="icon icon-calendar" />
+							<span :class="[dateIcon(task.start)]"
+								class="icon" />
 							<span class="section-title">{{ task.start | startDate }}</span>
 							<div v-if="edit=='start'" class="section-edit">
 								<datetime-picker :value="startDate" :lang="lang"
@@ -76,10 +76,10 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						</div>
 						<div class="utils">
 							<a>
-								<span class="icon detail-save icon-checkmark-color end-edit reactive" />
+								<span class="icon icon-color detail-save icon-checkmark-color end-edit reactive" />
 							</a>
 							<a class="end-edit" @click="setProperty('start', '')">
-								<span class="icon icon-trash reactive" />
+								<span class="icon icon-bw icon-trash reactive" />
 							</a>
 						</div>
 					</li>
@@ -87,8 +87,8 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						class="section detail-date">
 						<div v-click-outside="() => finishEditing('due')"
 							@click="editProperty('due', $event)">
-							<span :class="{'icon-calendar-due': valid(task.due), 'icon-calendar-overdue': overdue(task.due)}"
-								class="icon icon-calendar" />
+							<span :class="[dateIcon(task.due)]"
+								class="icon" />
 							<span class="section-title">{{ task.due | dueDate }}</span>
 							<div v-if="edit=='due'" class="section-edit">
 								<datetime-picker :value="dueDate" :lang="lang"
@@ -103,10 +103,10 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						</div>
 						<div class="utils">
 							<a>
-								<span class="icon detail-save icon-checkmark-color end-edit reactive" />
+								<span class="icon icon-color detail-save icon-checkmark-color end-edit reactive" />
 							</a>
 							<a class="end-edit" @click="setProperty('due', '')">
-								<span class="icon icon-trash reactive" />
+								<span class="icon icon-bw icon-trash reactive" />
 							</a>
 						</div>
 					</li>
@@ -116,7 +116,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						role="checkbox"
 						@click="toggleAllDay(task.uri)">
 						<div>
-							<span :class="{'icon-checkmark': task.allDay, 'disabled': task.calendar.readOnly}" class="icon detail-checkbox" />
+							<span :class="{'icon-checkmark': task.allDay, 'disabled': task.calendar.readOnly}" class="icon icon-color detail-checkbox" />
 							<span class="section-title">{{ t('tasks', 'All day') }}</span>
 						</div>
 					</li>
@@ -125,7 +125,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						<div v-click-outside="() => finishEditing('priority')"
 							@click="editProperty('priority')">
 							<span :class="[iconStar]"
-								class="icon icon-task-star" />
+								class="icon" />
 							<span class="section-title">{{ task.priority | priority }}</span>
 							<div class="section-edit">
 								<input v-model="tmpTask.priority"
@@ -145,10 +145,10 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						</div>
 						<div class="utils">
 							<a>
-								<span class="icon detail-save icon-checkmark-color end-edit reactive" />
+								<span class="icon icon-color detail-save icon-checkmark-color end-edit reactive" />
 							</a>
 							<a class="end-edit" @click="setProperty('priority', 0)">
-								<span class="icon icon-trash reactive" />
+								<span class="icon icon-bw icon-trash reactive" />
 							</a>
 						</div>
 					</li>
@@ -156,7 +156,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						class="section detail-complete">
 						<div v-click-outside="() => finishEditing('complete')"
 							@click="editProperty('complete')">
-							<span :class="{'icon-percent-active': task.complete>0}" class="icon icon-percent" />
+							<span :class="[iconPercent]" class="icon" />
 							<span class="section-title">{{ task.complete | complete }}</span>
 							<div class="section-edit">
 								<input v-model="tmpTask.complete"
@@ -177,16 +177,16 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						</div>
 						<div class="utils">
 							<a>
-								<span class="icon detail-save icon-checkmark-color end-edit reactive" />
+								<span class="icon icon-color detail-save icon-checkmark-color end-edit reactive" />
 							</a>
 							<a class="end-edit" @click="setProperty('complete', 0)">
-								<span class="icon icon-trash reactive" />
+								<span class="icon icon-bw icon-trash reactive" />
 							</a>
 						</div>
 					</li>
 					<li :class="{'active': task.categories.length>0}" class="section detail-categories">
 						<div>
-							<span :class="{'icon-tag-active': task.categories.length>0}" class="icon icon-tag detail-categories" />
+							<span :class="[iconCategories]" class="icon detail-categories" />
 							<div class="detail-categories-container">
 								<multiselect v-if="task.categories"
 									v-model="task.categories"
@@ -226,10 +226,10 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 				<a v-show="!task.calendar.readOnly"
 					class="left close-all reactive"
 					@click="deleteTask(task.uri)">
-					<span class="icon icon-trash" />
+					<span class="icon icon-bw icon-trash" />
 				</a>
 				<a class="right close-all reactive" @click="closeDetails">
-					<span class="icon icon-hide" />
+					<span class="icon icon-bw icon-hide" />
 				</a>
 			</div>
 		</div>
@@ -398,7 +398,23 @@ export default {
 		},
 		iconStar: function() {
 			if (this.task.priority) {
-				return 'icon-task-star-' + this.priorityString
+				return 'icon-color icon-task-star-' + this.priorityString
+			} else {
+				return 'icon-bw icon-task-star'
+			}
+		},
+		iconPercent: function() {
+			if (this.task.complete > 0) {
+				return 'icon-color icon-percent-active'
+			} else {
+				return 'icon-bw icon-percent'
+			}
+		},
+		iconCategories: function() {
+			if (this.task.categories.length > 0) {
+				return 'icon-color icon-tag-active'
+			} else {
+				return 'icon-bw icon-tag'
 			}
 		},
 		startDate: function() {
@@ -432,6 +448,18 @@ export default {
 				}
 			},
 
+			dateIcon: function(date) {
+				if (valid(date)) {
+					var c = 'icon-color icon-calendar-due'
+					if (overdue(date)) {
+						c += ' icon-calendar-overdue'
+					}
+					return c
+				} else {
+					return 'icon-bw icon-calendar'
+				}
+			},
+
 			/**
 			 * Checks if a date is overdue
 			 */

src/components/TheList.vue

@@ -122,7 +122,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 			</div>
 		</router-link>
 		<li v-click-outside="cancelCreate" :class="{edit: creating}" class="newList icon-add reactive editing">
-			<a class="addlist icon sprite"
+			<a class="icon icon-bw addlist sprite"
 				@click="startCreate($event)">
 				<span class="title">{{ t('tasks', 'Add List...') }}</span>
 			</a>

src/components/TheSettings.vue

@@ -44,7 +44,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 				<li v-for="collection in collections"
 					:key="collection.id">
 					<div class="label-container">
-						<span :class="collection.icon" class="icon">
+						<span :class="collection.icon" class="icon icon-bw">
 							<span v-if="collection.id=='today'">{{ dayOfMonth }}</span>
 						</span>
 						<label :for="'visibilityCollection-' + collection.id" class="title">{{ collection.displayName }}</label>

svg-sprite-bw.json

@@ -8,13 +8,13 @@
 	"mode": {
 		"css": {
 			"bust": false,
-			"common": "icon",
+			"common": "icon-bw",
 			"prefix": ".icon-%s",
-			"sprite": "../img/sprites.svg",
+			"sprite": "../img/bw.svg",
 			"render": {
 				"scss": {
-					"template": "svg-sprite.tmpl",
-					"dest": "src/sprites.scss"
+					"template": "svg-sprite-bw.tmpl",
+					"dest": "src/sprites-bw.scss"
 				}
 			}
 		}

svg-sprite-bw.tmpl

@@ -0,0 +1,14 @@
+{{#hasMixin}}
+{{#hasCommon}}.{{commonName}} {
+	@include {{mixinName}};
+}
+{{/hasCommon}}{{/hasMixin}}{{^hasMixin}}{{#hasCommon}}{{/hasCommon}}{{^hasCommon}}%{{/hasCommon}}
+@include icon-black-white('bw', 'tasks', 1, false);
+
+{{/hasMixin}}{{#shapes}}{{#selector.shape}}{{expression}}{{^last}},
+{{/last}}{{/selector.shape}} {
+	{{^hasCommon}}{{#hasMixin}}@include {{mixinName}};{{/hasMixin}}{{^hasMixin}}@extend %{{commonName}};{{/hasMixin}}
+	{{/hasCommon}}background-position: {{position.relative.xy}};
+}
+
+{{/shapes}}

svg-sprite-color.json

@@ -0,0 +1,22 @@
+{
+	"shape": {
+		"dimension": {
+			"attributes": false
+		},
+		"transform": []
+	},
+	"mode": {
+		"css": {
+			"bust": false,
+			"common": "icon-color",
+			"prefix": ".icon-%s",
+			"sprite": "../img/color.svg",
+			"render": {
+				"scss": {
+					"template": "svg-sprite-color.tmpl",
+					"dest": "src/sprites-color.scss"
+				}
+			}
+		}
+	}
+}