feat(reminders): move reminder settings to a popup
This commit is contained in:
kolaente
parent
e6c4c18974
commit
ae177c73ea
26
src/components/input/SimpleButton.vue
Normal file
26
src/components/input/SimpleButton.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<BaseButton class="simple-button">
|
||||
<slot/>
|
||||
</BaseButton>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.simple-button {
|
||||
color: var(--text);
|
||||
padding: .25rem .5rem;
|
||||
transition: background-color $transition;
|
||||
border-radius: $radius;
|
||||
display: block;
|
||||
margin: .1rem 0;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
||||
&:hover {
|
||||
background: var(--white);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="datepicker">
|
||||
<BaseButton @click.stop="toggleDatePopup" class="show" :disabled="disabled || undefined">
|
||||
<SimpleButton @click.stop="toggleDatePopup" class="show" :disabled="disabled || undefined">
|
||||
{{ date === null ? chooseDateLabel : formatDateShort(date) }}
|
||||
</BaseButton>
|
||||
</SimpleButton>
|
||||
|
||||
<CustomTransition name="fade">
|
||||
<div v-if="show" class="datepicker-popup" ref="datepickerPopup">
|
||||
@ -28,14 +28,14 @@
|
||||
<script setup lang="ts">
|
||||
import {ref, onMounted, onBeforeUnmount, toRef, watch, type PropType} from 'vue'
|
||||
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import CustomTransition from '@/components/misc/CustomTransition.vue'
|
||||
import DatepickerInline from '@/components/input/datepickerInline.vue'
|
||||
import SimpleButton from '@/components/input/SimpleButton.vue'
|
||||
|
||||
import {formatDateShort} from '@/helpers/time/formatDate'
|
||||
import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
|
||||
import {createDateFromString} from '@/helpers/time/createDateFromString'
|
||||
import {useI18n} from 'vue-i18n'
|
||||
import DatepickerInline from '@/components/input/datepickerInline.vue'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
|
||||
@ -23,11 +23,14 @@ const props = defineProps({
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const open = ref(false)
|
||||
const popup = ref<HTMLElement | null>(null)
|
||||
|
||||
function close() {
|
||||
open.value = false
|
||||
emit('close')
|
||||
}
|
||||
|
||||
function toggle() {
|
||||
|
||||
@ -1,33 +1,44 @@
|
||||
<template>
|
||||
<div>
|
||||
<Popup @close="showFormSwitch = null">
|
||||
<template #trigger="{toggle}">
|
||||
<SimpleButton
|
||||
@click.prevent.stop="toggle()"
|
||||
>
|
||||
{{ reminderText }}
|
||||
</SimpleButton>
|
||||
</template>
|
||||
<template #content="{isOpen}">
|
||||
<Card class="reminder-options-popup" :class="{'is-open': isOpen}" :padding="false">
|
||||
<div class="options" v-if="showFormSwitch === null">
|
||||
<SimpleButton
|
||||
class="option-button"
|
||||
v-for="p in presets"
|
||||
>
|
||||
{{ formatReminder(p) }}
|
||||
</SimpleButton>
|
||||
<SimpleButton @click="showFormSwitch = 'relative'" class="option-button">
|
||||
Custom
|
||||
</SimpleButton>
|
||||
<SimpleButton @click="showFormSwitch = 'absolute'" class="option-button">
|
||||
Date
|
||||
</SimpleButton>
|
||||
</div>
|
||||
|
||||
{{ reminderText }}
|
||||
<ReminderPeriod
|
||||
v-if="showFormSwitch === 'relative'"
|
||||
v-model="reminder"
|
||||
@update:modelValue="emit('update:modelValue', reminder)"
|
||||
/>
|
||||
|
||||
<div class="options" v-if="showFormSwitch === null">
|
||||
<BaseButton
|
||||
v-for="p in presets"
|
||||
>
|
||||
{{ formatReminder(p) }}
|
||||
</BaseButton>
|
||||
<BaseButton @click="showFormSwitch = 'relative'">
|
||||
Custom
|
||||
</BaseButton>
|
||||
<BaseButton @click="showFormSwitch = 'absolute'">
|
||||
Date
|
||||
</BaseButton>
|
||||
</div>
|
||||
|
||||
<ReminderPeriod
|
||||
v-if="showFormSwitch === 'relative'"
|
||||
v-model="reminder"
|
||||
@update:modelValue="emit('update:modelValue', reminder)"
|
||||
/>
|
||||
|
||||
<DatepickerInline
|
||||
v-if="showFormSwitch === 'absolute'"
|
||||
v-model="reminderDate"
|
||||
@update:modelValue="setReminderDate"
|
||||
/>
|
||||
<DatepickerInline
|
||||
v-if="showFormSwitch === 'absolute'"
|
||||
v-model="reminderDate"
|
||||
@update:modelValue="setReminderDate"
|
||||
/>
|
||||
</Card>
|
||||
</template>
|
||||
</Popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -45,8 +56,11 @@ import {formatDateShort} from '@/helpers/time/formatDate'
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import DatepickerInline from '@/components/input/datepickerInline.vue'
|
||||
import ReminderPeriod from '@/components/tasks/partials/reminder-period.vue'
|
||||
import Popup from '@/components/misc/popup.vue'
|
||||
|
||||
import TaskReminderModel from '@/models/taskReminder'
|
||||
import Card from '@/components/misc/card.vue'
|
||||
import SimpleButton from '@/components/input/SimpleButton.vue'
|
||||
|
||||
const {t} = useI18n({useScope: 'global'})
|
||||
|
||||
@ -75,7 +89,7 @@ const reminderDate = ref(null)
|
||||
const showFormSwitch = ref<null | 'relative' | 'absolute'>(null)
|
||||
|
||||
const reminderText = computed(() => {
|
||||
|
||||
|
||||
if (reminder.value.relativeTo !== null) {
|
||||
return formatReminder(reminder.value)
|
||||
}
|
||||
@ -106,7 +120,7 @@ function setReminderDate() {
|
||||
function formatReminder(reminder: TaskReminderModel) {
|
||||
|
||||
const period = secondsToPeriod(reminder.relativePeriod)
|
||||
|
||||
|
||||
if (period.amount === 0) {
|
||||
switch (reminder.relativeTo) {
|
||||
case REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE:
|
||||
@ -117,9 +131,9 @@ function formatReminder(reminder: TaskReminderModel) {
|
||||
return t('task.reminder.onEndDate')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const amountAbs = Math.abs(period.amount)
|
||||
|
||||
|
||||
let relativeTo = ''
|
||||
switch (reminder.relativeTo) {
|
||||
case REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE:
|
||||
@ -132,7 +146,7 @@ function formatReminder(reminder: TaskReminderModel) {
|
||||
relativeTo = t('task.attributes.endDate')
|
||||
break
|
||||
}
|
||||
|
||||
|
||||
if (reminder.relativePeriod <= 0) {
|
||||
return t('task.reminder.before', {
|
||||
amount: amountAbs,
|
||||
@ -140,7 +154,7 @@ function formatReminder(reminder: TaskReminderModel) {
|
||||
type: relativeTo,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
return t('task.reminder.after', {
|
||||
amount: amountAbs,
|
||||
unit: translateUnit(amountAbs, period.unit),
|
||||
@ -174,4 +188,28 @@ function translateUnit(amount: number, unit: PeriodUnit): string {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
:deep(.popup) {
|
||||
top: unset;
|
||||
}
|
||||
|
||||
.reminder-options-popup {
|
||||
width: 300px;
|
||||
z-index: 99;
|
||||
|
||||
@media screen and (max-width: ($tablet)) {
|
||||
width: calc(100vw - 5rem);
|
||||
}
|
||||
|
||||
.option-button {
|
||||
font-size: .85rem;
|
||||
border-radius: 0;
|
||||
padding: .5rem;
|
||||
margin: 0;
|
||||
|
||||
&:hover {
|
||||
background: var(--grey-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -95,7 +95,6 @@ const modelValue = toRef(props, 'modelValue')
|
||||
watch(
|
||||
modelValue,
|
||||
(value) => {
|
||||
console.log({value})
|
||||
const p = secondsToPeriod(value?.relativePeriod)
|
||||
period.value.durationUnit = p.unit
|
||||
period.value.duration = p.amount
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user