ami/tl-vikunja
1
0
Fork 0
Code

feat(reminders): highlight which preset or custom date is selected

Browse Source
This commit is contained in:
kolaente 2023-06-10 17:35:50 +02:00
parent bfcb36e093
commit 2677f6254d
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
1 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/tasks/partials/reminder-detail.vue
View File

@ -15,14 +15,23 @@
v-for="(p, k) in presets" v-for="(p, k) in presets"
:key="k" :key="k"
class="option-button" class="option-button"
:class="{'currently-active': p.relativePeriod === modelValue?.relativePeriod && modelValue?.relativeTo === p.relativeTo}"
@click="setReminderFromPreset(p, toggle)" @click="setReminderFromPreset(p, toggle)"
> >
{{ formatReminder(p) }} {{ formatReminder(p) }}
</SimpleButton> </SimpleButton>
<SimpleButton @click="showFormSwitch = 'relative'" class="option-button"> <SimpleButton
@click="showFormSwitch = 'relative'"
class="option-button"
:class="{'currently-active': modelValue?.relativeTo !== null && presets.find(p => p.relativePeriod === modelValue?.relativePeriod && modelValue?.relativeTo === p.relativeTo) === undefined}"
>
{{ $t('task.reminder.custom') }} {{ $t('task.reminder.custom') }}
</SimpleButton> </SimpleButton>
<SimpleButton @click="showFormSwitch = 'absolute'" class="option-button"> <SimpleButton
@click="showFormSwitch = 'absolute'"
class="option-button"
:class="{'currently-active': modelValue?.relativeTo === null}"
>
{{ $t('task.reminder.dateAndTime') }} {{ $t('task.reminder.dateAndTime') }}
</SimpleButton> </SimpleButton>
</div> </div>
@ -254,4 +263,8 @@ function translateUnit(amount: number, unit: PeriodUnit): string {
margin: .5rem; margin: .5rem;
width: calc(100% - 1rem); width: calc(100% - 1rem);
} }
.currently-active {
color: var(--primary);
}
</style> </style>