Skip to content

Commit 1aa0d84

Browse files
xet7xet7
committed
Fix due dates to use colors: red = overdue, amber = due soon, no shade = not due yet.
Thanks to xet7 ! Fixes #5963
1 parent 7f31d7c commit 1aa0d84

File tree

3 files changed

+180
-42
lines changed

3 files changed

+180
-42
lines changed

‎client/components/cards/cardDate.css‎

Lines changed: 53 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -8,39 +8,72 @@
88
.card-date.is-active {
99
background-color: #b3b3b3;
1010
}
11-
.card-date.current,
12-
.card-date.almost-due,
13-
.card-date.due,
14-
.card-date.long-overdue {
11+
/* Date status colors - red = overdue, amber = due soon, no shade = not due */
12+
.card-date.overdue {
13+
background-color: #ff4444; /* Red for overdue */
1514
color: #fff;
1615
}
16+
.card-date.overdue:hover,
17+
.card-date.overdue.is-active {
18+
background-color: #cc3333;
19+
}
20+
21+
.card-date.due-soon {
22+
background-color: #ffaa00; /* Amber for due soon */
23+
color: #000;
24+
}
25+
.card-date.due-soon:hover,
26+
.card-date.due-soon.is-active {
27+
background-color: #e69900;
28+
}
29+
30+
.card-date.not-due {
31+
/* No special background - uses default date type colors */
32+
}
33+
1734
.card-date.current {
18-
background-color: #5ba639;
35+
background-color: #5ba639; /* Green for current/active */
36+
color: #fff;
1937
}
2038
.card-date.current:hover,
2139
.card-date.current.is-active {
2240
background-color: #46802c;
2341
}
24-
.card-date.almost-due {
25-
background-color: #edc909;
42+
43+
.card-date.completed {
44+
background-color: #90ee90; /* Light green for completed */
45+
color: #000;
46+
}
47+
.card-date.completed:hover,
48+
.card-date.completed.is-active {
49+
background-color: #7dd87d;
2650
}
27-
.card-date.almost-due:hover,
28-
.card-date.almost-due.is-active {
29-
background-color: #bc9f07;
51+
52+
.card-date.completed-early {
53+
background-color: #4caf50; /* Green for completed early */
54+
color: #fff;
3055
}
31-
.card-date.due {
32-
background-color: #fa3f00;
56+
.card-date.completed-early:hover,
57+
.card-date.completed-early.is-active {
58+
background-color: #45a049;
3359
}
34-
.card-date.due:hover,
35-
.card-date.due.is-active {
36-
background-color: #c73200;
60+
61+
.card-date.completed-late {
62+
background-color: #ff9800; /* Orange for completed late */
63+
color: #fff;
64+
}
65+
.card-date.completed-late:hover,
66+
.card-date.completed-late.is-active {
67+
background-color: #f57c00;
3768
}
38-
.card-date.long-overdue {
39-
background-color: #fd5d47;
69+
70+
.card-date.completed-on-time {
71+
background-color: #2196f3; /* Blue for completed on time */
72+
color: #fff;
4073
}
41-
.card-date.long-overdue:hover,
42-
.card-date.long-overdue.is-active {
43-
background-color: #fd3e24;
74+
.card-date.completed-on-time:hover,
75+
.card-date.completed-on-time.is-active {
76+
background-color: #1976d2;
4477
}
4578

4679
/* Date type specific colors */

‎client/components/cards/cardDate.js‎

Lines changed: 59 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -157,14 +157,18 @@ class CardReceivedDate extends CardDate {
157157
const endAt = this.data().getEnd();
158158
const startAt = this.data().getStart();
159159
const theDate = this.date.get();
160-
// if dueAt, endAt and startAt exist & are > receivedAt, receivedAt doesn't need to be flagged
160+
const now = this.now.get();
161+
162+
// Received date logic: if received date is after start, due, or end dates, it's overdue
161163
if (
162164
(startAt && isAfter(theDate, startAt)) ||
163165
(endAt && isAfter(theDate, endAt)) ||
164166
(dueAt && isAfter(theDate, dueAt))
165-
)
166-
classes += 'long-overdue';
167-
else classes += 'current';
167+
) {
168+
classes += 'overdue';
169+
} else {
170+
classes += 'not-due';
171+
}
168172
return classes;
169173
}
170174

@@ -193,16 +197,22 @@ class CardStartDate extends CardDate {
193197
}
194198

195199
classes() {
196-
let classes = 'start-date' + ' ';
200+
let classes = 'start-date ';
197201
const dueAt = this.data().getDue();
198202
const endAt = this.data().getEnd();
199203
const theDate = this.date.get();
200204
const now = this.now.get();
201-
// if dueAt or endAt exist & are > startAt, startAt doesn't need to be flagged
202-
if ((endAt && isAfter(theDate, endAt)) || (dueAt && isAfter(theDate, dueAt)))
203-
classes += 'long-overdue';
204-
else if (isAfter(theDate, now)) classes += '';
205-
else classes += 'current';
205+
206+
// Start date logic: if start date is after due or end dates, it's overdue
207+
if ((endAt && isAfter(theDate, endAt)) || (dueAt && isAfter(theDate, dueAt))) {
208+
classes += 'overdue';
209+
} else if (isAfter(theDate, now)) {
210+
// Start date is in the future - not due yet
211+
classes += 'not-due';
212+
} else {
213+
// Start date is today or in the past - current/active
214+
classes += 'current';
215+
}
206216
return classes;
207217
}
208218

@@ -231,17 +241,33 @@ class CardDueDate extends CardDate {
231241
}
232242

233243
classes() {
234-
let classes = 'due-date' + ' ';
244+
let classes = 'due-date ';
235245
const endAt = this.data().getEnd();
236246
const theDate = this.date.get();
237247
const now = this.now.get();
238-
// if the due date is after the end date, green - done early
239-
if (endAt && isAfter(theDate, endAt)) classes += 'current';
240-
// if there is an end date, don't need to flag the due date
241-
else if (endAt) classes += '';
242-
else if (diff(now, theDate, 'days') >= 2) classes += 'long-overdue';
243-
else if (diff(now, theDate, 'minute') >= 0) classes += 'due';
244-
else if (diff(now, theDate, 'days') >= -1) classes += 'almost-due';
248+
249+
// If there's an end date and it's before the due date, task is completed early
250+
if (endAt && isBefore(endAt, theDate)) {
251+
classes += 'completed-early';
252+
}
253+
// If there's an end date, don't show due date status since task is completed
254+
else if (endAt) {
255+
classes += 'completed';
256+
}
257+
// Due date logic based on current time
258+
else {
259+
const daysDiff = diff(theDate, now, 'days');
260+
if (daysDiff < 0) {
261+
// Due date is in the past - overdue
262+
classes += 'overdue';
263+
} else if (daysDiff <= 1) {
264+
// Due today or tomorrow - due soon
265+
classes += 'due-soon';
266+
} else {
267+
// Due date is more than 1 day away - not due yet
268+
classes += 'not-due';
269+
}
270+
}
245271
return classes;
246272
}
247273

@@ -270,12 +296,23 @@ class CardEndDate extends CardDate {
270296
}
271297

272298
classes() {
273-
let classes = 'end-date' + ' ';
299+
let classes = 'end-date ';
274300
const dueAt = this.data().getDue();
275301
const theDate = this.date.get();
276-
if (!dueAt) classes += '';
277-
else if (isBefore(theDate, dueAt)) classes += 'current';
278-
else if (isAfter(theDate, dueAt)) classes += 'due';
302+
303+
if (!dueAt) {
304+
// No due date set - just show as completed
305+
classes += 'completed';
306+
} else if (isBefore(theDate, dueAt)) {
307+
// End date is before due date - completed early
308+
classes += 'completed-early';
309+
} else if (isAfter(theDate, dueAt)) {
310+
// End date is after due date - completed late
311+
classes += 'completed-late';
312+
} else {
313+
// End date equals due date - completed on time
314+
classes += 'completed-on-time';
315+
}
279316
return classes;
280317
}
281318

‎client/components/cards/minicard.css‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -229,6 +229,74 @@
229229
background-color: #ff9999;
230230
}
231231

232+
/* Date status colors for minicards - matching cardDate.css */
233+
.minicard .card-date.overdue {
234+
background-color: #ff4444 !important; /* Red for overdue */
235+
color: #fff !important;
236+
}
237+
.minicard .card-date.overdue:hover,
238+
.minicard .card-date.overdue.is-active {
239+
background-color: #cc3333 !important;
240+
}
241+
242+
.minicard .card-date.due-soon {
243+
background-color: #ffaa00 !important; /* Amber for due soon */
244+
color: #000 !important;
245+
}
246+
.minicard .card-date.due-soon:hover,
247+
.minicard .card-date.due-soon.is-active {
248+
background-color: #e69900 !important;
249+
}
250+
251+
.minicard .card-date.not-due {
252+
/* No special background - uses default date type colors */
253+
}
254+
255+
.minicard .card-date.current {
256+
background-color: #5ba639 !important; /* Green for current/active */
257+
color: #fff !important;
258+
}
259+
.minicard .card-date.current:hover,
260+
.minicard .card-date.current.is-active {
261+
background-color: #46802c !important;
262+
}
263+
264+
.minicard .card-date.completed {
265+
background-color: #90ee90 !important; /* Light green for completed */
266+
color: #000 !important;
267+
}
268+
.minicard .card-date.completed:hover,
269+
.minicard .card-date.completed.is-active {
270+
background-color: #7dd87d !important;
271+
}
272+
273+
.minicard .card-date.completed-early {
274+
background-color: #4caf50 !important; /* Green for completed early */
275+
color: #fff !important;
276+
}
277+
.minicard .card-date.completed-early:hover,
278+
.minicard .card-date.completed-early.is-active {
279+
background-color: #45a049 !important;
280+
}
281+
282+
.minicard .card-date.completed-late {
283+
background-color: #ff9800 !important; /* Orange for completed late */
284+
color: #fff !important;
285+
}
286+
.minicard .card-date.completed-late:hover,
287+
.minicard .card-date.completed-late.is-active {
288+
background-color: #f57c00 !important;
289+
}
290+
291+
.minicard .card-date.completed-on-time {
292+
background-color: #2196f3 !important; /* Blue for completed on time */
293+
color: #fff !important;
294+
}
295+
.minicard .card-date.completed-on-time:hover,
296+
.minicard .card-date.completed-on-time.is-active {
297+
background-color: #1976d2 !important;
298+
}
299+
232300
/* Font Awesome icons in minicard dates */
233301
.minicard .card-date i.fa {
234302
margin-right: 0.3vw;

0 commit comments

Comments
 (0)