383 lines
9.1 KiB
Vue
383 lines
9.1 KiB
Vue
<template>
|
|
<div class="header-controls-wrapper">
|
|
<Transition name="header-controls" appear>
|
|
<div
|
|
v-if="isVisible"
|
|
ref="headerControlsRef"
|
|
class="header-controls"
|
|
@focusin="handleFocusIn"
|
|
@focusout="handleFocusOut"
|
|
>
|
|
<div class="search-with-spacer">
|
|
<!-- Shrinkable spacer to align search with week label column; smoothly shrinks as needed -->
|
|
<div class="pre-search-spacer" aria-hidden="true"></div>
|
|
<EventSearch
|
|
ref="eventSearchRef"
|
|
:reference-date="referenceDate"
|
|
@activate="handleSearchActivate"
|
|
@preview="(r) => emit('search-preview', r)"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="current-time"
|
|
aria-label="Current time (click to go to today)"
|
|
role="button"
|
|
tabindex="-1"
|
|
@click="goToToday"
|
|
@keydown.enter="goToToday"
|
|
@keydown.space.prevent="goToToday"
|
|
>
|
|
{{ timeString }}
|
|
</div>
|
|
<div class="today-date" @click="goToToday">{{ todayString }}</div>
|
|
<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="openSettings"
|
|
aria-label="Open settings"
|
|
title="Settings"
|
|
>
|
|
⚙
|
|
</button>
|
|
<SettingsDialog ref="settingsDialog" />
|
|
</div>
|
|
</Transition>
|
|
<button
|
|
type="button"
|
|
class="toggle-btn"
|
|
@click="toggleVisibility"
|
|
:aria-label="isVisible ? 'Hide controls' : 'Show controls'"
|
|
:title="isVisible ? 'Hide controls' : 'Show controls'"
|
|
>
|
|
⋯
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref, onMounted, onBeforeUnmount, defineExpose, nextTick, watch } from 'vue'
|
|
import { useCalendarStore } from '@/stores/CalendarStore'
|
|
import { formatTodayString } from '@/utils/date'
|
|
import EventSearch from '@/components/Search.vue'
|
|
import SettingsDialog from '@/components/SettingsDialog.vue'
|
|
|
|
const calendarStore = useCalendarStore()
|
|
|
|
// Today label: derive from local ticking clock so it flips right at midnight
|
|
const todayString = computed(() => {
|
|
const d = new Date(localNowMs?.value ?? Date.now())
|
|
return formatTodayString(d)
|
|
})
|
|
|
|
// Local ticking clock: update every second without thrashing global store
|
|
const localNowMs = ref(Date.now())
|
|
let clockTimer = null
|
|
|
|
onMounted(() => {
|
|
// Start a 1s ticker for the header clock (independent from store's minute tick)
|
|
clockTimer = setInterval(() => {
|
|
localNowMs.value = Date.now()
|
|
}, 1000)
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
if (clockTimer) clearInterval(clockTimer)
|
|
})
|
|
|
|
// Current time (24h, NBSP padding for single-digit hours, with day/night emoji)
|
|
const timeString = computed(() => {
|
|
const d = new Date(localNowMs.value)
|
|
const h = d.getHours()
|
|
const m = d.getMinutes()
|
|
const hh = h < 10 ? '\u00A0' + h : String(h)
|
|
const mm = m < 10 ? '0' + m : String(m)
|
|
// Day at 6-18, otherwise night (TODO: sunrise/sunset)
|
|
const isDay = h >= 6 && h < 18
|
|
const emoji = isDay ? '🌞' : '🌙'
|
|
return `${hh}:${mm}${emoji}`
|
|
})
|
|
|
|
const emit = defineEmits(['go-to-today', 'search-activate', 'search-preview'])
|
|
const { referenceDate = null } = defineProps({ referenceDate: { type: String, default: null } })
|
|
|
|
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)
|
|
const headerControlsRef = ref(null)
|
|
const hasFocusWithin = ref(false)
|
|
|
|
function checkScreenSize() {
|
|
const isSmallScreen = window.innerHeight < 600
|
|
isVisible.value = !isSmallScreen || hasFocusWithin.value
|
|
}
|
|
|
|
function toggleVisibility() {
|
|
isVisible.value = !isVisible.value
|
|
if (!isVisible.value) {
|
|
hasFocusWithin.value = false
|
|
}
|
|
}
|
|
|
|
// Settings dialog integration
|
|
const settingsDialog = ref(null)
|
|
function openSettings() {
|
|
// Capture baseline before opening settings
|
|
try {
|
|
calendarStore.$history?._baselineIfNeeded?.(true)
|
|
} catch {
|
|
/* no-op */
|
|
}
|
|
settingsDialog.value?.open()
|
|
}
|
|
|
|
// Search component ref exposure
|
|
const eventSearchRef = ref(null)
|
|
|
|
function handleFocusIn() {
|
|
hasFocusWithin.value = true
|
|
if (!isVisible.value) isVisible.value = true
|
|
}
|
|
|
|
function handleFocusOut(event) {
|
|
const container = headerControlsRef.value
|
|
if (!container) {
|
|
hasFocusWithin.value = false
|
|
return
|
|
}
|
|
const nextTarget = event.relatedTarget ?? document.activeElement
|
|
if (nextTarget && container.contains(nextTarget)) return
|
|
hasFocusWithin.value = false
|
|
if (window.innerHeight < 600) {
|
|
checkScreenSize()
|
|
}
|
|
}
|
|
function focusSearch(selectAll = true) {
|
|
eventSearchRef.value?.focusSearch(selectAll)
|
|
}
|
|
function isEditableElement(el) {
|
|
if (!el) return false
|
|
const tag = el.tagName
|
|
return tag === 'INPUT' || tag === 'TEXTAREA' || el.isContentEditable
|
|
}
|
|
defineExpose({ focusSearch })
|
|
|
|
function handleGlobalFind(e) {
|
|
if (!(e.ctrlKey || e.metaKey)) return
|
|
if (e.key === 'f' || e.key === 'F') {
|
|
if (isEditableElement(e.target)) return
|
|
e.preventDefault()
|
|
if (!isVisible.value) {
|
|
isVisible.value = true
|
|
}
|
|
// Defer focus until after transition renders input
|
|
nextTick(() => focusSearch(true))
|
|
}
|
|
}
|
|
|
|
function handleSearchActivate(r) {
|
|
emit('search-activate', r)
|
|
}
|
|
|
|
watch(isVisible, (visible) => {
|
|
if (visible) nextTick(() => focusSearch(true))
|
|
else hasFocusWithin.value = false
|
|
})
|
|
|
|
onMounted(() => {
|
|
checkScreenSize()
|
|
window.addEventListener('resize', checkScreenSize)
|
|
document.addEventListener('keydown', handleGlobalFind, { passive: false })
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('resize', checkScreenSize)
|
|
document.removeEventListener('keydown', handleGlobalFind)
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.header-controls-wrapper {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
.header-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding-inline-end: 2rem;
|
|
gap: 1rem;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.header-controls { gap: 0.1rem; }
|
|
}
|
|
/* Group search + spacer so outer gap doesn't create unwanted space */
|
|
.search-with-spacer {
|
|
display: flex;
|
|
flex: 1;
|
|
min-width: 0;
|
|
align-items: stretch;
|
|
}
|
|
.search-with-spacer > .search-bar {
|
|
flex: 1 1 auto;
|
|
min-width: 6rem; /* allow spacer to give up space first */
|
|
}
|
|
|
|
.pre-search-spacer {
|
|
flex: 0 1000 var(--week-w);
|
|
width: var(--week-w);
|
|
min-width: .5rem;
|
|
pointer-events: none;
|
|
transition: flex-basis 0.35s ease, width 0.35s ease;
|
|
}
|
|
|
|
.toggle-btn {
|
|
position: fixed;
|
|
top: 0;
|
|
inset-inline-end: 0;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--muted);
|
|
padding: 0;
|
|
margin: 0.5em;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
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);
|
|
}
|
|
|
|
.toggle-btn:active {
|
|
transform: scale(0.9);
|
|
}
|
|
.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(-1rem);
|
|
}
|
|
|
|
.header-controls-enter-to,
|
|
.header-controls-leave-from {
|
|
opacity: 1;
|
|
max-height: 4rem;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.settings-btn {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--muted);
|
|
padding: 0;
|
|
margin: 0;
|
|
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 {
|
|
font-size: 1.5rem;
|
|
white-space: pre-line;
|
|
text-align: center;
|
|
}
|
|
|
|
.current-time {
|
|
font-family: ui-monospace, SF Mono, Consolas, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
|
|
font-size: 3.6rem;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.current-time:hover,
|
|
.current-time:focus-visible {
|
|
color: var(--strong);
|
|
}
|
|
|
|
@media (max-width: 770px) {
|
|
.current-time {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|