Header refactor, styling, collapsible header controls.
This commit is contained in:
Leo Vasanko committed
1 parent
8e91d360be
commit
100b420003
7 files changed
+298
-408
No files matched your search
@@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<!-- Header controls with transition -->
|
||||
<Transition name="header-controls" appear>
|
||||
<div v-if="isVisible" class="header-controls">
|
||||
<div class="today-date" @click="goToToday">{{ todayString }}</div>
|
||||
<!-- Reference historyTick to ensure reactivity of canUndo/canRedo -->
|
||||
<button
|
||||
type="button"
|
||||
class="hist-btn"
|
||||
:disabled="!calendarStore.historyCanUndo"
|
||||
@click="calendarStore.$history?.undo()"
|
||||
title="Undo (Ctrl+Z)"
|
||||
aria-label="Undo"
|
||||
>
|
||||
↶
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="hist-btn"
|
||||
:disabled="!calendarStore.historyCanRedo"
|
||||
@click="calendarStore.$history?.redo()"
|
||||
title="Redo (Ctrl+Shift+Z)"
|
||||
aria-label="Redo"
|
||||
>
|
||||
↷
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="settings-btn"
|
||||
@click="$emit('open-settings')"
|
||||
aria-label="Open settings"
|
||||
title="Settings"
|
||||
>
|
||||
⚙
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
<button
|
||||
type="button"
|
||||
class="toggle-btn"
|
||||
@click="toggleVisibility"
|
||||
:aria-label="isVisible ? 'Hide controls' : 'Show controls'"
|
||||
:title="isVisible ? 'Hide controls' : 'Show controls'"
|
||||
>
|
||||
⋮
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { useCalendarStore } from '@/stores/CalendarStore'
|
||||
import { formatTodayString } from '@/utils/date'
|
||||
import { addDays } from 'date-fns'
|
||||
|
||||
const calendarStore = useCalendarStore()
|
||||
|
||||
const todayString = computed(() => {
|
||||
const d = new Date(calendarStore.now)
|
||||
return formatTodayString(d)
|
||||
})
|
||||
|
||||
const emit = defineEmits(['open-settings', 'go-to-today'])
|
||||
|
||||
function goToToday() {
|
||||
// Emit the event so the parent can handle the viewport scrolling logic
|
||||
// since this component doesn't have access to viewport refs
|
||||
emit('go-to-today')
|
||||
}
|
||||
|
||||
// Screen size detection and visibility toggle
|
||||
const isVisible = ref(false)
|
||||
|
||||
function checkScreenSize() {
|
||||
const isSmallScreen = window.innerHeight < 600
|
||||
// Default to open on large screens, closed on small screens
|
||||
isVisible.value = !isSmallScreen
|
||||
}
|
||||
|
||||
function toggleVisibility() {
|
||||
isVisible.value = !isVisible.value
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
checkScreenSize()
|
||||
window.addEventListener('resize', checkScreenSize)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', checkScreenSize)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
margin-right: 2.5em;
|
||||
gap: 0.6rem;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.header-controls {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--muted);
|
||||
padding: 0;
|
||||
margin: 0.5em;
|
||||
cursor: pointer;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
outline: none;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.toggle-btn:hover {
|
||||
color: var(--strong);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.toggle-btn:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
/* Transition animations */
|
||||
.header-controls-enter-active,
|
||||
.header-controls-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header-controls-enter-from,
|
||||
.header-controls-leave-to {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
.header-controls-enter-to,
|
||||
.header-controls-leave-from {
|
||||
opacity: 1;
|
||||
max-height: 100px;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.settings-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--muted);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-right: 0.6rem;
|
||||
cursor: pointer;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.hist-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--muted);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
outline: none;
|
||||
width: 1.9rem;
|
||||
height: 1.9rem;
|
||||
}
|
||||
|
||||
.hist-btn:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.hist-btn:not(:disabled):hover,
|
||||
.hist-btn:not(:disabled):focus-visible {
|
||||
color: var(--strong);
|
||||
}
|
||||
|
||||
.hist-btn:active:not(:disabled) {
|
||||
transform: scale(0.88);
|
||||
}
|
||||
|
||||
.settings-btn:hover {
|
||||
color: var(--strong);
|
||||
}
|
||||
|
||||
.today-date {
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
background: var(--today-btn-bg);
|
||||
color: var(--today-btn-text);
|
||||
border-radius: 4px;
|
||||
white-space: pre-line;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.today-date:hover {
|
||||
background: var(--today-btn-hover-bg);
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user