wbrawner/tasks
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use new start and due date icons in details view

Browse source 
Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
This commit is contained in:
Raimund Schlüßler 2020-02-12 22:06:19 +01:00
parent 0e39d9a197
commit 7a291bdebb
No known key found for this signature in database
GPG key ID: 036FA7EB1A599178
8 changed files with 24 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
css/src/style.scss
View file

@ -903,6 +903,11 @@
.icon {
display: block;
&.icon-color {
opacity: 1;
cursor: unset;
}
}
.calendar-indicator {
@ -1035,15 +1040,6 @@
color: $yellow;
}
&.date .icon {
&.icon-calendar-due,
&.icon-calendar-overdue,
&.icon-percent,
&.icon-percent-active {
opacity: 1;
}
}
&.detail-note {
padding: 20px 0;
height: auto;
@ -1071,14 +1067,6 @@
}
}
.icon {
&.icon-privacy,
&.icon-status {
opacity: 1;
cursor: unset;
}
}
input[type='range'] {
border: medium none;
box-shadow: none;

1
img/src/bw/duedate.svg Normal file
View file

@ -0,0 +1 @@
<svg width="16" height="16" version="1.1" viewbox="0 0 16 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.9375v3h2v-0.95312c-0.0012-0.02644 0.020435-0.04808 0.046875-0.046875h9.9062c0.02644-0.0012 0.048075 0.020435 0.046875 0.046875v5.9062c0.0012 0.02644-0.020435 0.048075-0.046875 0.046875h-9.9062c-0.02644 0.0012-0.048079-0.020435-0.046875-0.046875v-0.95312h-2v1c0 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-1z"/><path d="m4 7v1.5h-3v3h3v1.5l4-3z" fill="#070000" style="paint-order:normal"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 857 B

1
img/src/bw/startdate.svg Normal file
View file

@ -0,0 +1 @@
<svg width="16" height="16" version="1.1" viewbox="0 0 16 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-2.5l-2 1.5v0.95312c0.0012 0.02644-0.020435 0.048075-0.046875 0.046875h-9.9062c-0.02644 0.0012-0.048079-0.020435-0.046875-0.046875v-5.9062c-0.0012-0.02644 0.020435-0.04808 0.046875-0.046875h9.9062c0.02644-0.0012 0.048075 0.020435 0.046875 0.046875v0.95312l2 1.5v-4.5c0.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-1z"/><path d="m11 7v1.5h-3v3h3v1.5l4-3z" fill="#070000" style="paint-order:normal"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 870 B

1
img/src/color/duedate-due.svg Normal file
View file

@ -0,0 +1 @@
<svg width="16" height="16" version="1.1" viewbox="0 0 16 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.9375v3h2v-0.95312c-0.0012-0.02644 0.020435-0.04808 0.046875-0.046875h9.9062c0.02644-0.0012 0.048075 0.020435 0.046875 0.046875v5.9062c0.0012 0.02644-0.020435 0.048075-0.046875 0.046875h-9.9062c-0.02644 0.0012-0.048079-0.020435-0.046875-0.046875v-0.95312h-2v1c0 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-1z" fill="#4574A9"/><path d="m4 7v1.5h-3v3h3v1.5l4-3z" fill="#4574A9" style="paint-order:normal"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 872 B

1
img/src/color/duedate-overdue.svg Normal file
View file

@ -0,0 +1 @@
<svg width="16" height="16" version="1.1" viewbox="0 0 16 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.9375v3h2v-0.95312c-0.0012-0.02644 0.020435-0.04808 0.046875-0.046875h9.9062c0.02644-0.0012 0.048075 0.020435 0.046875 0.046875v5.9062c0.0012 0.02644-0.020435 0.048075-0.046875 0.046875h-9.9062c-0.02644 0.0012-0.048079-0.020435-0.046875-0.046875v-0.95312h-2v1c0 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-1z" fill="#CE3433"/><path d="m4 7v1.5h-3v3h3v1.5l4-3z" fill="#CE3433" style="paint-order:normal"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 872 B

1
img/src/color/startdate-due.svg Normal file
View file

@ -0,0 +1 @@
<svg width="16" height="16" version="1.1" viewbox="0 0 16 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-2.5l-2 1.5v0.95312c0.0012 0.02644-0.020435 0.048075-0.046875 0.046875h-9.9062c-0.02644 0.0012-0.048079-0.020435-0.046875-0.046875v-5.9062c-0.0012-0.02644 0.020435-0.04808 0.046875-0.046875h9.9062c0.02644-0.0012 0.048075 0.020435 0.046875 0.046875v0.95312l2 1.5v-4.5c0.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-1z" fill="#4574A9"/><path d="m11 7v1.5h-3v3h3v1.5l4-3z" fill="#4574A9" style="paint-order:normal"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 885 B

1
img/src/color/startdate-overdue.svg Normal file
View file

@ -0,0 +1 @@
<svg width="16" height="16" version="1.1" viewbox="0 0 16 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-2.5l-2 1.5v0.95312c0.0012 0.02644-0.020435 0.048075-0.046875 0.046875h-9.9062c-0.02644 0.0012-0.048079-0.020435-0.046875-0.046875v-5.9062c-0.0012-0.02644 0.020435-0.04808 0.046875-0.046875h9.9062c0.02644-0.0012 0.048075 0.020435 0.046875 0.046875v0.95312l2 1.5v-4.5c0.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-1z" fill="#CE3433"/><path d="m11 7v1.5h-3v3h3v1.5l4-3z" fill="#CE3433" style="paint-order:normal"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 885 B

22
src/components/TheDetails.vue
View file

@ -72,7 +72,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
class="section-content"
@click="editProperty('start', $event)">
<span class="section-icon">
<span :class="[dateIcon(task.startMoment)]"
<span :class="[startDateIcon(task.startMoment)]"
class="icon" />
</span>
<span class="section-title">
@ -116,7 +116,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
class="section-content"
@click="editProperty('due', $event)">
<span class="section-icon">
<span :class="[dateIcon(task.dueMoment)]"
<span :class="[dueDateIcon(task.dueMoment)]"
class="icon" />
</span>
<span class="section-title">
@ -739,15 +739,19 @@ export default {
}
},
dateIcon: function(date) {
startDateIcon: function(date) {
if (date.isValid()) {
let c = 'icon-color icon-calendar-due'
if (overdue(date)) {
c += ' icon-calendar-overdue'
}
return c
return `icon-color icon-startdate-${overdue(date) ? 'overdue' : 'due'}`
} else {
return 'icon-bw icon-calendar'
return 'icon-bw icon-startdate'
}
},
dueDateIcon: function(date) {
if (date.isValid()) {
return `icon-color icon-duedate-${overdue(date) ? 'overdue' : 'due'}`
} else {
return 'icon-bw icon-duedate'
}
},