Refactor to use BaseDialog, implement also SettingsDialog on it.
This commit is contained in:
Leo Vasanko
parent
eecc302a00
commit
0383ea0a46
170
src/components/BaseDialog.vue
Normal file
170
src/components/BaseDialog.vue
Normal file
@ -0,0 +1,170 @@
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: { type: Boolean, default: false },
|
||||
title: { type: String, default: '' },
|
||||
draggable: { type: Boolean, default: true },
|
||||
autoFocus: { type: Boolean, default: true },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'opened', 'closed', 'submit'])
|
||||
|
||||
const modalRef = ref(null)
|
||||
const isDragging = ref(false)
|
||||
const dragOffset = ref({ x: 0, y: 0 })
|
||||
const modalPosition = ref({ x: 0, y: 0 })
|
||||
const dialogWidth = ref(null)
|
||||
const dialogHeight = ref(null)
|
||||
const hasMoved = ref(false)
|
||||
|
||||
function startDrag(event) {
|
||||
if (!props.draggable || !modalRef.value) return
|
||||
const rect = modalRef.value.getBoundingClientRect()
|
||||
// Lock current size so moving doesn't cause reflow / resize
|
||||
dialogWidth.value = rect.width
|
||||
dialogHeight.value = rect.height
|
||||
// Initialize position to current on-screen coordinates BEFORE enabling moved mode
|
||||
modalPosition.value = { x: rect.left, y: rect.top }
|
||||
isDragging.value = true
|
||||
hasMoved.value = true
|
||||
dragOffset.value = { x: event.clientX - rect.left, y: event.clientY - rect.top }
|
||||
if (event.pointerId !== undefined) {
|
||||
try {
|
||||
event.target.setPointerCapture(event.pointerId)
|
||||
} catch {}
|
||||
}
|
||||
document.addEventListener('pointermove', handleDrag, { passive: false })
|
||||
document.addEventListener('pointerup', stopDrag)
|
||||
document.addEventListener('pointercancel', stopDrag)
|
||||
event.preventDefault()
|
||||
}
|
||||
function handleDrag(event) {
|
||||
if (!isDragging.value) return
|
||||
modalPosition.value = {
|
||||
x: event.clientX - dragOffset.value.x,
|
||||
y: event.clientY - dragOffset.value.y,
|
||||
}
|
||||
event.preventDefault()
|
||||
}
|
||||
function stopDrag() {
|
||||
isDragging.value = false
|
||||
document.removeEventListener('pointermove', handleDrag)
|
||||
document.removeEventListener('pointerup', stopDrag)
|
||||
document.removeEventListener('pointercancel', stopDrag)
|
||||
}
|
||||
|
||||
const modalStyle = computed(() => {
|
||||
if (hasMoved.value) {
|
||||
return {
|
||||
transform: 'none',
|
||||
left: `${modalPosition.value.x}px`,
|
||||
top: `${modalPosition.value.y}px`,
|
||||
bottom: 'auto',
|
||||
right: 'auto',
|
||||
width: dialogWidth.value ? dialogWidth.value + 'px' : undefined,
|
||||
height: dialogHeight.value ? dialogHeight.value + 'px' : undefined,
|
||||
}
|
||||
}
|
||||
return {}
|
||||
})
|
||||
|
||||
function close() {
|
||||
emit('update:modelValue', false)
|
||||
emit('closed')
|
||||
}
|
||||
|
||||
function handleKeydown(e) {
|
||||
if (e.key === 'Escape' && props.modelValue) close()
|
||||
}
|
||||
|
||||
onMounted(() => document.addEventListener('keydown', handleKeydown))
|
||||
onUnmounted(() => document.removeEventListener('keydown', handleKeydown))
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
async (v) => {
|
||||
if (v) {
|
||||
emit('opened')
|
||||
await nextTick()
|
||||
if (props.autoFocus) {
|
||||
const el = modalRef.value?.querySelector('[autofocus]')
|
||||
if (el) el.focus()
|
||||
}
|
||||
}
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="modelValue" class="ec-modal" ref="modalRef" :style="modalStyle">
|
||||
<form class="ec-form" @submit.prevent="emit('submit')">
|
||||
<header class="ec-header" @pointerdown="startDrag">
|
||||
<h2 class="ec-title">
|
||||
<slot name="title">{{ title }}</slot>
|
||||
</h2>
|
||||
<div class="ec-header-extra"><slot name="header-extra" /></div>
|
||||
</header>
|
||||
<div class="ec-body">
|
||||
<slot />
|
||||
</div>
|
||||
<footer v-if="$slots.footer" class="ec-footer">
|
||||
<slot name="footer" />
|
||||
</footer>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ec-modal {
|
||||
position: fixed;
|
||||
bottom: 3em;
|
||||
right: 2em;
|
||||
background: color-mix(in srgb, var(--panel) 85%, transparent);
|
||||
backdrop-filter: blur(0.625em);
|
||||
-webkit-backdrop-filter: blur(0.625em);
|
||||
color: var(--ink);
|
||||
border-radius: 0.6em;
|
||||
min-height: 23em;
|
||||
min-width: 26em;
|
||||
max-width: min(34em, 90vw);
|
||||
box-shadow: 0 0.6em 1.8em rgba(0, 0, 0, 0.35);
|
||||
border: 0.0625em solid color-mix(in srgb, var(--muted) 40%, transparent);
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ec-form {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
min-height: 23em;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.ec-header {
|
||||
cursor: move;
|
||||
user-select: none;
|
||||
padding: 0.75em 1em 0.5em 1em;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
}
|
||||
.ec-title {
|
||||
margin: 0;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.ec-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
padding: 0 1em 0.5em 1em;
|
||||
overflow: auto;
|
||||
}
|
||||
.ec-footer {
|
||||
padding: 0.5em 1em 1em 1em;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1em;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
</style>
|
||||
@ -1,24 +1,36 @@
|
||||
<template>
|
||||
<div class="wrap">
|
||||
<AppHeader />
|
||||
<!-- AppHeader component reference removed (file missing); add inline header with Settings button -->
|
||||
<div class="inline-header">
|
||||
<h1 class="app-title">Calendar</h1>
|
||||
<div class="header-actions">
|
||||
<button type="button" class="settings-btn" @click="openSettings">Settings</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-container" ref="containerEl">
|
||||
<CalendarGrid />
|
||||
<Jogwheel />
|
||||
</div>
|
||||
<EventDialog />
|
||||
<SettingsDialog ref="settingsDialog" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import AppHeader from './AppHeader.vue'
|
||||
import CalendarGrid from './CalendarGrid.vue'
|
||||
import Jogwheel from './Jogwheel.vue'
|
||||
import EventDialog from './EventDialog.vue'
|
||||
import SettingsDialog from './SettingsDialog.vue'
|
||||
import { useCalendarStore } from '@/stores/CalendarStore'
|
||||
|
||||
const calendarStore = useCalendarStore()
|
||||
const containerEl = ref(null)
|
||||
const settingsDialog = ref(null)
|
||||
|
||||
function openSettings() {
|
||||
settingsDialog.value?.open()
|
||||
}
|
||||
|
||||
let intervalId
|
||||
|
||||
@ -33,3 +45,29 @@ onBeforeUnmount(() => {
|
||||
clearInterval(intervalId)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.inline-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
.app-title {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.settings-btn {
|
||||
border: 1px solid var(--muted);
|
||||
background: var(--panel-alt, transparent);
|
||||
color: var(--ink);
|
||||
padding: 0.4rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.settings-btn:hover {
|
||||
background: var(--muted);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script setup>
|
||||
import { useCalendarStore } from '@/stores/CalendarStore'
|
||||
import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import BaseDialog from './BaseDialog.vue'
|
||||
import WeekdaySelector from './WeekdaySelector.vue'
|
||||
import Numeric from './Numeric.vue'
|
||||
import { addDaysStr, getMondayOfISOWeek } from '@/utils/date'
|
||||
@ -572,165 +573,105 @@ const recurrenceSummary = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="ec-modal" v-if="showDialog" ref="modalRef" :style="modalStyle">
|
||||
<form class="ec-form" @submit.prevent="saveEvent">
|
||||
<header class="ec-header" @pointerdown="startDrag">
|
||||
<h2 id="ec-modal-title">
|
||||
{{ dialogMode === 'create' ? 'Create Event' : 'Edit Event' }}
|
||||
<template v-if="headerDateShort">· {{ headerDateShort }}</template>
|
||||
</h2>
|
||||
</header>
|
||||
<div class="ec-body">
|
||||
<label class="ec-field">
|
||||
<span>Title</span>
|
||||
<input type="text" v-model="title" autocomplete="off" ref="titleInput" />
|
||||
<BaseDialog v-model="showDialog" @submit="saveEvent">
|
||||
<template #title>
|
||||
{{ dialogMode === 'create' ? 'Create Event' : 'Edit Event'
|
||||
}}<template v-if="headerDateShort"> · {{ headerDateShort }}</template>
|
||||
</template>
|
||||
<label class="ec-field" ref="modalRef">
|
||||
<input type="text" v-model="title" autocomplete="off" ref="titleInput" />
|
||||
</label>
|
||||
<div class="ec-color-swatches">
|
||||
<label v-for="i in 8" :key="i - 1" class="swatch-label">
|
||||
<input
|
||||
class="swatch"
|
||||
:class="'event-color-' + (i - 1)"
|
||||
type="radio"
|
||||
name="colorId"
|
||||
:value="i - 1"
|
||||
v-model="selectedColor"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="recurrence-block">
|
||||
<div class="recurrence-header">
|
||||
<label class="switch">
|
||||
<input type="checkbox" v-model="recurrenceEnabled" />
|
||||
<span>Repeat</span>
|
||||
</label>
|
||||
<div class="ec-color-swatches">
|
||||
<label v-for="i in 8" :key="i - 1" class="swatch-label">
|
||||
<input
|
||||
class="swatch"
|
||||
:class="'event-color-' + (i - 1)"
|
||||
type="radio"
|
||||
name="colorId"
|
||||
:value="i - 1"
|
||||
v-model="selectedColor"
|
||||
/>
|
||||
</label>
|
||||
<span class="recurrence-summary" v-if="recurrenceEnabled">
|
||||
{{ recurrenceSummary }}
|
||||
<template v-if="recurrenceOccurrences > 0">
|
||||
until {{ formattedFinalOccurrence }}</template
|
||||
>
|
||||
</span>
|
||||
<span class="recurrence-summary muted" v-else>Does not recur</span>
|
||||
</div>
|
||||
<div v-if="recurrenceEnabled" class="recurrence-form">
|
||||
<div class="line compact">
|
||||
<Numeric
|
||||
v-model="recurrenceInterval"
|
||||
:prefix-values="[{ value: 1, display: 'Every' }]"
|
||||
:min="2"
|
||||
number-prefix="Every "
|
||||
aria-label="Interval"
|
||||
/>
|
||||
<select v-model="recurrenceFrequency" class="freq-select">
|
||||
<option value="weeks">{{ recurrenceInterval === 1 ? 'week' : 'weeks' }}</option>
|
||||
<option value="months">{{ recurrenceInterval === 1 ? 'month' : 'months' }}</option>
|
||||
</select>
|
||||
<Numeric
|
||||
class="occ-stepper"
|
||||
v-model="recurrenceOccurrences"
|
||||
:min="2"
|
||||
:prefix-values="[{ value: 0, display: '∞' }]"
|
||||
number-postfix=" times"
|
||||
aria-label="Occurrences (0 = no end)"
|
||||
extra-class="occ"
|
||||
/>
|
||||
</div>
|
||||
<div class="recurrence-block">
|
||||
<div class="recurrence-header">
|
||||
<label class="switch">
|
||||
<input type="checkbox" v-model="recurrenceEnabled" />
|
||||
<span>Repeat</span>
|
||||
</label>
|
||||
<span class="recurrence-summary" v-if="recurrenceEnabled">
|
||||
{{ recurrenceSummary }}
|
||||
<template v-if="recurrenceOccurrences > 0">
|
||||
until {{ formattedFinalOccurrence }}</template
|
||||
>
|
||||
</span>
|
||||
<span class="recurrence-summary muted" v-else>Does not recur</span>
|
||||
</div>
|
||||
<div v-if="recurrenceEnabled" class="recurrence-form">
|
||||
<div class="line compact">
|
||||
<Numeric
|
||||
v-model="recurrenceInterval"
|
||||
:prefix-values="[{ value: 1, display: 'Every' }]"
|
||||
:min="2"
|
||||
number-prefix="Every "
|
||||
aria-label="Interval"
|
||||
/>
|
||||
<select v-model="recurrenceFrequency" class="freq-select">
|
||||
<option value="weeks">{{ recurrenceInterval === 1 ? 'week' : 'weeks' }}</option>
|
||||
<option value="months">
|
||||
{{ recurrenceInterval === 1 ? 'month' : 'months' }}
|
||||
</option>
|
||||
</select>
|
||||
<Numeric
|
||||
class="occ-stepper"
|
||||
v-model="recurrenceOccurrences"
|
||||
:min="2"
|
||||
:prefix-values="[{ value: 0, display: '∞' }]"
|
||||
number-postfix=" times"
|
||||
aria-label="Occurrences (0 = no end)"
|
||||
extra-class="occ"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="recurrenceFrequency === 'weeks'" @click.stop>
|
||||
<WeekdaySelector
|
||||
v-model="recurrenceWeekdays"
|
||||
:fallback="fallbackWeekdays"
|
||||
:first-day="calendarStore.config.first_day"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="recurrenceFrequency === 'weeks'" @click.stop>
|
||||
<WeekdaySelector
|
||||
v-model="recurrenceWeekdays"
|
||||
:fallback="fallbackWeekdays"
|
||||
:first-day="calendarStore.config.first_day"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="ec-footer">
|
||||
<template v-if="dialogMode === 'create'">
|
||||
<button type="button" class="ec-btn delete-btn" @click="deleteEventAll">Delete</button>
|
||||
<button type="submit" class="ec-btn save-btn">Save</button>
|
||||
</div>
|
||||
<template #footer>
|
||||
<template v-if="dialogMode === 'create'">
|
||||
<button type="button" class="ec-btn delete-btn" @click="deleteEventAll">Delete</button>
|
||||
<button type="submit" class="ec-btn save-btn">Save</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-if="showDeleteVariants">
|
||||
<div class="ec-delete-group">
|
||||
<button type="button" class="ec-btn delete-btn" @click="deleteEventOne">
|
||||
Delete {{ formattedOccurrenceShort }}
|
||||
</button>
|
||||
<button type="button" class="ec-btn delete-btn" @click="deleteEventFrom">Rest</button>
|
||||
<button type="button" class="ec-btn delete-btn" @click="deleteEventAll">All</button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="isRepeatingBaseEdit">
|
||||
<div class="ec-delete-group">
|
||||
<button type="button" class="ec-btn delete-btn" @click="deleteEventOne">
|
||||
Delete {{ formattedOccurrenceShort }}
|
||||
</button>
|
||||
<button type="button" class="ec-btn delete-btn" @click="deleteEventAll">All</button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-if="showDeleteVariants">
|
||||
<div class="ec-delete-group">
|
||||
<button type="button" class="ec-btn delete-btn" @click="deleteEventOne">
|
||||
Delete {{ formattedOccurrenceShort }}
|
||||
</button>
|
||||
<button type="button" class="ec-btn delete-btn" @click="deleteEventFrom">Rest</button>
|
||||
<button type="button" class="ec-btn delete-btn" @click="deleteEventAll">All</button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="isRepeatingBaseEdit">
|
||||
<div class="ec-delete-group">
|
||||
<button type="button" class="ec-btn delete-btn" @click="deleteEventOne">
|
||||
Delete {{ formattedOccurrenceShort }}
|
||||
</button>
|
||||
<button type="button" class="ec-btn delete-btn" @click="deleteEventAll">All</button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button type="button" class="ec-btn delete-btn" @click="deleteEventAll">Delete</button>
|
||||
</template>
|
||||
<button type="button" class="ec-btn close-btn" @click="closeDialog">Close</button>
|
||||
<button type="button" class="ec-btn delete-btn" @click="deleteEventAll">Delete</button>
|
||||
</template>
|
||||
</footer>
|
||||
</form>
|
||||
</div>
|
||||
<button type="button" class="ec-btn close-btn" @click="closeDialog">Close</button>
|
||||
</template>
|
||||
</template>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Modal dialog */
|
||||
.ec-modal {
|
||||
position: fixed;
|
||||
/* Position near bottom-right by default */
|
||||
top: auto;
|
||||
bottom: 5%;
|
||||
right: 2em;
|
||||
left: auto;
|
||||
transform: none;
|
||||
background: color-mix(in srgb, var(--panel) 85%, transparent);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
color: var(--ink);
|
||||
border-radius: 0.6rem;
|
||||
min-width: 320px;
|
||||
max-width: min(520px, 90vw);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
|
||||
border: 1px solid color-mix(in srgb, var(--muted) 40%, transparent);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.ec-form {
|
||||
padding: 1rem;
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.ec-header {
|
||||
cursor: move;
|
||||
user-select: none;
|
||||
padding: 0.5rem 0;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.ec-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.ec-body {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.ec-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.ec-field {
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
@ -755,18 +696,16 @@ const recurrenceSummary = computed(() => {
|
||||
|
||||
.ec-color-swatches {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 0.3rem;
|
||||
margin-bottom: 1rem;
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
}
|
||||
|
||||
.ec-color-swatches .swatch {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 0.4rem;
|
||||
padding: 0.25rem;
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
border-radius: 0.4em;
|
||||
padding: 0.25em;
|
||||
outline: 0.125em solid transparent;
|
||||
outline-offset: 0.125em;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
width: 3em;
|
||||
@ -780,15 +719,15 @@ const recurrenceSummary = computed(() => {
|
||||
.ec-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
gap: 0.75em;
|
||||
}
|
||||
|
||||
.ec-btn {
|
||||
border: 1px solid var(--muted);
|
||||
border: 0.0625em solid var(--muted);
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
padding: 0.5rem 0.8rem;
|
||||
border-radius: 0.4rem;
|
||||
padding: 0.5em 0.8em;
|
||||
border-radius: 0.4em;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
@ -820,7 +759,7 @@ const recurrenceSummary = computed(() => {
|
||||
|
||||
.ec-btn.delete-btn {
|
||||
background: hsl(0, 70%, 50%);
|
||||
color: white;
|
||||
color: #fff;
|
||||
border-color: transparent;
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -831,7 +770,7 @@ const recurrenceSummary = computed(() => {
|
||||
|
||||
.ec-weekday-selector {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.ec-field-label {
|
||||
@ -842,7 +781,7 @@ const recurrenceSummary = computed(() => {
|
||||
.ec-weekdays {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 0.25rem;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
.ec-weekday-label {
|
||||
@ -873,12 +812,12 @@ const recurrenceSummary = computed(() => {
|
||||
/* New recurrence block */
|
||||
.recurrence-block {
|
||||
display: grid;
|
||||
gap: 0.6rem;
|
||||
gap: 0.6em;
|
||||
}
|
||||
.recurrence-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
gap: 0.75em;
|
||||
}
|
||||
.recurrence-header .recurrence-summary {
|
||||
font-size: 0.75rem;
|
||||
@ -901,18 +840,18 @@ const recurrenceSummary = computed(() => {
|
||||
}
|
||||
.recurrence-form {
|
||||
display: grid;
|
||||
gap: 0.6rem;
|
||||
padding: 0.6rem 0.75rem 0.75rem;
|
||||
border: 1px solid var(--muted);
|
||||
border-radius: 0.5rem;
|
||||
gap: 0.6em;
|
||||
padding: 0.6em 0.75em 0.75em;
|
||||
border: 0.0625em solid var(--muted);
|
||||
border-radius: 0.5em;
|
||||
background: color-mix(in srgb, var(--muted) 15%, transparent);
|
||||
}
|
||||
.line.compact {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
gap: 0.5em;
|
||||
flex-wrap: wrap;
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
.freq-select {
|
||||
padding: 0.4rem 0.55rem;
|
||||
|
||||
133
src/components/SettingsDialog.vue
Normal file
133
src/components/SettingsDialog.vue
Normal file
@ -0,0 +1,133 @@
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
import BaseDialog from './BaseDialog.vue'
|
||||
import { useCalendarStore } from '@/stores/CalendarStore'
|
||||
|
||||
const show = ref(false)
|
||||
const calendarStore = useCalendarStore()
|
||||
|
||||
// Local copies for editing
|
||||
const firstDay = ref(calendarStore.config.first_day)
|
||||
const weekend = ref([...calendarStore.weekend])
|
||||
|
||||
function open() {
|
||||
firstDay.value = calendarStore.config.first_day
|
||||
weekend.value = [...calendarStore.weekend]
|
||||
show.value = true
|
||||
}
|
||||
function close() {
|
||||
show.value = false
|
||||
}
|
||||
function save() {
|
||||
calendarStore.config.first_day = firstDay.value
|
||||
calendarStore.weekend = [...weekend.value]
|
||||
show.value = false
|
||||
}
|
||||
|
||||
function toggleWeekend(idx) {
|
||||
weekend.value[idx] = !weekend.value[idx]
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BaseDialog v-model="show" title="Settings">
|
||||
<div class="setting-group">
|
||||
<label class="ec-field">
|
||||
<span>First day of week</span>
|
||||
<select v-model.number="firstDay">
|
||||
<option :value="0">Sunday</option>
|
||||
<option :value="1">Monday</option>
|
||||
<option :value="2">Tuesday</option>
|
||||
<option :value="3">Wednesday</option>
|
||||
<option :value="4">Thursday</option>
|
||||
<option :value="5">Friday</option>
|
||||
<option :value="6">Saturday</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="weekend-select ec-field">
|
||||
<span>Weekend days</span>
|
||||
<div class="weekday-pills">
|
||||
<button
|
||||
v-for="(isW, i) in weekend"
|
||||
:key="i"
|
||||
type="button"
|
||||
@click="toggleWeekend(i)"
|
||||
:class="['pill', { active: isW }]"
|
||||
>
|
||||
{{ ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'][i] }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="footer-row">
|
||||
<button type="button" class="ec-btn" @click="close">Cancel</button>
|
||||
<button type="button" class="ec-btn save-btn" @click="save">Save</button>
|
||||
</div>
|
||||
</template>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.setting-group {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
.ec-field {
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.ec-field > span {
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
select {
|
||||
border: 1px solid var(--muted);
|
||||
background: var(--panel-alt, transparent);
|
||||
color: var(--ink);
|
||||
padding: 0.4rem 0.5rem;
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
.weekday-pills {
|
||||
display: flex;
|
||||
gap: 0.35rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.pill {
|
||||
border: 1px solid var(--muted);
|
||||
background: var(--panel-alt, transparent);
|
||||
color: var(--ink);
|
||||
padding: 0.35rem 0.6rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.7rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pill.active {
|
||||
background: var(--today);
|
||||
color: #000;
|
||||
border-color: var(--today);
|
||||
font-weight: 600;
|
||||
}
|
||||
.footer-row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
.ec-btn {
|
||||
border: 1px solid var(--muted);
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
padding: 0.5rem 0.8rem;
|
||||
border-radius: 0.4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ec-btn.save-btn {
|
||||
background: var(--today);
|
||||
color: #000;
|
||||
border-color: transparent;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user