From 097460a53e96bf03392fe895d137b131eab73346 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?= Date: Fri, 23 Nov 2018 21:28:04 +0100 Subject: [PATCH] Use SVG api to provide black-white icons --- .gitignore | 6 +- css/src/style.scss | 13 +++- css/tasks.scss | 3 +- img/sprites.svg | 1 + img/src/{ => bw}/add.svg | 0 img/src/{ => bw}/all.svg | 0 img/src/{ => bw}/alphabetically.svg | 0 img/src/{ => bw}/calendar.svg | 0 img/src/{ => bw}/checkmark.svg | 0 img/src/{ => bw}/clock.svg | 0 img/src/{ => bw}/close.svg | 0 img/src/{ => bw}/current.svg | 0 img/src/{ => bw}/hide.svg | 0 img/src/{ => bw}/list.svg | 0 img/src/{ => bw}/manual.svg | 0 img/src/{ => bw}/note.svg | 0 img/src/{ => bw}/percent.svg | 0 img/src/{ => bw}/random.svg | 0 img/src/{ => bw}/settings.svg | 0 img/src/{ => bw}/sort-down.svg | 0 img/src/{ => bw}/sort-up.svg | 0 img/src/{ => bw}/subtasks-hidden.svg | 0 img/src/{ => bw}/subtasks-hidden~hover.svg | 0 img/src/{ => bw}/subtasks-visible.svg | 0 img/src/{ => bw}/tag.svg | 0 img/src/{ => bw}/task-star.svg | 0 img/src/{ => bw}/toggle.svg | 0 img/src/{ => bw}/trash.svg | 0 img/src/{ => color}/calendar-due.svg | 0 img/src/{ => color}/calendar-overdue.svg | 0 img/src/{ => color}/checkmark-color.svg | 0 img/src/{ => color}/clock-due.svg | 0 img/src/{ => color}/clock-overdue.svg | 0 img/src/{ => color}/percent-active.svg | 0 img/src/{ => color}/tag-active.svg | 0 img/src/{ => color}/task-star-high.svg | 0 img/src/{ => color}/task-star-low.svg | 0 img/src/{ => color}/task-star-medium.svg | 0 package.json | 2 +- src/components/SortorderDropdown.vue | 8 +-- src/components/Task.vue | 20 ++++--- src/components/TheDetails.vue | 70 +++++++++++++++------- src/components/TheList.vue | 2 +- src/components/TheSettings.vue | 2 +- svg-sprite.json => svg-sprite-bw.json | 8 +-- svg-sprite-bw.tmpl | 14 +++++ svg-sprite-color.json | 22 +++++++ svg-sprite.tmpl => svg-sprite-color.tmpl | 0 48 files changed, 124 insertions(+), 47 deletions(-) create mode 100644 img/sprites.svg rename img/src/{ => bw}/add.svg (100%) rename img/src/{ => bw}/all.svg (100%) rename img/src/{ => bw}/alphabetically.svg (100%) rename img/src/{ => bw}/calendar.svg (100%) rename img/src/{ => bw}/checkmark.svg (100%) rename img/src/{ => bw}/clock.svg (100%) rename img/src/{ => bw}/close.svg (100%) rename img/src/{ => bw}/current.svg (100%) rename img/src/{ => bw}/hide.svg (100%) rename img/src/{ => bw}/list.svg (100%) rename img/src/{ => bw}/manual.svg (100%) rename img/src/{ => bw}/note.svg (100%) rename img/src/{ => bw}/percent.svg (100%) rename img/src/{ => bw}/random.svg (100%) rename img/src/{ => bw}/settings.svg (100%) rename img/src/{ => bw}/sort-down.svg (100%) rename img/src/{ => bw}/sort-up.svg (100%) rename img/src/{ => bw}/subtasks-hidden.svg (100%) rename img/src/{ => bw}/subtasks-hidden~hover.svg (100%) rename img/src/{ => bw}/subtasks-visible.svg (100%) rename img/src/{ => bw}/tag.svg (100%) rename img/src/{ => bw}/task-star.svg (100%) rename img/src/{ => bw}/toggle.svg (100%) rename img/src/{ => bw}/trash.svg (100%) rename img/src/{ => color}/calendar-due.svg (100%) rename img/src/{ => color}/calendar-overdue.svg (100%) rename img/src/{ => color}/checkmark-color.svg (100%) rename img/src/{ => color}/clock-due.svg (100%) rename img/src/{ => color}/clock-overdue.svg (100%) rename img/src/{ => color}/percent-active.svg (100%) rename img/src/{ => color}/tag-active.svg (100%) rename img/src/{ => color}/task-star-high.svg (100%) rename img/src/{ => color}/task-star-low.svg (100%) rename img/src/{ => color}/task-star-medium.svg (100%) rename svg-sprite.json => svg-sprite-bw.json (60%) create mode 100644 svg-sprite-bw.tmpl create mode 100644 svg-sprite-color.json rename svg-sprite.tmpl => svg-sprite-color.tmpl (100%) diff --git a/.gitignore b/.gitignore index fa74bb69..a05e8fe1 100644 --- a/.gitignore +++ b/.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/ ################# diff --git a/css/src/style.scss b/css/src/style.scss index 621ae26c..68d1ce0d 100644 --- a/css/src/style.scss +++ b/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; } } diff --git a/css/tasks.scss b/css/tasks.scss index f57ba033..6813755e 100644 --- a/css/tasks.scss +++ b/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'; diff --git a/img/sprites.svg b/img/sprites.svg new file mode 100644 index 00000000..bbdd523f --- /dev/null +++ b/img/sprites.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/src/add.svg b/img/src/bw/add.svg similarity index 100% rename from img/src/add.svg rename to img/src/bw/add.svg diff --git a/img/src/all.svg b/img/src/bw/all.svg similarity index 100% rename from img/src/all.svg rename to img/src/bw/all.svg diff --git a/img/src/alphabetically.svg b/img/src/bw/alphabetically.svg similarity index 100% rename from img/src/alphabetically.svg rename to img/src/bw/alphabetically.svg diff --git a/img/src/calendar.svg b/img/src/bw/calendar.svg similarity index 100% rename from img/src/calendar.svg rename to img/src/bw/calendar.svg diff --git a/img/src/checkmark.svg b/img/src/bw/checkmark.svg similarity index 100% rename from img/src/checkmark.svg rename to img/src/bw/checkmark.svg diff --git a/img/src/clock.svg b/img/src/bw/clock.svg similarity index 100% rename from img/src/clock.svg rename to img/src/bw/clock.svg diff --git a/img/src/close.svg b/img/src/bw/close.svg similarity index 100% rename from img/src/close.svg rename to img/src/bw/close.svg diff --git a/img/src/current.svg b/img/src/bw/current.svg similarity index 100% rename from img/src/current.svg rename to img/src/bw/current.svg diff --git a/img/src/hide.svg b/img/src/bw/hide.svg similarity index 100% rename from img/src/hide.svg rename to img/src/bw/hide.svg diff --git a/img/src/list.svg b/img/src/bw/list.svg similarity index 100% rename from img/src/list.svg rename to img/src/bw/list.svg diff --git a/img/src/manual.svg b/img/src/bw/manual.svg similarity index 100% rename from img/src/manual.svg rename to img/src/bw/manual.svg diff --git a/img/src/note.svg b/img/src/bw/note.svg similarity index 100% rename from img/src/note.svg rename to img/src/bw/note.svg diff --git a/img/src/percent.svg b/img/src/bw/percent.svg similarity index 100% rename from img/src/percent.svg rename to img/src/bw/percent.svg diff --git a/img/src/random.svg b/img/src/bw/random.svg similarity index 100% rename from img/src/random.svg rename to img/src/bw/random.svg diff --git a/img/src/settings.svg b/img/src/bw/settings.svg similarity index 100% rename from img/src/settings.svg rename to img/src/bw/settings.svg diff --git a/img/src/sort-down.svg b/img/src/bw/sort-down.svg similarity index 100% rename from img/src/sort-down.svg rename to img/src/bw/sort-down.svg diff --git a/img/src/sort-up.svg b/img/src/bw/sort-up.svg similarity index 100% rename from img/src/sort-up.svg rename to img/src/bw/sort-up.svg diff --git a/img/src/subtasks-hidden.svg b/img/src/bw/subtasks-hidden.svg similarity index 100% rename from img/src/subtasks-hidden.svg rename to img/src/bw/subtasks-hidden.svg diff --git a/img/src/subtasks-hidden~hover.svg b/img/src/bw/subtasks-hidden~hover.svg similarity index 100% rename from img/src/subtasks-hidden~hover.svg rename to img/src/bw/subtasks-hidden~hover.svg diff --git a/img/src/subtasks-visible.svg b/img/src/bw/subtasks-visible.svg similarity index 100% rename from img/src/subtasks-visible.svg rename to img/src/bw/subtasks-visible.svg diff --git a/img/src/tag.svg b/img/src/bw/tag.svg similarity index 100% rename from img/src/tag.svg rename to img/src/bw/tag.svg diff --git a/img/src/task-star.svg b/img/src/bw/task-star.svg similarity index 100% rename from img/src/task-star.svg rename to img/src/bw/task-star.svg diff --git a/img/src/toggle.svg b/img/src/bw/toggle.svg similarity index 100% rename from img/src/toggle.svg rename to img/src/bw/toggle.svg diff --git a/img/src/trash.svg b/img/src/bw/trash.svg similarity index 100% rename from img/src/trash.svg rename to img/src/bw/trash.svg diff --git a/img/src/calendar-due.svg b/img/src/color/calendar-due.svg similarity index 100% rename from img/src/calendar-due.svg rename to img/src/color/calendar-due.svg diff --git a/img/src/calendar-overdue.svg b/img/src/color/calendar-overdue.svg similarity index 100% rename from img/src/calendar-overdue.svg rename to img/src/color/calendar-overdue.svg diff --git a/img/src/checkmark-color.svg b/img/src/color/checkmark-color.svg similarity index 100% rename from img/src/checkmark-color.svg rename to img/src/color/checkmark-color.svg diff --git a/img/src/clock-due.svg b/img/src/color/clock-due.svg similarity index 100% rename from img/src/clock-due.svg rename to img/src/color/clock-due.svg diff --git a/img/src/clock-overdue.svg b/img/src/color/clock-overdue.svg similarity index 100% rename from img/src/clock-overdue.svg rename to img/src/color/clock-overdue.svg diff --git a/img/src/percent-active.svg b/img/src/color/percent-active.svg similarity index 100% rename from img/src/percent-active.svg rename to img/src/color/percent-active.svg diff --git a/img/src/tag-active.svg b/img/src/color/tag-active.svg similarity index 100% rename from img/src/tag-active.svg rename to img/src/color/tag-active.svg diff --git a/img/src/task-star-high.svg b/img/src/color/task-star-high.svg similarity index 100% rename from img/src/task-star-high.svg rename to img/src/color/task-star-high.svg diff --git a/img/src/task-star-low.svg b/img/src/color/task-star-low.svg similarity index 100% rename from img/src/task-star-low.svg rename to img/src/color/task-star-low.svg diff --git a/img/src/task-star-medium.svg b/img/src/color/task-star-medium.svg similarity index 100% rename from img/src/task-star-medium.svg rename to img/src/color/task-star-medium.svg diff --git a/package.json b/package.json index fd5dbcbb..d3295301 100644 --- a/package.json +++ b/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", diff --git a/src/components/SortorderDropdown.vue b/src/components/SortorderDropdown.vue index c3327cd0..ab4e8a24 100644 --- a/src/components/SortorderDropdown.vue +++ b/src/components/SortorderDropdown.vue @@ -24,8 +24,8 @@ License along with this library. If not, see .
@@ -36,9 +36,9 @@ License along with this library. If not, see . :class="{active: sortOrder == order.id}" @click="setSortOrder(order.id)"> - + {{ order.text }} - + diff --git a/src/components/Task.vue b/src/components/Task.vue index 12f89a16..3b1aefcc 100644 --- a/src/components/Task.vue +++ b/src/components/Task.vue @@ -40,30 +40,30 @@ License along with this library. If not, see . name="toggleCompleted" role="checkbox" @click="toggleCompleted(task)"> - + - + + class="icon icon-bw right large subtasks reactive no-nav" /> + class="icon icon-bw icon-toggle right large toggle-completed-subtasks reactive no-nav" /> - + {{ task.due | formatDate }} {{ task.calendar.displayName }} @@ -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' } }, diff --git a/src/components/TheDetails.vue b/src/components/TheDetails.vue index 8894cf58..ec8be0d7 100644 --- a/src/components/TheDetails.vue +++ b/src/components/TheDetails.vue @@ -30,11 +30,11 @@ License along with this library. If not, see . class="checkbox reactive" role="checkbox" @click="toggleCompleted(task.uri)"> - + + class="icon" />
. class="section detail-start">
- + {{ task.start | startDate }}
.
- + - +
@@ -87,8 +87,8 @@ License along with this library. If not, see . class="section detail-date">
- + {{ task.due | dueDate }}
.
- + - +
@@ -116,7 +116,7 @@ License along with this library. If not, see . role="checkbox" @click="toggleAllDay(task.uri)">
- + {{ t('tasks', 'All day') }}
@@ -125,7 +125,7 @@ License along with this library. If not, see .
+ class="icon" /> {{ task.priority | priority }}
.
- + - +
@@ -156,7 +156,7 @@ License along with this library. If not, see . class="section detail-complete">
- + {{ task.complete | complete }}
.
- + - +
  • @@ -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 */ diff --git a/src/components/TheList.vue b/src/components/TheList.vue index dffa19ac..f389e4f4 100644 --- a/src/components/TheList.vue +++ b/src/components/TheList.vue @@ -122,7 +122,7 @@ License along with this library. If not, see .
  • - {{ t('tasks', 'Add List...') }} diff --git a/src/components/TheSettings.vue b/src/components/TheSettings.vue index 7d8cb574..9436800a 100644 --- a/src/components/TheSettings.vue +++ b/src/components/TheSettings.vue @@ -44,7 +44,7 @@ License along with this library. If not, see .
  • - + {{ dayOfMonth }} diff --git a/svg-sprite.json b/svg-sprite-bw.json similarity index 60% rename from svg-sprite.json rename to svg-sprite-bw.json index b499e5fd..b4d778de 100644 --- a/svg-sprite.json +++ b/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" } } } diff --git a/svg-sprite-bw.tmpl b/svg-sprite-bw.tmpl new file mode 100644 index 00000000..6926de95 --- /dev/null +++ b/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}} diff --git a/svg-sprite-color.json b/svg-sprite-color.json new file mode 100644 index 00000000..ad6f0948 --- /dev/null +++ b/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" + } + } + } + } +} diff --git a/svg-sprite.tmpl b/svg-sprite-color.tmpl similarity index 100% rename from svg-sprite.tmpl rename to svg-sprite-color.tmpl