feat(reminders): move reminder settings to a popup

src/components/input/SimpleButton.vue

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

src/components/input/datepicker.vue

@@ -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: {

src/components/misc/popup.vue

@@ -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() {

src/components/tasks/partials/reminder-detail.vue

@@ -1,20 +1,28 @@
 <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">
-			<BaseButton
+						<SimpleButton
+							class="option-button"
 							v-for="p in presets"
 						>
 							{{ formatReminder(p) }}
-			</BaseButton>
+						</SimpleButton>
-			<BaseButton @click="showFormSwitch = 'relative'">
+						<SimpleButton @click="showFormSwitch = 'relative'" class="option-button">
 							Custom
-			</BaseButton>
+						</SimpleButton>
-			<BaseButton @click="showFormSwitch = 'absolute'">
+						<SimpleButton @click="showFormSwitch = 'absolute'" class="option-button">
 							Date
-			</BaseButton>
+						</SimpleButton>
 					</div>
 
 					<ReminderPeriod
@@ -28,6 +36,9 @@
 						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'})
 
@@ -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>

src/components/tasks/partials/reminder-period.vue

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