Display tasks with future start date dimly (#1998)

* Display tasks with future start date dimly

Signed-off-by: nico-nacq <nico@nacq.me>

1 files changed, 15 insertions, 1 deletions

diff --git a/src/components/TaskBody.vue b/src/components/TaskBody.vue
index 26dbca2e..91a99106 100644
--- a/src/components/TaskBody.vue
+++ b/src/components/TaskBody.vue
@@ -28,7 +28,8 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 			'task-item--closed': task.closed,
 			'task-item--deleted': task.deleteCountdown !== null,
 			'task-item--input-visible': (filteredSubtasksShown.length || showSubtaskInput),
-			'task-item--subtasks-visible': filteredSubtasksShown.length
+			'task-item--subtasks-visible': filteredSubtasksShown.length,
+			'task-item--non-started': !overdue(task.startMoment) && task.start
 		}"
 		:data-priority="[task.priority]"
 		class="task-item"
@@ -75,6 +76,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 					<span class="calendar__name">{{ task.calendar.displayName }}</span>
 				</div>
 				<SortVariant v-if="hasHiddenSubtasks" :size="20" :title="t('tasks', 'Task has hidden subtasks')" />
+				<CalendarClock v-if="!overdue(task.startMoment) && task.start" :size="20" :title="t('tasks', 'Task has not yet started')" />
 				<Pin v-if="task.pinned" :size="20" :title="t('tasks', 'Task is pinned')" />
 				<TextBoxOutline v-if="task.note!=''"
 					:size="20"
@@ -181,6 +183,7 @@ import Pin from 'vue-material-design-icons/Pin'
 import Plus from 'vue-material-design-icons/Plus'
 import TextBoxOutline from 'vue-material-design-icons/TextBoxOutline'
 import SortVariant from 'vue-material-design-icons/SortVariant'
+import CalendarClock from 'vue-material-design-icons/CalendarClock'
 import Star from 'vue-material-design-icons/Star'
 import Undo from 'vue-material-design-icons/Undo'
 
@@ -205,6 +208,7 @@ export default {
 		Plus,
 		TextBoxOutline,
 		SortVariant,
+		CalendarClock,
 		Star,
 		Undo,
 	},
@@ -652,6 +656,16 @@ $breakpoint-mobile: 1024px;
 		opacity: .6;
 	}
 
+	&--non-started {
+		.title {
+			color: var(--color-text-maxcontrast);
+		}
+
+		.task-checkbox {
+			opacity: .2;
+		}
+	}
+
 	&.sortable-ghost {
 		filter: drop-shadow(0 0 3px var(--color-primary));
 		z-index: 5;