feat(reminders): highlight which preset or custom date is selected
continuous-integration/drone/pr Build is passing Details

This commit is contained in:
kolaente 2023-06-10 17:35:50 +02:00
parent bfcb36e093
commit 2677f6254d
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
1 changed files with 15 additions and 2 deletions

View File

@ -15,14 +15,23 @@
v-for="(p, k) in presets"
:key="k"
class="option-button"
:class="{'currently-active': p.relativePeriod === modelValue?.relativePeriod && modelValue?.relativeTo === p.relativeTo}"
@click="setReminderFromPreset(p, toggle)"
>
{{ formatReminder(p) }}
</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') }}
</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') }}
</SimpleButton>
</div>
@ -254,4 +263,8 @@ function translateUnit(amount: number, unit: PeriodUnit): string {
margin: .5rem;
width: calc(100% - 1rem);
}
.currently-active {
color: var(--primary);
}
</style>