Display tasks with future start date dimly (#1998)

* Display tasks with future start date dimly

Signed-off-by: nico-nacq <nico@nacq.me>
This commit is contained in:
Nico F 2022-05-16 17:09:52 +02:00 committed by GitHub
parent 4296b72b33
commit 17e3f4ebbd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 1 deletions

View File

@ -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;