10-04-2026
This commit is contained in:
parent
70a7776da5
commit
761b1156c1
50 changed files with 11997 additions and 150 deletions
33
frontend/_src/components/AddEventButton.vue
Normal file
33
frontend/_src/components/AddEventButton.vue
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<button class="add-event-btn glass--button" @click="$emit('click')">
|
||||
<q-icon name="add" size="22px" :color="isDark ? 'white' : 'grey-8'" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useQuasar } from 'quasar'
|
||||
|
||||
defineEmits(['click'])
|
||||
|
||||
const $q = useQuasar()
|
||||
const isDark = computed(() => $q.dark.isActive)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.add-event-btn {
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 10;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
322
frontend/_src/components/AppSettingsModal.vue
Normal file
322
frontend/_src/components/AppSettingsModal.vue
Normal file
|
|
@ -0,0 +1,322 @@
|
|||
<template>
|
||||
<ModalCard
|
||||
:open="open"
|
||||
title="Allgemein"
|
||||
:tabs="tabs"
|
||||
v-model="activeTab"
|
||||
@close="$emit('close')"
|
||||
>
|
||||
<!-- Allgemein -->
|
||||
<div v-if="activeTab === 'general'">
|
||||
<div class="settings-section__title">Allgemein</div>
|
||||
<div class="settings-section__divider" />
|
||||
|
||||
<!-- Aussehen -->
|
||||
<div class="settings-row">
|
||||
<span class="settings-row__label">Aussehen</span>
|
||||
<div class="settings-row__control">
|
||||
<select
|
||||
:value="settingsStore.appearance"
|
||||
@change="onAppearanceChange"
|
||||
class="settings-select"
|
||||
:class="{ 'settings-select--dark': isDark }"
|
||||
>
|
||||
<option value="system">System</option>
|
||||
<option value="light">Hell</option>
|
||||
<option value="dark">Dunkel</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-section__divider" />
|
||||
|
||||
<!-- Akzentfarbe -->
|
||||
<div class="settings-row">
|
||||
<span class="settings-row__label">Akzentfarbe</span>
|
||||
<div class="settings-row__control">
|
||||
<button
|
||||
class="settings-accent-btn"
|
||||
:class="{ 'settings-accent-btn--dark': isDark }"
|
||||
@click="accentDropdownOpen = !accentDropdownOpen"
|
||||
>
|
||||
<span
|
||||
class="settings-accent-dot"
|
||||
:style="{ background: currentAccentHex }"
|
||||
/>
|
||||
<span>{{ currentAccentLabel }}</span>
|
||||
<q-icon name="expand_more" size="16px" />
|
||||
</button>
|
||||
|
||||
<!-- Accent dropdown -->
|
||||
<Transition name="dropdown">
|
||||
<div
|
||||
v-if="accentDropdownOpen"
|
||||
class="settings-dropdown"
|
||||
:class="{ 'settings-dropdown--dark': isDark }"
|
||||
>
|
||||
<button
|
||||
v-for="color in ACCENT_COLORS"
|
||||
:key="color.value"
|
||||
class="settings-dropdown__item"
|
||||
@click="selectAccent(color.value)"
|
||||
>
|
||||
<span class="settings-accent-dot" :style="{ background: color.hex }" />
|
||||
<span>{{ color.label }}</span>
|
||||
<q-icon
|
||||
v-if="settingsStore.accentColor === color.value"
|
||||
name="check"
|
||||
size="18px"
|
||||
class="settings-dropdown__check"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-section__divider" />
|
||||
|
||||
<!-- Sprache -->
|
||||
<div class="settings-row">
|
||||
<span class="settings-row__label">Sprache</span>
|
||||
<div class="settings-row__control">
|
||||
<select
|
||||
:value="settingsStore.language"
|
||||
@change="e => { settingsStore.language = e.target.value }"
|
||||
class="settings-select"
|
||||
:class="{ 'settings-select--dark': isDark }"
|
||||
>
|
||||
<option v-for="lang in LANGUAGES" :key="lang.value" :value="lang.value">
|
||||
{{ lang.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-section__divider" />
|
||||
|
||||
<!-- FPS-Anzeige -->
|
||||
<div class="settings-row">
|
||||
<span class="settings-row__label">FPS-Anzeige</span>
|
||||
<div class="settings-row__control">
|
||||
<q-toggle
|
||||
:model-value="settingsStore.showFps"
|
||||
@update:model-value="v => { settingsStore.showFps = v }"
|
||||
dense
|
||||
color="green"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Benachrichtigungen (placeholder) -->
|
||||
<div v-else-if="activeTab === 'notifications'">
|
||||
<div class="settings-section__title">Benachrichtigungen</div>
|
||||
<div class="settings-section__divider" />
|
||||
<p class="settings-placeholder">Kommt bald.</p>
|
||||
</div>
|
||||
|
||||
<!-- Personalisierung (placeholder) -->
|
||||
<div v-else-if="activeTab === 'personalize'">
|
||||
<div class="settings-section__title">Personalisierung</div>
|
||||
<div class="settings-section__divider" />
|
||||
<p class="settings-placeholder">Kommt bald.</p>
|
||||
</div>
|
||||
</ModalCard>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { useQuasar } from 'quasar'
|
||||
import ModalCard from 'components/ModalCard.vue'
|
||||
import { useSettingsStore, ACCENT_COLORS, LANGUAGES } from 'stores/settings'
|
||||
|
||||
defineProps({ open: { type: Boolean, default: false } })
|
||||
defineEmits(['close'])
|
||||
|
||||
const $q = useQuasar()
|
||||
const settingsStore = useSettingsStore()
|
||||
const isDark = computed(() => $q.dark.isActive)
|
||||
|
||||
const activeTab = ref('general')
|
||||
const accentDropdownOpen = ref(false)
|
||||
|
||||
const tabs = [
|
||||
{ value: 'general', label: 'Allgemein', icon: 'settings' },
|
||||
{ value: 'notifications', label: 'Benachrichtigungen', icon: 'notifications' },
|
||||
{ value: 'personalize', label: 'Personalisierung', icon: 'history' }
|
||||
]
|
||||
|
||||
const currentAccentHex = computed(() => {
|
||||
const found = ACCENT_COLORS.find(c => c.value === settingsStore.accentColor)
|
||||
return found?.hex ?? '#9e9e9e'
|
||||
})
|
||||
|
||||
const currentAccentLabel = computed(() => {
|
||||
const found = ACCENT_COLORS.find(c => c.value === settingsStore.accentColor)
|
||||
return found?.label ?? 'Standard'
|
||||
})
|
||||
|
||||
function selectAccent(value) {
|
||||
settingsStore.accentColor = value
|
||||
accentDropdownOpen.value = false
|
||||
}
|
||||
|
||||
function onAppearanceChange(e) {
|
||||
const value = e.target.value
|
||||
settingsStore.appearance = value
|
||||
applyAppearance(value)
|
||||
}
|
||||
|
||||
function applyAppearance(mode) {
|
||||
if (mode === 'system') {
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
$q.dark.set(prefersDark)
|
||||
} else {
|
||||
$q.dark.set(mode === 'dark')
|
||||
}
|
||||
}
|
||||
|
||||
// Apply appearance on mount and when it changes externally
|
||||
watch(() => settingsStore.appearance, applyAppearance, { immediate: true })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.settings-section__title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.settings-section__divider {
|
||||
height: 1px;
|
||||
background: rgba(128, 128, 128, 0.12);
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.settings-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.settings-row__label {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.settings-row__control {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Native select styled */
|
||||
.settings-select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background: rgba(128, 128, 128, 0.08);
|
||||
border: 1px solid rgba(128, 128, 128, 0.15);
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
padding: 6px 28px 6px 12px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23999' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 8px center;
|
||||
}
|
||||
|
||||
.settings-select--dark {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Accent button */
|
||||
.settings-accent-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: rgba(128, 128, 128, 0.08);
|
||||
border: 1px solid rgba(128, 128, 128, 0.15);
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
padding: 6px 10px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.settings-accent-btn--dark {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.settings-accent-dot {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Accent Dropdown */
|
||||
.settings-dropdown {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: calc(100% + 6px);
|
||||
min-width: 180px;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border: 1px solid rgba(128, 128, 128, 0.15);
|
||||
border-radius: 12px;
|
||||
padding: 6px;
|
||||
z-index: 10;
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.settings-dropdown--dark {
|
||||
background: rgba(40, 40, 40, 0.92);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.settings-dropdown__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: none;
|
||||
background: none;
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
|
||||
.settings-dropdown__item:hover {
|
||||
background: rgba(128, 128, 128, 0.1);
|
||||
}
|
||||
|
||||
.settings-dropdown__check {
|
||||
margin-left: auto;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Placeholder text */
|
||||
.settings-placeholder {
|
||||
font-size: 14px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Dropdown transition */
|
||||
.dropdown-enter-active,
|
||||
.dropdown-leave-active {
|
||||
transition: opacity 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
.dropdown-enter-from,
|
||||
.dropdown-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
</style>
|
||||
44
frontend/_src/components/EssentialLink.vue
Normal file
44
frontend/_src/components/EssentialLink.vue
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
<q-item
|
||||
clickable
|
||||
tag="a"
|
||||
target="_blank"
|
||||
:href="props.link"
|
||||
>
|
||||
<q-item-section
|
||||
v-if="props.icon"
|
||||
avatar
|
||||
>
|
||||
<q-icon :name="props.icon" />
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
<q-item-label>{{ props.title }}</q-item-label>
|
||||
<q-item-label caption>{{ props.caption }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
|
||||
caption: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
|
||||
link: {
|
||||
type: String,
|
||||
default: '#'
|
||||
},
|
||||
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
</script>
|
||||
546
frontend/_src/components/EventPanel.vue
Normal file
546
frontend/_src/components/EventPanel.vue
Normal file
|
|
@ -0,0 +1,546 @@
|
|||
<template>
|
||||
<Transition name="slide-up">
|
||||
<div
|
||||
v-if="eventsStore.panelOpen"
|
||||
class="event-panel glass--panel"
|
||||
:style="panelHeight != null ? { height: panelHeight + 'dvh' } : {}"
|
||||
:class="{ 'event-panel--dragging': isDragging }"
|
||||
>
|
||||
<!-- Drag Handle — drag to resize, tap to close -->
|
||||
<div
|
||||
class="event-panel__handle"
|
||||
v-on="handleListeners"
|
||||
>
|
||||
<div class="event-panel__handle-bar"></div>
|
||||
</div>
|
||||
|
||||
<!-- Scrollable content -->
|
||||
<div class="event-panel__scroll">
|
||||
<!-- Key Image -->
|
||||
<div class="event-panel__image-section">
|
||||
<div v-if="eventsStore.ghostImage" class="event-panel__image-wrap">
|
||||
<img :src="keyImageSrc || eventsStore.ghostImage" class="event-panel__image" alt="" />
|
||||
<span class="event-panel__image-badge">Key Image</span>
|
||||
</div>
|
||||
<div v-else class="event-panel__image-placeholder" @click="onAddImage">
|
||||
<q-icon name="add_photo_alternate" size="32px" color="grey-5" />
|
||||
<span>Key Image hinzufügen</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Title — large, editable inline -->
|
||||
<q-input
|
||||
v-model="eventsStore.ghostTitle"
|
||||
placeholder="Was ist passiert?"
|
||||
borderless
|
||||
class="event-panel__title"
|
||||
input-class="event-panel__title-input"
|
||||
:dark="isDark"
|
||||
/>
|
||||
|
||||
<!-- Date row — tap to open QDate picker -->
|
||||
<div class="event-panel__date-row">
|
||||
<q-icon name="event" size="18px" class="event-panel__date-icon" />
|
||||
<span class="event-panel__date-label">{{ formattedDate }}</span>
|
||||
<q-popup-proxy transition-show="scale" transition-hide="scale">
|
||||
<q-date
|
||||
v-model="ghostDateSlash"
|
||||
mask="YYYY/MM/DD"
|
||||
:dark="isDark"
|
||||
:locale="dateLocale"
|
||||
minimal
|
||||
/>
|
||||
</q-popup-proxy>
|
||||
</div>
|
||||
|
||||
<!-- Emotional Level — card style with gradient track -->
|
||||
<div class="event-panel__card" :class="{ 'event-panel__card--dark': isDark }">
|
||||
<div class="event-panel__card-header">
|
||||
<span class="event-panel__card-label">Emotional Level</span>
|
||||
<span class="event-panel__emotion-value" :style="{ color: emotionColor }">
|
||||
{{ emotionLabel }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Gradient slider -->
|
||||
<div class="event-panel__slider-wrap">
|
||||
<q-slider
|
||||
v-model="eventsStore.ghostEmotion"
|
||||
:min="-1"
|
||||
:max="1"
|
||||
:step="0.05"
|
||||
track-size="8px"
|
||||
thumb-size="22px"
|
||||
class="event-panel__slider"
|
||||
:style="{
|
||||
'--gradient-bg': sliderGradientCSS,
|
||||
'--thumb-color': emotionColor
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="event-panel__slider-hints">
|
||||
<span>Sehr negativ</span>
|
||||
<span>Neutral</span>
|
||||
<span>Sehr positiv</span>
|
||||
</div>
|
||||
|
||||
<!-- Gradient Preset Selector -->
|
||||
<div class="event-panel__presets">
|
||||
<span class="event-panel__presets-label">Farbverlauf</span>
|
||||
<div class="event-panel__presets-grid">
|
||||
<div
|
||||
v-for="(preset, index) in gradientPresets"
|
||||
:key="index"
|
||||
class="event-panel__preset"
|
||||
:class="{ 'event-panel__preset--active': eventsStore.ghostGradientPreset === index }"
|
||||
:style="{ background: presetGradientCSS(preset.colors) }"
|
||||
:title="preset.name"
|
||||
@click="selectPreset(index)"
|
||||
></div>
|
||||
<!-- "None" option to clear preset -->
|
||||
<div
|
||||
class="event-panel__preset event-panel__preset--none"
|
||||
:class="{ 'event-panel__preset--active': eventsStore.ghostGradientPreset === null }"
|
||||
title="Standard"
|
||||
@click="selectPreset(null)"
|
||||
>
|
||||
<q-icon name="auto_awesome" size="12px" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Beschreibung — card style -->
|
||||
<div class="event-panel__card" :class="{ 'event-panel__card--dark': isDark }">
|
||||
<span class="event-panel__card-label">Beschreibung</span>
|
||||
<q-input
|
||||
v-model="eventsStore.ghostNote"
|
||||
type="textarea"
|
||||
placeholder="Ein neutraler, aber wichtiger Tag"
|
||||
borderless
|
||||
autogrow
|
||||
class="event-panel__note"
|
||||
:dark="isDark"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Weitere Medien -->
|
||||
<div class="event-panel__card" :class="{ 'event-panel__card--dark': isDark }">
|
||||
<span class="event-panel__card-label">Weitere Medien</span>
|
||||
<div class="event-panel__media-grid">
|
||||
<div class="event-panel__media-add" @click="onAddMedia">
|
||||
<q-icon name="add_photo_alternate" size="24px" color="grey-5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete (edit mode only) -->
|
||||
<div v-if="eventsStore.editingEventId" class="event-panel__delete">
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
no-caps
|
||||
label="Event löschen"
|
||||
icon="delete_outline"
|
||||
color="negative"
|
||||
size="sm"
|
||||
@click="eventsStore.deleteEvent(eventsStore.editingEventId)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, watch, ref } from 'vue'
|
||||
import { useQuasar } from 'quasar'
|
||||
import { useEventsStore, emotionToColor, GRADIENT_PRESETS } from 'stores/events'
|
||||
import { usePanelDrag } from 'composables/usePanelDrag'
|
||||
import { resolveFullRes } from 'composables/useImageCache'
|
||||
|
||||
const $q = useQuasar()
|
||||
const eventsStore = useEventsStore()
|
||||
const { panelHeight, isDragging, handleListeners, resetHeight } = usePanelDrag(() => eventsStore.closePanel())
|
||||
|
||||
// Resolve key image: full-res when online, cached thumbnail when offline
|
||||
const keyImageSrc = ref(null)
|
||||
watch(
|
||||
() => eventsStore.ghostImage,
|
||||
async (img) => {
|
||||
keyImageSrc.value = await resolveFullRes(img)
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
// Reset height when panel opens
|
||||
watch(() => eventsStore.panelOpen, (open) => { if (open) resetHeight() })
|
||||
const isDark = computed(() => $q.dark.isActive)
|
||||
const gradientPresets = GRADIENT_PRESETS
|
||||
|
||||
// Current glow color based on emotion + gradient
|
||||
const emotionColor = computed(() => {
|
||||
if (eventsStore.ghostCustomColor) return eventsStore.ghostCustomColor
|
||||
return emotionToColor(eventsStore.ghostEmotion, eventsStore.ghostGradientPreset)
|
||||
})
|
||||
|
||||
// Date: store uses YYYY-MM-DD, QDate uses YYYY/MM/DD
|
||||
const ghostDateSlash = computed({
|
||||
get: () => eventsStore.ghostDate.replace(/-/g, '/'),
|
||||
set: (val) => { eventsStore.ghostDate = val.replace(/\//g, '-') }
|
||||
})
|
||||
|
||||
const formattedDate = computed(() => {
|
||||
const d = new Date(eventsStore.ghostDate)
|
||||
if (isNaN(d.getTime())) return eventsStore.ghostDate
|
||||
return d.toLocaleDateString('de-DE', { day: '2-digit', month: 'long', year: 'numeric' })
|
||||
})
|
||||
|
||||
const dateLocale = {
|
||||
days: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
|
||||
daysShort: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
|
||||
months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
|
||||
monthsShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
|
||||
}
|
||||
|
||||
const emotionLabel = computed(() => {
|
||||
const e = eventsStore.ghostEmotion
|
||||
if (e > 0.5) return 'Sehr positiv'
|
||||
if (e > 0.15) return 'Positiv'
|
||||
if (e > -0.15) return 'Neutral'
|
||||
if (e > -0.5) return 'Negativ'
|
||||
return 'Sehr negativ'
|
||||
})
|
||||
|
||||
// CSS gradient for the slider track
|
||||
const sliderGradientCSS = computed(() => {
|
||||
const idx = eventsStore.ghostGradientPreset
|
||||
if (idx !== null && GRADIENT_PRESETS[idx]) {
|
||||
const [neg, mid, pos] = GRADIENT_PRESETS[idx].colors
|
||||
return `linear-gradient(90deg, ${neg} 0%, ${mid} 50%, ${pos} 100%)`
|
||||
}
|
||||
// Default gradient matching the default emotionToColor
|
||||
return 'linear-gradient(90deg, #E91E63 0%, #9C27B0 20%, #2196F3 35%, #FFD700 50%, #FF6B35 65%, #FFD700 80%, #4CAF50 100%)'
|
||||
})
|
||||
|
||||
// CSS gradient for a preset swatch
|
||||
function presetGradientCSS(colors) {
|
||||
return `linear-gradient(90deg, ${colors[0]}, ${colors[1]}, ${colors[2]})`
|
||||
}
|
||||
|
||||
function selectPreset(index) {
|
||||
eventsStore.ghostGradientPreset = index
|
||||
// Clear custom color when selecting a gradient
|
||||
eventsStore.ghostCustomColor = null
|
||||
}
|
||||
|
||||
function onAddImage() {
|
||||
// TODO: File picker for key image
|
||||
}
|
||||
|
||||
function onAddMedia() {
|
||||
// TODO: File picker for additional media
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.event-panel {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 20;
|
||||
height: 75dvh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 20px 20px 0 0;
|
||||
transition: height 0.25s ease;
|
||||
}
|
||||
|
||||
.event-panel--dragging {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.event-panel__handle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 10px 0 4px;
|
||||
flex-shrink: 0;
|
||||
cursor: grab;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.event-panel__handle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.event-panel__handle-bar {
|
||||
width: 36px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: rgba(128, 128, 128, 0.3);
|
||||
}
|
||||
|
||||
.event-panel__scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0 20px 32px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Key Image */
|
||||
.event-panel__image-section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.event-panel__image-wrap {
|
||||
position: relative;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.event-panel__image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.event-panel__image-badge {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.event-panel__image-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
height: 120px;
|
||||
border-radius: 16px;
|
||||
border: 2px dashed rgba(128, 128, 128, 0.2);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.event-panel__image-placeholder:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Title */
|
||||
.event-panel__title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.event-panel__title :deep(.event-panel__title-input) {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* Date row */
|
||||
.event-panel__date-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 20px;
|
||||
opacity: 0.6;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.event-panel__date-row:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.event-panel__date-icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.event-panel__date-label {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Card sections */
|
||||
.event-panel__card {
|
||||
background: rgba(128, 128, 128, 0.06);
|
||||
border: 1px solid rgba(128, 128, 128, 0.1);
|
||||
border-radius: 14px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.event-panel__card--dark {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border-color: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.event-panel__card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.event-panel__card-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.event-panel__emotion-value {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Slider with gradient track via Quasar deep styling */
|
||||
.event-panel__slider-wrap {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
/* The actual visible track bar — apply gradient here */
|
||||
.event-panel__slider :deep(.q-slider__track) {
|
||||
background: var(--gradient-bg) !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Hide the default grey inner bar */
|
||||
.event-panel__slider :deep(.q-slider__inner) {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* Hide the blue selection bar */
|
||||
.event-panel__slider :deep(.q-slider__selection) {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* Thumb — SVG-based, use color for fill/stroke */
|
||||
.event-panel__slider :deep(.q-slider__thumb) {
|
||||
color: var(--thumb-color, #fff);
|
||||
}
|
||||
|
||||
.event-panel__slider :deep(.q-slider__thumb-shape) {
|
||||
filter: drop-shadow(0 0 6px var(--thumb-color, #fff));
|
||||
}
|
||||
|
||||
.event-panel__slider :deep(.q-slider__focus-ring) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.event-panel__slider-hints {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 10px;
|
||||
opacity: 0.4;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Gradient Preset Selector */
|
||||
.event-panel__presets {
|
||||
margin-top: 16px;
|
||||
border-top: 1px solid rgba(128, 128, 128, 0.1);
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.event-panel__presets-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
opacity: 0.5;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.event-panel__presets-grid {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.event-panel__preset {
|
||||
width: 45px;
|
||||
height: 25px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
border: 2px solid #eee;
|
||||
transition: border-color 0.2s, transform 0.15s;
|
||||
}
|
||||
|
||||
.event-panel__preset:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.event-panel__preset--active {
|
||||
border-color: currentColor;
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.3);
|
||||
}
|
||||
|
||||
.event-panel__preset--none {
|
||||
background: rgba(128, 128, 128, 0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Note */
|
||||
.event-panel__note {
|
||||
margin-top: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Media grid */
|
||||
.event-panel__media-grid {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.event-panel__media-add {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 10px;
|
||||
border: 2px dashed rgba(128, 128, 128, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.event-panel__media-add:hover {
|
||||
border-color: rgba(128, 128, 128, 0.4);
|
||||
}
|
||||
|
||||
/* Delete */
|
||||
.event-panel__delete {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
padding-bottom: 8px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Slide-up transition */
|
||||
.slide-up-enter-active,
|
||||
.slide-up-leave-active {
|
||||
transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
|
||||
.slide-up-enter-from,
|
||||
.slide-up-leave-to {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
</style>
|
||||
571
frontend/_src/components/FloatingLines.vue
Normal file
571
frontend/_src/components/FloatingLines.vue
Normal file
|
|
@ -0,0 +1,571 @@
|
|||
<template>
|
||||
<div
|
||||
ref="containerRef"
|
||||
class="floating-lines-container"
|
||||
:style="containerStyle"
|
||||
></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, onBeforeUnmount, ref, computed, watch } from 'vue'
|
||||
import {
|
||||
Scene,
|
||||
OrthographicCamera,
|
||||
WebGLRenderer,
|
||||
PlaneGeometry,
|
||||
Mesh,
|
||||
ShaderMaterial,
|
||||
Vector3,
|
||||
Vector2,
|
||||
Clock
|
||||
} from 'three'
|
||||
|
||||
const props = defineProps({
|
||||
lineCount: { type: [Array, Number], default: () => [10] },
|
||||
numPoints: { type: Number, default: 0 },
|
||||
pointXValues: { type: Array, default: () => [] },
|
||||
pointYValues: { type: Array, default: () => [] },
|
||||
pointColors: { type: Array, default: () => [] },
|
||||
lineSpread: { type: Number, default: 0.05 },
|
||||
fanSpread: { type: Number, default: 0.05 },
|
||||
lineSharpness: { type: Number, default: 8.0 },
|
||||
waveFrequency: { type: Number, default: 7.0 },
|
||||
bezierCurvature: { type: Number, default: 0.2 },
|
||||
circleRadiusPx: { type: Number, default: 75 },
|
||||
circleGlowSize: { type: Number, default: 18 },
|
||||
circleGlowStrength: { type: Number, default: 1.5 },
|
||||
lineBrightness: { type: Number, default: 1.0 },
|
||||
scrollContainer: { type: Object, default: null },
|
||||
scrollUvScale: { type: Number, default: 0 },
|
||||
animationSpeed: { type: Number, default: 1 },
|
||||
linesGradient: { type: Array, default: () => ['#e947f5', '#2f4ba2', '#0a0a12'] },
|
||||
bgColorCenter: { type: String, default: '#0a0514' },
|
||||
bgColorEdge: { type: String, default: '#000000' },
|
||||
backgroundImage: { type: String, default: '' },
|
||||
mixBlendMode: { type: String, default: 'screen' },
|
||||
parallax: { type: Boolean, default: false }
|
||||
})
|
||||
|
||||
// FPS display
|
||||
const fpsDisplay = ref(0)
|
||||
const dprDisplay = ref('0.0')
|
||||
|
||||
const containerStyle = computed(() => {
|
||||
const style = {}
|
||||
if (props.backgroundImage) {
|
||||
style.backgroundImage = `url('${props.backgroundImage}')`
|
||||
style.backgroundSize = 'cover'
|
||||
style.backgroundPosition = 'center'
|
||||
style.backgroundRepeat = 'no-repeat'
|
||||
}
|
||||
return style
|
||||
})
|
||||
|
||||
// --- Shader Definitions ---
|
||||
const vertexShader = `
|
||||
precision highp float;
|
||||
|
||||
void main() {
|
||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
||||
}
|
||||
`
|
||||
|
||||
const fragmentShader = `
|
||||
precision mediump float;
|
||||
|
||||
uniform float iTime;
|
||||
uniform vec3 iResolution;
|
||||
uniform float animationSpeed;
|
||||
|
||||
uniform int middleLineCount;
|
||||
uniform int numPoints;
|
||||
uniform float pointX[16];
|
||||
uniform float pointY[16];
|
||||
uniform float lineSpread;
|
||||
uniform float fanSpread;
|
||||
uniform float lineSharpness;
|
||||
uniform float waveFrequency;
|
||||
uniform float bezierCurvature;
|
||||
uniform float lineBrightness;
|
||||
uniform vec3 pointColor[16];
|
||||
|
||||
uniform bool parallax;
|
||||
uniform vec2 parallaxOffset;
|
||||
|
||||
uniform vec3 lineGradient[8];
|
||||
uniform int lineGradientCount;
|
||||
uniform vec3 bgColorCenter;
|
||||
uniform vec3 bgColorEdge;
|
||||
|
||||
float bezierClosestT(vec2 q, vec2 p0, vec2 pc, vec2 p1) {
|
||||
float bestT = 0.0;
|
||||
float bestD = 1e9;
|
||||
for (int k = 0; k <= 8; ++k) {
|
||||
float t = float(k) / 8.0;
|
||||
float mt = 1.0 - t;
|
||||
vec2 b = mt*mt*p0 + 2.0*mt*t*pc + t*t*p1;
|
||||
float d = dot(q - b, q - b);
|
||||
if (d < bestD) { bestD = d; bestT = t; }
|
||||
}
|
||||
|
||||
vec2 A = pc - p0;
|
||||
vec2 B = p0 - 2.0*pc + p1;
|
||||
vec2 D = p0 - q;
|
||||
float a = 2.0*dot(B,B);
|
||||
float bco = 6.0*dot(A,B);
|
||||
float c = 4.0*dot(A,A) + 2.0*dot(D,B);
|
||||
float dco = 2.0*dot(D,A);
|
||||
|
||||
float t = clamp(bestT, 0.001, 0.999);
|
||||
for (int k = 0; k < 4; ++k) {
|
||||
float f = a*t*t*t + bco*t*t + c*t + dco;
|
||||
float fp = 3.0*a*t*t + 2.0*bco*t + c;
|
||||
if (abs(fp) > 1e-8) t -= f / fp;
|
||||
t = clamp(t, -0.08, 1.08);
|
||||
}
|
||||
return t;
|
||||
}
|
||||
|
||||
// Accepts precomputed bezier values (t, curvePos, norm) — computed once per segment
|
||||
float waveFocal(vec2 uv, float fi, float totalLines, float t, vec2 curvePos, vec2 norm) {
|
||||
float s = dot(uv - curvePos, norm);
|
||||
|
||||
float time = iTime * animationSpeed;
|
||||
float normalizedI = totalLines > 1.0 ? fi / (totalLines - 1.0) : 0.5;
|
||||
|
||||
float envelope = sin(t * 3.14159265359);
|
||||
float linePos = (normalizedI - 0.5) * fanSpread * envelope;
|
||||
float amp = lineSpread * 0.3 * envelope;
|
||||
float waveDisp = sin(t * waveFrequency + fi * 1.3 + time * 0.4) * amp
|
||||
* sin(fi * 0.9 + time * 0.18);
|
||||
|
||||
float dist = s - linePos - waveDisp;
|
||||
float fade = smoothstep(-0.06, 0.04, t) * smoothstep(1.06, 0.96, t);
|
||||
|
||||
return fade * (0.013 / max(abs(dist) * lineSharpness + 0.004, 1e-4) + 0.003);
|
||||
}
|
||||
|
||||
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
|
||||
vec2 baseUv = (2.0 * fragCoord - iResolution.xy) / iResolution.y;
|
||||
baseUv.y *= -1.0;
|
||||
|
||||
if (parallax) {
|
||||
baseUv += parallaxOffset;
|
||||
}
|
||||
|
||||
vec3 col = vec3(0.0);
|
||||
|
||||
const int MAX_PTS = 16;
|
||||
const int MAX_SEGS = 15;
|
||||
|
||||
for (int s = 0; s < MAX_SEGS; ++s) {
|
||||
if (s >= numPoints - 1) break;
|
||||
|
||||
vec2 sp = vec2(pointX[s], pointY[s]);
|
||||
vec2 ep = vec2(pointX[s + 1], pointY[s + 1]);
|
||||
|
||||
vec2 segD = ep - sp;
|
||||
float segL = length(segD);
|
||||
vec2 segDir = segL > 0.001 ? segD / segL : vec2(1.0, 0.0);
|
||||
vec2 sPerp = vec2(-segDir.y, segDir.x);
|
||||
vec2 pc = (sp + ep) * 0.5 + sPerp * segL * bezierCurvature;
|
||||
|
||||
float t_seg = clamp(dot(baseUv - sp, segDir) / segL, 0.0, 1.0);
|
||||
vec3 lineCol = mix(pointColor[s], pointColor[s + 1], t_seg);
|
||||
|
||||
// bezierClosestT computed ONCE per segment — shared by fog + all lines
|
||||
float bt = bezierClosestT(baseUv, sp, pc, ep);
|
||||
float bmt = 1.0 - bt;
|
||||
vec2 bPos = bmt*bmt*sp + 2.0*bmt*bt*pc + bt*bt*ep;
|
||||
vec2 bTang = normalize(bmt*(pc - sp) + bt*(ep - pc));
|
||||
vec2 bNorm = vec2(-bTang.y, bTang.x);
|
||||
|
||||
float bDist = length(baseUv - bPos);
|
||||
float fogFade = smoothstep(-0.06, 0.05, bt) * smoothstep(1.06, 0.95, bt);
|
||||
float fogEnv = sin(bt * 3.14159265359);
|
||||
float segFog = fogFade * fogEnv * 0.0018 / max(bDist * bDist * 4.0 + 0.012, 0.001);
|
||||
col += lineCol * segFog;
|
||||
|
||||
for (int i = 0; i < middleLineCount; ++i) {
|
||||
col += lineCol * waveFocal(baseUv, float(i), float(middleLineCount), bt, bPos, bNorm);
|
||||
}
|
||||
}
|
||||
|
||||
col *= lineBrightness;
|
||||
|
||||
float dist = length(baseUv) / 1.8;
|
||||
vec3 bg = mix(bgColorCenter, bgColorEdge, clamp(dist, 0.0, 1.0));
|
||||
fragColor = vec4(clamp(bg + col, 0.0, 1.0), 1.0);
|
||||
}
|
||||
|
||||
void main() {
|
||||
vec4 color = vec4(0.0);
|
||||
mainImage(color, gl_FragCoord.xy);
|
||||
gl_FragColor = color;
|
||||
}
|
||||
`
|
||||
|
||||
// --- Helpers ---
|
||||
const MAX_GRADIENT_STOPS = 8
|
||||
|
||||
function hexToVec3(hex) {
|
||||
let value = hex.trim()
|
||||
if (value.startsWith('#')) value = value.slice(1)
|
||||
let r = 255, g = 255, b = 255
|
||||
if (value.length === 3) {
|
||||
r = parseInt(value[0] + value[0], 16)
|
||||
g = parseInt(value[1] + value[1], 16)
|
||||
b = parseInt(value[2] + value[2], 16)
|
||||
} else if (value.length === 6) {
|
||||
r = parseInt(value.slice(0, 2), 16)
|
||||
g = parseInt(value.slice(2, 4), 16)
|
||||
b = parseInt(value.slice(4, 6), 16)
|
||||
}
|
||||
return new Vector3(r / 255, g / 255, b / 255)
|
||||
}
|
||||
|
||||
// --- Component Logic ---
|
||||
const containerRef = ref(null)
|
||||
|
||||
let scene = null
|
||||
let camera = null
|
||||
let renderer = null
|
||||
let material = null
|
||||
let geometry = null
|
||||
let mesh = null
|
||||
let clock = null
|
||||
let rafId = null
|
||||
let resizeObserver = null
|
||||
let uniforms = null
|
||||
let scrollHandler = null
|
||||
let scrollIdleTimer = null
|
||||
let visibilityHandler = null
|
||||
|
||||
// Parallax tracking
|
||||
let targetParallax = null
|
||||
let currentParallax = null
|
||||
const parallaxDamping = 0.05
|
||||
|
||||
function getLineCount() {
|
||||
return typeof props.lineCount === 'number' ? props.lineCount : (props.lineCount[0] ?? 6)
|
||||
}
|
||||
|
||||
function applyGradient() {
|
||||
if (!uniforms) return
|
||||
const lines = props.linesGradient.filter(s => s && s.trim().length > 0)
|
||||
const stops = lines.slice(0, MAX_GRADIENT_STOPS)
|
||||
uniforms.lineGradientCount.value = stops.length
|
||||
stops.forEach((hex, i) => {
|
||||
const c = hexToVec3(hex)
|
||||
uniforms.lineGradient.value[i].set(c.x, c.y, c.z)
|
||||
})
|
||||
}
|
||||
|
||||
function applyPointColors() {
|
||||
if (!uniforms) return
|
||||
for (let i = 0; i < 16; i++) {
|
||||
const hex = props.pointColors[i]
|
||||
if (hex) {
|
||||
const c = hexToVec3(hex)
|
||||
uniforms.pointColor.value[i].set(c.x, c.y, c.z)
|
||||
} else {
|
||||
uniforms.pointColor.value[i].set(1, 1, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function applyBgColors() {
|
||||
if (!uniforms) return
|
||||
const center = hexToVec3(props.bgColorCenter)
|
||||
uniforms.bgColorCenter.value.set(center.x, center.y, center.z)
|
||||
const edge = hexToVec3(props.bgColorEdge)
|
||||
uniforms.bgColorEdge.value.set(edge.x, edge.y, edge.z)
|
||||
}
|
||||
|
||||
// Watch all props for live updates
|
||||
watch(() => props.animationSpeed, (v) => { if (uniforms) uniforms.animationSpeed.value = v })
|
||||
watch(() => props.lineCount, () => {
|
||||
if (!uniforms) return
|
||||
uniforms.middleLineCount.value = getLineCount()
|
||||
})
|
||||
watch(() => props.lineSpread, (v) => { if (uniforms) uniforms.lineSpread.value = v })
|
||||
watch(() => props.fanSpread, (v) => { if (uniforms) uniforms.fanSpread.value = v })
|
||||
watch(() => props.lineSharpness, (v) => { if (uniforms) uniforms.lineSharpness.value = v })
|
||||
watch(() => props.waveFrequency, (v) => { if (uniforms) uniforms.waveFrequency.value = v })
|
||||
watch(() => props.bezierCurvature, (v) => { if (uniforms) uniforms.bezierCurvature.value = v })
|
||||
watch(() => props.lineBrightness, (v) => { if (uniforms) uniforms.lineBrightness.value = v })
|
||||
watch(() => props.numPoints, (v) => { if (uniforms) uniforms.numPoints.value = v })
|
||||
watch(() => props.pointXValues, (values) => {
|
||||
if (!uniforms) return
|
||||
for (let i = 0; i < 16; i++) {
|
||||
uniforms.pointX.value[i] = values[i] ?? 0
|
||||
}
|
||||
}, { deep: true })
|
||||
watch(() => props.pointYValues, (values) => {
|
||||
if (!uniforms) return
|
||||
for (let i = 0; i < 16; i++) {
|
||||
uniforms.pointY.value[i] = values[i] ?? 0
|
||||
}
|
||||
}, { deep: true })
|
||||
watch(() => props.pointColors, applyPointColors, { deep: true })
|
||||
watch(() => props.linesGradient, applyGradient, { deep: true })
|
||||
watch(() => props.bgColorCenter, applyBgColors)
|
||||
watch(() => props.bgColorEdge, applyBgColors)
|
||||
|
||||
onMounted(() => {
|
||||
if (!containerRef.value) return
|
||||
|
||||
targetParallax = new Vector2(0, 0)
|
||||
currentParallax = new Vector2(0, 0)
|
||||
|
||||
scene = new Scene()
|
||||
camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1)
|
||||
camera.position.z = 1
|
||||
|
||||
// Adaptive DPR: full quality when idle, reduced during scroll
|
||||
const nativeDpr = Math.min(window.devicePixelRatio || 1, 2)
|
||||
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
|
||||
const DPR_IDLE = isMobile ? Math.min(nativeDpr, 1.6) : nativeDpr
|
||||
const DPR_SCROLL = isMobile ? 0.75 : nativeDpr // reduced on mobile during scroll
|
||||
const DPR_RESTORE_DELAY = 100 // ms after scroll stops to restore quality
|
||||
let currentDpr = DPR_IDLE
|
||||
let scrolling = false
|
||||
|
||||
renderer = new WebGLRenderer({ antialias: !isMobile, alpha: false, powerPreference: 'high-performance' })
|
||||
renderer.setPixelRatio(currentDpr)
|
||||
renderer.domElement.style.width = '100%'
|
||||
renderer.domElement.style.height = '100%'
|
||||
renderer.domElement.style.display = 'block'
|
||||
renderer.domElement.style.mixBlendMode = props.mixBlendMode
|
||||
containerRef.value.appendChild(renderer.domElement)
|
||||
|
||||
const middleLineCount = getLineCount()
|
||||
|
||||
// Initial point positions (UV space, no flip)
|
||||
const initX = [...props.pointXValues].slice(0, 16).concat(Array(16).fill(0)).slice(0, 16)
|
||||
const initY = [...props.pointYValues].slice(0, 16).concat(Array(16).fill(0)).slice(0, 16)
|
||||
|
||||
uniforms = {
|
||||
iTime: { value: 0 },
|
||||
iResolution: { value: new Vector3(1, 1, 1) },
|
||||
animationSpeed: { value: props.animationSpeed },
|
||||
|
||||
middleLineCount: { value: middleLineCount },
|
||||
numPoints: { value: props.numPoints },
|
||||
pointX: { value: initX },
|
||||
pointY: { value: initY },
|
||||
lineSpread: { value: props.lineSpread },
|
||||
fanSpread: { value: props.fanSpread },
|
||||
lineSharpness: { value: props.lineSharpness },
|
||||
waveFrequency: { value: props.waveFrequency },
|
||||
bezierCurvature: { value: props.bezierCurvature },
|
||||
lineBrightness: { value: props.lineBrightness },
|
||||
pointColor: {
|
||||
value: Array.from({ length: 16 }, () => new Vector3(1, 1, 1))
|
||||
},
|
||||
|
||||
parallax: { value: props.parallax },
|
||||
parallaxOffset: { value: new Vector2(0, 0) },
|
||||
|
||||
lineGradient: {
|
||||
value: Array.from({ length: MAX_GRADIENT_STOPS }, () => new Vector3(1, 1, 1))
|
||||
},
|
||||
lineGradientCount: { value: 0 },
|
||||
bgColorCenter: { value: new Vector3(0, 0, 0) },
|
||||
bgColorEdge: { value: new Vector3(0, 0, 0) }
|
||||
}
|
||||
|
||||
// Apply initial values
|
||||
applyGradient()
|
||||
applyBgColors()
|
||||
applyPointColors()
|
||||
|
||||
material = new ShaderMaterial({
|
||||
uniforms,
|
||||
vertexShader,
|
||||
fragmentShader
|
||||
})
|
||||
|
||||
geometry = new PlaneGeometry(2, 2)
|
||||
mesh = new Mesh(geometry, material)
|
||||
scene.add(mesh)
|
||||
|
||||
clock = new Clock()
|
||||
|
||||
// Resize
|
||||
const setSize = () => {
|
||||
if (!containerRef.value || !renderer) return
|
||||
const width = containerRef.value.clientWidth || 1
|
||||
const height = containerRef.value.clientHeight || 1
|
||||
renderer.setSize(width, height, false)
|
||||
const canvasWidth = renderer.domElement.width
|
||||
const canvasHeight = renderer.domElement.height
|
||||
uniforms.iResolution.value.set(canvasWidth, canvasHeight, 1)
|
||||
}
|
||||
setSize()
|
||||
|
||||
resizeObserver = new ResizeObserver(setSize)
|
||||
resizeObserver.observe(containerRef.value)
|
||||
|
||||
// Pointer events (parallax only)
|
||||
if (props.parallax) {
|
||||
const handlePointerMove = (event) => {
|
||||
const rect = renderer.domElement.getBoundingClientRect()
|
||||
const x = event.clientX - rect.left
|
||||
const y = event.clientY - rect.top
|
||||
const centerX = rect.width / 2
|
||||
const centerY = rect.height / 2
|
||||
targetParallax.set(
|
||||
((x - centerX) / rect.width) * 0.2,
|
||||
(-(y - centerY) / rect.height) * 0.2
|
||||
)
|
||||
}
|
||||
renderer.domElement.addEventListener('pointermove', handlePointerMove)
|
||||
}
|
||||
|
||||
// Scroll sync: update cached scrollLeft + trigger adaptive DPR reduction.
|
||||
let cachedScrollLeft = 0
|
||||
|
||||
function setDpr(dpr) {
|
||||
if (dpr === currentDpr) return
|
||||
currentDpr = dpr
|
||||
renderer.setPixelRatio(dpr)
|
||||
// Re-apply size so resolution updates
|
||||
if (containerRef.value) {
|
||||
const w = containerRef.value.clientWidth || 1
|
||||
const h = containerRef.value.clientHeight || 1
|
||||
renderer.setSize(w, h, false)
|
||||
uniforms.iResolution.value.set(renderer.domElement.width, renderer.domElement.height, 1)
|
||||
}
|
||||
}
|
||||
|
||||
scrollHandler = () => {
|
||||
if (props.scrollContainer) {
|
||||
cachedScrollLeft = props.scrollContainer.scrollLeft || 0
|
||||
}
|
||||
// Drop DPR while scrolling on mobile
|
||||
if (!scrolling && DPR_SCROLL < DPR_IDLE) {
|
||||
scrolling = true
|
||||
setDpr(DPR_SCROLL)
|
||||
}
|
||||
clearTimeout(scrollIdleTimer)
|
||||
scrollIdleTimer = setTimeout(() => {
|
||||
scrolling = false
|
||||
setDpr(DPR_IDLE)
|
||||
}, DPR_RESTORE_DELAY)
|
||||
}
|
||||
|
||||
if (props.scrollContainer) {
|
||||
cachedScrollLeft = props.scrollContainer.scrollLeft || 0
|
||||
props.scrollContainer.addEventListener('scroll', scrollHandler, { passive: true })
|
||||
}
|
||||
|
||||
// Fast inline scroll sync — reads cached scrollLeft instead of DOM during render
|
||||
function syncScrollFromCache() {
|
||||
if (props.scrollUvScale > 0) {
|
||||
const sl = cachedScrollLeft
|
||||
for (let i = 0; i < 16; i++) {
|
||||
uniforms.pointX.value[i] = (props.pointXValues[i] ?? 0) - sl * props.scrollUvScale
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// FPS tracking + adaptive DPR
|
||||
let frameCount = 0
|
||||
let fpsLastTime = performance.now()
|
||||
|
||||
// Adaptive DPR steps based on measured FPS (mobile only)
|
||||
// Steps are tried from lowest to highest – first step where fps >= threshold wins
|
||||
const DPR_STEPS = isMobile ? [
|
||||
{ threshold: 50, dpr: DPR_IDLE }, // good fps → full quality
|
||||
{ threshold: 35, dpr: Math.max(DPR_IDLE * 0.75, 0.75) }, // mid fps → 75%
|
||||
{ threshold: 0, dpr: Math.max(DPR_IDLE * 0.5, 0.5) }, // low fps → 50%
|
||||
] : null
|
||||
let adaptiveDprTarget = DPR_IDLE
|
||||
|
||||
// Pause rendering when app/tab is hidden (e.g. iPhone home screen)
|
||||
visibilityHandler = () => {
|
||||
if (document.hidden) {
|
||||
if (rafId) cancelAnimationFrame(rafId)
|
||||
rafId = null
|
||||
} else if (!rafId) {
|
||||
fpsLastTime = performance.now()
|
||||
frameCount = 0
|
||||
renderLoop()
|
||||
}
|
||||
}
|
||||
document.addEventListener('visibilitychange', visibilityHandler)
|
||||
|
||||
// Render loop
|
||||
const renderLoop = () => {
|
||||
// FPS counter + adaptive DPR
|
||||
frameCount++
|
||||
const now = performance.now()
|
||||
if (now - fpsLastTime >= 1000) {
|
||||
const fps = Math.round(frameCount / ((now - fpsLastTime) / 1000))
|
||||
fpsDisplay.value = fps
|
||||
frameCount = 0
|
||||
fpsLastTime = now
|
||||
|
||||
// Adapt DPR based on measured FPS (only when not scroll-throttled)
|
||||
if (DPR_STEPS && !scrolling) {
|
||||
const step = DPR_STEPS.find(s => fps >= s.threshold) ?? DPR_STEPS[DPR_STEPS.length - 1]
|
||||
if (step.dpr !== adaptiveDprTarget) {
|
||||
adaptiveDprTarget = step.dpr
|
||||
setDpr(adaptiveDprTarget)
|
||||
}
|
||||
}
|
||||
|
||||
dprDisplay.value = currentDpr.toFixed(2)
|
||||
}
|
||||
|
||||
// Read latest scrollLeft from DOM in case scroll event was missed
|
||||
if (props.scrollContainer) {
|
||||
cachedScrollLeft = props.scrollContainer.scrollLeft || 0
|
||||
}
|
||||
|
||||
uniforms.iTime.value = clock.getElapsedTime()
|
||||
|
||||
if (props.parallax) {
|
||||
currentParallax.lerp(targetParallax, parallaxDamping)
|
||||
uniforms.parallaxOffset.value.copy(currentParallax)
|
||||
}
|
||||
|
||||
syncScrollFromCache()
|
||||
|
||||
renderer.render(scene, camera)
|
||||
rafId = requestAnimationFrame(renderLoop)
|
||||
}
|
||||
renderLoop()
|
||||
})
|
||||
|
||||
defineExpose({ fpsDisplay, dprDisplay })
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (rafId) cancelAnimationFrame(rafId)
|
||||
if (visibilityHandler) document.removeEventListener('visibilitychange', visibilityHandler)
|
||||
if (resizeObserver) resizeObserver.disconnect()
|
||||
if (props.scrollContainer && scrollHandler) {
|
||||
props.scrollContainer.removeEventListener('scroll', scrollHandler)
|
||||
}
|
||||
clearTimeout(scrollIdleTimer)
|
||||
if (geometry) geometry.dispose()
|
||||
if (material) material.dispose()
|
||||
if (renderer) {
|
||||
renderer.dispose()
|
||||
if (renderer.domElement && renderer.domElement.parentNode) {
|
||||
renderer.domElement.parentNode.removeChild(renderer.domElement)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.floating-lines-container {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
will-change: transform;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
</style>
|
||||
200
frontend/_src/components/GlowDot.vue
Normal file
200
frontend/_src/components/GlowDot.vue
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
<template>
|
||||
<div
|
||||
class="glow-dot"
|
||||
:class="{
|
||||
'glow-dot--ghost': isGhost,
|
||||
'glow-dot--selected': selected,
|
||||
'glow-dot--dimmed': isDimmed,
|
||||
'glow-dot--label-above': labelAbove
|
||||
}"
|
||||
:style="dotStyle"
|
||||
@click.stop="onSelect"
|
||||
>
|
||||
<div class="glow-dot__inner" :style="{ boxShadow: glowShadow }">
|
||||
<img
|
||||
v-if="imageSrc"
|
||||
:src="imageSrc"
|
||||
class="glow-dot__image"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div v-if="!isGhost && event.title" class="glow-dot__label" :style="labelStyle">
|
||||
<span class="glow-dot__title" :style="titleStyle">{{ event.title }}</span>
|
||||
<span class="glow-dot__date" :style="dateStyle">{{ formattedDate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useEventsStore } from 'stores/events'
|
||||
import { useSettingsStore } from 'stores/settings'
|
||||
import { useImageCache } from 'composables/useImageCache'
|
||||
|
||||
const props = defineProps({
|
||||
event: { type: Object, required: true },
|
||||
x: { type: Number, default: 0 },
|
||||
isGhost: { type: Boolean, default: false },
|
||||
selected: { type: Boolean, default: false }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['select'])
|
||||
const eventsStore = useEventsStore()
|
||||
const settingsStore = useSettingsStore()
|
||||
|
||||
// Resolve image: cached thumbnail from IndexedDB or fetch & cache
|
||||
const { resolvedSrc: imageSrc } = props.event.image
|
||||
? useImageCache(props.event.image, props.event.id)
|
||||
: { resolvedSrc: computed(() => null) }
|
||||
|
||||
const fl = computed(() => settingsStore.floatingLines)
|
||||
const glowColor = computed(() => eventsStore.getGlowColor(props.event))
|
||||
|
||||
// CSS diameter derived from settings (circleRadius is half-size in px)
|
||||
const dpr = Math.min(window.devicePixelRatio || 1, 2)
|
||||
const dotSize = computed(() => 2 * fl.value.circleRadius / dpr)
|
||||
|
||||
// Y position: emotion +1 → top (20%), 0 → middle (47%), -1 → bottom (74%)
|
||||
|
||||
const yPercent = computed(() => 48 - props.event.emotion * 30)
|
||||
|
||||
// Label above dot when dot is in lower half, below when in upper half
|
||||
const labelAbove = computed(() => yPercent.value > 48)
|
||||
|
||||
// Format date as "12. Feb 2024"
|
||||
const MONTH_SHORT = ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
|
||||
const formattedDate = computed(() => {
|
||||
const d = new Date(props.event.date)
|
||||
return `${d.getDate()}. ${MONTH_SHORT[d.getMonth()]} ${d.getFullYear()}`
|
||||
})
|
||||
|
||||
// Label font sizes per setting
|
||||
const LABEL_FONT = { small: { title: 10, date: 9 }, medium: { title: 12, date: 11 }, large: { title: 14, date: 13 } }
|
||||
const labelFont = computed(() => LABEL_FONT[fl.value.labelSize] ?? LABEL_FONT.small)
|
||||
const labelColor = computed(() => fl.value.labelColor ?? '#ffffff')
|
||||
|
||||
const labelStyle = computed(() => ({
|
||||
maxWidth: labelFont.value.title >= 14 ? '120px' : '90px'
|
||||
}))
|
||||
const titleStyle = computed(() => ({
|
||||
fontSize: `${labelFont.value.title}px`,
|
||||
color: labelColor.value,
|
||||
maxWidth: labelFont.value.title >= 14 ? '120px' : '90px'
|
||||
}))
|
||||
const dateStyle = computed(() => ({
|
||||
fontSize: `${labelFont.value.date}px`,
|
||||
color: labelColor.value
|
||||
}))
|
||||
|
||||
const dotStyle = computed(() => ({
|
||||
left: `${props.x}px`,
|
||||
top: `${yPercent.value}%`,
|
||||
width: `${dotSize.value}px`,
|
||||
height: `${dotSize.value}px`
|
||||
}))
|
||||
|
||||
// Two-layer box-shadow: tight bright core + wide soft halo
|
||||
const glowShadow = computed(() => {
|
||||
const size = fl.value.glowSize
|
||||
const strength = fl.value.glowStrength
|
||||
const color = glowColor.value
|
||||
const core = alphaHex(Math.min(strength / 3, 1))
|
||||
const halo = alphaHex(Math.min(strength / 7, 1))
|
||||
return `0 0 ${size}px 0px ${color}${core}, 0 0 ${size * 2.5}px ${size * 0.3}px ${color}${halo}`
|
||||
})
|
||||
|
||||
function alphaHex(a) {
|
||||
return Math.round(Math.min(1, Math.max(0, a)) * 255).toString(16).padStart(2, '0')
|
||||
}
|
||||
|
||||
const isDimmed = computed(() =>
|
||||
eventsStore.selectedEventId !== null && !props.selected && !props.isGhost
|
||||
)
|
||||
|
||||
function onSelect() {
|
||||
if (!props.isGhost) emit('select')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.glow-dot {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
transition: opacity 0.3s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
.glow-dot__inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.glow-dot__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* States */
|
||||
.glow-dot--ghost {
|
||||
opacity: 1;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.glow-dot--selected {
|
||||
transform: translate(-50%, -50%) scale(1.15);
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.glow-dot--dimmed {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Event label (title + date) */
|
||||
.glow-dot__label {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: calc(100% + 6px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1px;
|
||||
max-width: 90px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* When dot is in lower half, show label above */
|
||||
.glow-dot--label-above .glow-dot__label {
|
||||
top: auto;
|
||||
bottom: calc(100% + 6px);
|
||||
}
|
||||
|
||||
.glow-dot__title {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
opacity: 0.7;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 90px;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.glow-dot__date {
|
||||
font-size: 9px;
|
||||
font-weight: 400;
|
||||
opacity: 0.4;
|
||||
white-space: nowrap;
|
||||
line-height: 1.2;
|
||||
}
|
||||
</style>
|
||||
482
frontend/_src/components/LifeWaveSettings.vue
Normal file
482
frontend/_src/components/LifeWaveSettings.vue
Normal file
|
|
@ -0,0 +1,482 @@
|
|||
<template>
|
||||
<Transition name="slide-up">
|
||||
<div
|
||||
v-if="open"
|
||||
class="lw-settings glass--panel"
|
||||
:style="panelHeight != null ? { height: panelHeight + 'dvh' } : {}"
|
||||
:class="{ 'lw-settings--dragging': isDragging }"
|
||||
>
|
||||
<!-- Handle — drag to resize, tap to close -->
|
||||
<div
|
||||
class="lw-settings__handle"
|
||||
v-on="handleListeners"
|
||||
>
|
||||
<div class="lw-settings__handle-bar"></div>
|
||||
</div>
|
||||
|
||||
<div class="lw-settings__scroll">
|
||||
<div class="lw-settings__title">Einstellungen</div>
|
||||
|
||||
<!-- Linien -->
|
||||
<div class="lw-settings__card" :class="{ 'lw-settings__card--dark': isDark }">
|
||||
<span class="lw-settings__card-label">Linien</span>
|
||||
|
||||
<div class="lw-settings__row">
|
||||
<span>Speed</span>
|
||||
<span class="lw-settings__value">{{ fl.speed.toFixed(2) }}</span>
|
||||
</div>
|
||||
<q-slider
|
||||
:model-value="fl.speed"
|
||||
@update:model-value="v => update({ speed: v })"
|
||||
:min="0.1" :max="3" :step="0.05"
|
||||
/>
|
||||
|
||||
<div class="lw-settings__row">
|
||||
<span>Anzahl</span>
|
||||
<span class="lw-settings__value">{{ fl.lineCount }}</span>
|
||||
</div>
|
||||
<q-slider
|
||||
:model-value="fl.lineCount"
|
||||
@update:model-value="v => update({ lineCount: v })"
|
||||
:min="1" :max="40" :step="1"
|
||||
/>
|
||||
|
||||
<div class="lw-settings__row">
|
||||
<span>Wellen-Amp</span>
|
||||
<span class="lw-settings__value">{{ fl.spread.toFixed(2) }}</span>
|
||||
</div>
|
||||
<q-slider
|
||||
:model-value="fl.spread"
|
||||
@update:model-value="v => update({ spread: v })"
|
||||
:min="0.01" :max="1" :step="0.01"
|
||||
/>
|
||||
|
||||
<div class="lw-settings__row">
|
||||
<span>Fächerbreite</span>
|
||||
<span class="lw-settings__value">{{ fl.fanSpread.toFixed(3) }}</span>
|
||||
</div>
|
||||
<q-slider
|
||||
:model-value="fl.fanSpread"
|
||||
@update:model-value="v => update({ fanSpread: v })"
|
||||
:min="0.01" :max="0.5" :step="0.005"
|
||||
/>
|
||||
|
||||
<div class="lw-settings__row">
|
||||
<span>Feinheit</span>
|
||||
<span class="lw-settings__value">{{ fl.lineSharpness.toFixed(1) }}</span>
|
||||
</div>
|
||||
<q-slider
|
||||
:model-value="fl.lineSharpness"
|
||||
@update:model-value="v => update({ lineSharpness: v })"
|
||||
:min="0.3" :max="10" :step="0.1"
|
||||
/>
|
||||
|
||||
<div class="lw-settings__row">
|
||||
<span>Welligkeit</span>
|
||||
<span class="lw-settings__value">{{ fl.waveFrequency.toFixed(1) }}</span>
|
||||
</div>
|
||||
<q-slider
|
||||
:model-value="fl.waveFrequency"
|
||||
@update:model-value="v => update({ waveFrequency: v })"
|
||||
:min="1" :max="30" :step="0.5"
|
||||
/>
|
||||
|
||||
<div class="lw-settings__row">
|
||||
<span>Kurve</span>
|
||||
<span class="lw-settings__value">{{ fl.bezierCurvature.toFixed(2) }}</span>
|
||||
</div>
|
||||
<q-slider
|
||||
:model-value="fl.bezierCurvature"
|
||||
@update:model-value="v => update({ bezierCurvature: v })"
|
||||
:min="-1" :max="1" :step="0.05"
|
||||
/>
|
||||
|
||||
<div class="lw-settings__row">
|
||||
<span>Kreis</span>
|
||||
<span class="lw-settings__value">{{ fl.circleRadius }}px</span>
|
||||
</div>
|
||||
<q-slider
|
||||
:model-value="fl.circleRadius"
|
||||
@update:model-value="v => update({ circleRadius: v })"
|
||||
:min="10" :max="200" :step="5"
|
||||
/>
|
||||
|
||||
<div class="lw-settings__row">
|
||||
<span>Glow Größe</span>
|
||||
<span class="lw-settings__value">{{ fl.glowSize }}px</span>
|
||||
</div>
|
||||
<q-slider
|
||||
:model-value="fl.glowSize"
|
||||
@update:model-value="v => update({ glowSize: v })"
|
||||
:min="5" :max="100" :step="1"
|
||||
/>
|
||||
|
||||
<div class="lw-settings__row">
|
||||
<span>Glow Stärke</span>
|
||||
<span class="lw-settings__value">{{ fl.glowStrength.toFixed(1) }}</span>
|
||||
</div>
|
||||
<q-slider
|
||||
:model-value="fl.glowStrength"
|
||||
@update:model-value="v => update({ glowStrength: v })"
|
||||
:min="0.5" :max="12" :step="0.5"
|
||||
/>
|
||||
|
||||
<div class="lw-settings__row">
|
||||
<span>Helligkeit</span>
|
||||
<span class="lw-settings__value">{{ (fl.lineBrightness ?? 1).toFixed(2) }}</span>
|
||||
</div>
|
||||
<q-slider
|
||||
:model-value="fl.lineBrightness ?? 1"
|
||||
@update:model-value="v => update({ lineBrightness: v })"
|
||||
:min="0.05" :max="2" :step="0.05"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Labels -->
|
||||
<div class="lw-settings__card" :class="{ 'lw-settings__card--dark': isDark }">
|
||||
<span class="lw-settings__card-label">Labels</span>
|
||||
|
||||
<div class="lw-settings__row">
|
||||
<span>Schriftgröße</span>
|
||||
<div class="lw-settings__segmented">
|
||||
<button
|
||||
v-for="size in LABEL_SIZES"
|
||||
:key="size.value"
|
||||
class="lw-settings__seg-btn"
|
||||
:class="{ 'lw-settings__seg-btn--active': fl.labelSize === size.value }"
|
||||
@click="update({ labelSize: size.value })"
|
||||
>
|
||||
{{ size.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lw-settings__row">
|
||||
<span>Schriftfarbe</span>
|
||||
<input
|
||||
type="color"
|
||||
:value="fl.labelColor ?? '#ffffff'"
|
||||
@input="e => update({ labelColor: e.target.value })"
|
||||
class="lw-settings__color-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hintergrundbild -->
|
||||
<div class="lw-settings__card" :class="{ 'lw-settings__card--dark': isDark }">
|
||||
<span class="lw-settings__card-label">Hintergrundbild</span>
|
||||
|
||||
<div class="lw-settings__img-grid">
|
||||
<button
|
||||
class="lw-settings__img-btn"
|
||||
:class="{ 'lw-settings__img-btn--active': fl.backgroundImage === '' }"
|
||||
@click="update({ backgroundImage: '' })"
|
||||
>
|
||||
Keins
|
||||
</button>
|
||||
<button
|
||||
v-for="n in 10"
|
||||
:key="'bg' + n"
|
||||
class="lw-settings__img-btn"
|
||||
:class="{ 'lw-settings__img-btn--active': fl.backgroundImage === `/images/bg-image-${n}.jpg` }"
|
||||
@click="update({ backgroundImage: `/images/bg-image-${n}.jpg` })"
|
||||
>
|
||||
{{ n }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hintergrundfarbe -->
|
||||
<div class="lw-settings__card" :class="{ 'lw-settings__card--dark': isDark }">
|
||||
<span class="lw-settings__card-label">Hintergrundfarbe</span>
|
||||
|
||||
<div class="lw-settings__row">
|
||||
<span>BG Mitte</span>
|
||||
<input
|
||||
type="color"
|
||||
:value="fl.bgCenter"
|
||||
@input="e => update({ bgCenter: e.target.value })"
|
||||
class="lw-settings__color-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="lw-settings__row">
|
||||
<span>BG Rand</span>
|
||||
<input
|
||||
type="color"
|
||||
:value="fl.bgEdge"
|
||||
@input="e => update({ bgEdge: e.target.value })"
|
||||
class="lw-settings__color-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Farbstopps -->
|
||||
<div class="lw-settings__card" :class="{ 'lw-settings__card--dark': isDark }">
|
||||
<span class="lw-settings__card-label">Farbverlauf (je Zeile ein Hex)</span>
|
||||
|
||||
<textarea
|
||||
:value="fl.gradientStops"
|
||||
@input="e => update({ gradientStops: e.target.value })"
|
||||
class="lw-settings__gradient-input"
|
||||
rows="4"
|
||||
spellcheck="false"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Extras -->
|
||||
<div class="lw-settings__card" :class="{ 'lw-settings__card--dark': isDark }">
|
||||
<span class="lw-settings__card-label">Extras</span>
|
||||
|
||||
<div class="lw-settings__row">
|
||||
<span>{{ isDark ? 'Hell-Modus' : 'Dunkel-Modus' }}</span>
|
||||
<q-toggle
|
||||
:model-value="isDark"
|
||||
@update:model-value="toggleDark"
|
||||
dense
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reset -->
|
||||
<div class="lw-settings__reset">
|
||||
<q-btn
|
||||
flat dense no-caps
|
||||
label="Zurücksetzen"
|
||||
icon="restart_alt"
|
||||
size="sm"
|
||||
@click="settingsStore.resetFloatingLines()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, watch } from 'vue'
|
||||
import { useQuasar } from 'quasar'
|
||||
import { useSettingsStore } from 'stores/settings'
|
||||
import { usePanelDrag } from 'composables/usePanelDrag'
|
||||
|
||||
const props = defineProps({ open: { type: Boolean, default: false } })
|
||||
const emit = defineEmits(['close'])
|
||||
const { panelHeight, isDragging, handleListeners, resetHeight } = usePanelDrag(() => emit('close'))
|
||||
|
||||
watch(() => props.open, (open) => { if (open) resetHeight() })
|
||||
|
||||
const $q = useQuasar()
|
||||
const settingsStore = useSettingsStore()
|
||||
const isDark = computed(() => $q.dark.isActive)
|
||||
const fl = computed(() => settingsStore.floatingLines)
|
||||
|
||||
const LABEL_SIZES = [
|
||||
{ label: 'Klein', value: 'small' },
|
||||
{ label: 'Mittel', value: 'medium' },
|
||||
{ label: 'Groß', value: 'large' }
|
||||
]
|
||||
|
||||
function update(changes) {
|
||||
settingsStore.updateFloatingLines(changes)
|
||||
}
|
||||
|
||||
function toggleDark() {
|
||||
$q.dark.toggle()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.lw-settings {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 20;
|
||||
height: 75dvh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 20px 20px 0 0;
|
||||
transition: height 0.25s ease;
|
||||
}
|
||||
|
||||
.lw-settings--dragging {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.lw-settings__handle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 10px 0 4px;
|
||||
flex-shrink: 0;
|
||||
cursor: grab;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.lw-settings__handle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.lw-settings__handle-bar {
|
||||
width: 36px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: rgba(128, 128, 128, 0.3);
|
||||
}
|
||||
|
||||
.lw-settings__scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0 20px 32px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.lw-settings__title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.lw-settings__card {
|
||||
background: rgba(128, 128, 128, 0.06);
|
||||
border: 1px solid rgba(128, 128, 128, 0.1);
|
||||
border-radius: 14px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.lw-settings__card--dark {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border-color: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.lw-settings__card-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
opacity: 0.7;
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.lw-settings__row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.lw-settings__row:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.lw-settings__value {
|
||||
font-weight: 600;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Segmented control */
|
||||
.lw-settings__segmented {
|
||||
display: flex;
|
||||
background: rgba(128, 128, 128, 0.1);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(128, 128, 128, 0.15);
|
||||
}
|
||||
|
||||
.lw-settings__seg-btn {
|
||||
flex: 1;
|
||||
padding: 5px 12px;
|
||||
border: none;
|
||||
background: none;
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
transition: all 0.15s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.lw-settings__seg-btn--active {
|
||||
background: rgba(168, 85, 247, 0.25);
|
||||
opacity: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.lw-settings__img-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.lw-settings__img-btn {
|
||||
background: rgba(128, 128, 128, 0.1);
|
||||
border: 1px solid rgba(128, 128, 128, 0.2);
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.lw-settings__img-btn:hover {
|
||||
opacity: 1;
|
||||
border-color: #a855f7;
|
||||
}
|
||||
|
||||
.lw-settings__img-btn--active {
|
||||
border-color: #a855f7;
|
||||
color: #a855f7;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lw-settings__color-input {
|
||||
width: 36px;
|
||||
height: 22px;
|
||||
border: none;
|
||||
padding: 0;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.lw-settings__gradient-input {
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
border: 1px solid rgba(128, 128, 128, 0.2);
|
||||
color: inherit;
|
||||
font-family: ui-monospace, 'Cascadia Code', monospace;
|
||||
font-size: 12px;
|
||||
padding: 8px 10px;
|
||||
resize: none;
|
||||
border-radius: 8px;
|
||||
outline: none;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.body--dark .lw-settings__gradient-input {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.lw-settings__reset {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
padding-bottom: 8px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Slide-up transition */
|
||||
.slide-up-enter-active,
|
||||
.slide-up-leave-active {
|
||||
transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
|
||||
.slide-up-enter-from,
|
||||
.slide-up-leave-to {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
</style>
|
||||
171
frontend/_src/components/ModalCard.vue
Normal file
171
frontend/_src/components/ModalCard.vue
Normal file
|
|
@ -0,0 +1,171 @@
|
|||
<template>
|
||||
<Transition name="modal-card">
|
||||
<div v-if="open" class="modal-card glass--panel" :class="{ 'modal-card--dark': isDark }">
|
||||
<!-- Header: title + close -->
|
||||
<div class="modal-card__header">
|
||||
<span class="modal-card__title">{{ title }}</span>
|
||||
<button class="modal-card__close" @click="$emit('close')">
|
||||
<q-icon name="close" size="22px" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Tabs (optional) -->
|
||||
<div v-if="tabs.length" class="modal-card__tabs">
|
||||
<div class="modal-card__tabs-scroll">
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
:key="tab.value"
|
||||
class="modal-card__tab"
|
||||
:class="{ 'modal-card__tab--active': modelValue === tab.value }"
|
||||
@click="$emit('update:modelValue', tab.value)"
|
||||
>
|
||||
<q-icon v-if="tab.icon" :name="tab.icon" size="16px" />
|
||||
<span>{{ tab.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="modal-card__body">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useQuasar } from 'quasar'
|
||||
|
||||
defineProps({
|
||||
open: { type: Boolean, default: false },
|
||||
title: { type: String, default: '' },
|
||||
tabs: { type: Array, default: () => [] },
|
||||
modelValue: { type: String, default: '' }
|
||||
})
|
||||
|
||||
defineEmits(['close', 'update:modelValue'])
|
||||
|
||||
const $q = useQuasar()
|
||||
const isDark = computed(() => $q.dark.isActive)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal-card {
|
||||
position: fixed;
|
||||
top: 48px;
|
||||
left: 12px;
|
||||
right: 12px;
|
||||
bottom: 12px;
|
||||
z-index: 30;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(128, 128, 128, 0.15);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.modal-card__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 20px 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.modal-card__title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.modal-card__close {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: rgba(128, 128, 128, 0.1);
|
||||
color: inherit;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.modal-card__close:hover {
|
||||
background: rgba(128, 128, 128, 0.2);
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
.modal-card__tabs {
|
||||
flex-shrink: 0;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid rgba(128, 128, 128, 0.1);
|
||||
}
|
||||
|
||||
.modal-card__tabs-scroll {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.modal-card__tabs-scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.modal-card__tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 14px;
|
||||
border: none;
|
||||
background: rgba(128, 128, 128, 0.08);
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: background 0.15s;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.modal-card__tab:hover {
|
||||
opacity: 0.85;
|
||||
background: rgba(128, 128, 128, 0.14);
|
||||
}
|
||||
|
||||
.modal-card__tab--active {
|
||||
opacity: 1;
|
||||
background: rgba(128, 128, 128, 0.18);
|
||||
}
|
||||
|
||||
.modal-card--dark .modal-card__tab--active {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
/* Body */
|
||||
.modal-card__body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Transition */
|
||||
.modal-card-enter-active,
|
||||
.modal-card-leave-active {
|
||||
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.modal-card-enter-from,
|
||||
.modal-card-leave-to {
|
||||
transform: translateY(30px) scale(0.96);
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
547
frontend/_src/components/TimelineView.vue
Normal file
547
frontend/_src/components/TimelineView.vue
Normal file
|
|
@ -0,0 +1,547 @@
|
|||
<template>
|
||||
<div class="timeline-container">
|
||||
<div
|
||||
class="timeline"
|
||||
ref="timelineRef"
|
||||
@scroll="onScroll"
|
||||
@wheel.prevent="onWheel"
|
||||
@touchstart.passive="onTouchStart"
|
||||
@touchmove.passive="onTouchMove"
|
||||
@touchend.passive="onTouchEnd"
|
||||
>
|
||||
<div class="timeline__track" :style="{ width: trackWidth + 'px' }">
|
||||
<!-- GlowDots — only visible ones rendered -->
|
||||
<GlowDot
|
||||
v-for="{ event, globalIndex } in visibleEvents"
|
||||
:key="event.id"
|
||||
:event="event"
|
||||
:x="getEventX(globalIndex)"
|
||||
:is-ghost="event.id === '__ghost__'"
|
||||
:selected="eventsStore.selectedEventId === event.id"
|
||||
@select="$emit('dotSelect', event.id)"
|
||||
/>
|
||||
|
||||
<!-- Month labels — only visible -->
|
||||
<div class="timeline__labels">
|
||||
<div
|
||||
v-for="{ label, globalIndex } in visibleLabels"
|
||||
:key="label.key"
|
||||
class="timeline__month"
|
||||
:style="{ left: getEventX(globalIndex) + 'px' }"
|
||||
:class="{ 'timeline__month--active': label.key === activeLabel }"
|
||||
@click="scrollToIndex(globalIndex)"
|
||||
>
|
||||
{{ label.month }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sticky year labels with nav arrows (outside scroll container) -->
|
||||
<div class="timeline__sticky-years">
|
||||
<TransitionGroup name="year-fade">
|
||||
<div
|
||||
v-for="label in stickyYearLabels"
|
||||
:key="label.year"
|
||||
class="timeline__sticky-year-group"
|
||||
:style="{ left: label.left + 'px' }"
|
||||
>
|
||||
<button
|
||||
v-if="label.hasPrev"
|
||||
class="timeline__year-arrow timeline__year-arrow--prev"
|
||||
@click="scrollToYearCenter(label.year - 1)"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 10 10"><path d="M7 1L3 5l4 4" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</button>
|
||||
<span class="timeline__sticky-year" @click="scrollToYearCenter(label.year)">
|
||||
{{ label.year }}
|
||||
</span>
|
||||
<button
|
||||
v-if="label.hasNext"
|
||||
class="timeline__year-arrow timeline__year-arrow--next"
|
||||
@click="scrollToYearCenter(label.year + 1)"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 10 10"><path d="M3 1l4 4-4 4" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import { useEventsStore } from 'stores/events'
|
||||
import GlowDot from 'components/GlowDot.vue'
|
||||
|
||||
const emit = defineEmits(['dotSelect', 'viewUpdate'])
|
||||
const eventsStore = useEventsStore()
|
||||
const timelineRef = ref(null)
|
||||
const scrollLeft = ref(0)
|
||||
const viewportWidth = ref(400)
|
||||
const containerHeight = ref(400)
|
||||
|
||||
// Zoom: 1.0 = default, range 0.4–3.0
|
||||
const zoomLevel = ref(1)
|
||||
const MIN_ZOOM = 0.4
|
||||
const MAX_ZOOM = 3.0
|
||||
const ZOOM_STEP = 0.08
|
||||
|
||||
// Spacing: ~4 events visible at a time, scaled by zoom
|
||||
const BASE_SPACING = computed(() => viewportWidth.value / 2.5)
|
||||
const EVENT_SPACING = computed(() => BASE_SPACING.value * zoomLevel.value)
|
||||
const PADDING = computed(() => viewportWidth.value / 2)
|
||||
|
||||
// Display events: sorted events + ghost when creating
|
||||
const showGhost = computed(() => eventsStore.panelOpen && !eventsStore.editingEventId)
|
||||
const displayEvents = computed(() => {
|
||||
const sorted = [...eventsStore.sortedEvents]
|
||||
if (!showGhost.value) return sorted
|
||||
const ghost = eventsStore.ghostEvent
|
||||
const ghostDate = new Date(ghost.date)
|
||||
const insertIdx = sorted.findIndex((e) => new Date(e.date) > ghostDate)
|
||||
if (insertIdx === -1) {
|
||||
sorted.push(ghost)
|
||||
} else {
|
||||
sorted.splice(insertIdx, 0, ghost)
|
||||
}
|
||||
return sorted
|
||||
})
|
||||
|
||||
// Track width
|
||||
const trackWidth = computed(() => {
|
||||
const count = displayEvents.value.length
|
||||
if (count === 0) return viewportWidth.value
|
||||
return PADDING.value * 2 + (count - 1) * EVENT_SPACING.value
|
||||
})
|
||||
|
||||
// X position for event at given index
|
||||
function getEventX(index) {
|
||||
return PADDING.value + index * EVENT_SPACING.value
|
||||
}
|
||||
|
||||
// Month names
|
||||
const MONTHS = ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
|
||||
|
||||
// One label per event showing its month
|
||||
const eventLabels = computed(() => {
|
||||
return displayEvents.value.map((event, index) => {
|
||||
const d = new Date(event.date)
|
||||
return {
|
||||
key: `${event.id}-${index}`,
|
||||
month: MONTHS[d.getMonth()],
|
||||
year: d.getFullYear(),
|
||||
fullMonth: `${d.getFullYear()}-${d.getMonth()}`
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// Year ranges — for each year, the world-space X range of its events
|
||||
const yearRanges = computed(() => {
|
||||
const ranges = []
|
||||
const events = displayEvents.value
|
||||
if (events.length === 0) return ranges
|
||||
|
||||
let currentYear = new Date(events[0].date).getFullYear()
|
||||
let startIdx = 0
|
||||
|
||||
for (let i = 1; i < events.length; i++) {
|
||||
const year = new Date(events[i].date).getFullYear()
|
||||
if (year !== currentYear) {
|
||||
ranges.push({ year: currentYear, startX: getEventX(startIdx), endX: getEventX(i - 1) })
|
||||
currentYear = year
|
||||
startIdx = i
|
||||
}
|
||||
}
|
||||
ranges.push({ year: currentYear, startX: getEventX(startIdx), endX: getEventX(events.length - 1) })
|
||||
return ranges
|
||||
})
|
||||
|
||||
// All years that exist in the data (for prev/next navigation)
|
||||
const allYears = computed(() => yearRanges.value.map(r => r.year))
|
||||
|
||||
// Sticky year labels — positioned relative to viewport, clamped to edges
|
||||
const YEAR_MARGIN = 24
|
||||
const stickyYearLabels = computed(() => {
|
||||
const sl = scrollLeft.value
|
||||
const vw = viewportWidth.value
|
||||
const viewLeft = sl
|
||||
const viewRight = sl + vw
|
||||
const years = allYears.value
|
||||
|
||||
// Find years whose event range overlaps the viewport
|
||||
const visible = yearRanges.value.filter(r => r.endX >= viewLeft && r.startX <= viewRight)
|
||||
if (visible.length === 0) return []
|
||||
|
||||
function makeLabel(year, left) {
|
||||
const idx = years.indexOf(year)
|
||||
return { year, left, hasPrev: idx > 0, hasNext: idx < years.length - 1 }
|
||||
}
|
||||
|
||||
if (visible.length === 1) {
|
||||
const r = visible[0]
|
||||
const visStart = Math.max(r.startX, viewLeft)
|
||||
const visEnd = Math.min(r.endX, viewRight)
|
||||
const center = (visStart + visEnd) / 2 - sl
|
||||
const clamped = Math.max(YEAR_MARGIN, Math.min(vw - YEAR_MARGIN, center))
|
||||
return [makeLabel(r.year, clamped)]
|
||||
}
|
||||
|
||||
// Multiple years: first pins left, last pins right, middles float naturally
|
||||
const result = []
|
||||
for (let i = 0; i < visible.length; i++) {
|
||||
const r = visible[i]
|
||||
const visStart = Math.max(r.startX, viewLeft)
|
||||
const visEnd = Math.min(r.endX, viewRight)
|
||||
const center = (visStart + visEnd) / 2 - sl
|
||||
|
||||
let pos
|
||||
if (i === 0) {
|
||||
pos = Math.max(YEAR_MARGIN, Math.min(vw / 2 - 30, center))
|
||||
} else if (i === visible.length - 1) {
|
||||
pos = Math.min(vw - YEAR_MARGIN, Math.max(vw / 2 + 30, center))
|
||||
} else {
|
||||
pos = Math.max(YEAR_MARGIN + 60, Math.min(vw - YEAR_MARGIN - 60, center))
|
||||
}
|
||||
result.push(makeLabel(r.year, pos))
|
||||
}
|
||||
return result
|
||||
})
|
||||
|
||||
// Virtualization: only render events near the viewport
|
||||
const VIS_BUFFER = 2
|
||||
|
||||
const visibleRange = computed(() => {
|
||||
const total = displayEvents.value.length
|
||||
if (total === 0) return { start: 0, end: -1 }
|
||||
const spacing = EVENT_SPACING.value
|
||||
if (spacing <= 0) return { start: 0, end: total - 1 }
|
||||
const start = Math.max(0,
|
||||
Math.floor((scrollLeft.value - PADDING.value) / spacing) - VIS_BUFFER
|
||||
)
|
||||
const end = Math.min(total - 1,
|
||||
Math.ceil((scrollLeft.value + viewportWidth.value - PADDING.value) / spacing) + VIS_BUFFER
|
||||
)
|
||||
return { start, end }
|
||||
})
|
||||
|
||||
const visibleEvents = computed(() => {
|
||||
const { start, end } = visibleRange.value
|
||||
if (end < start) return []
|
||||
return displayEvents.value.slice(start, end + 1).map((event, i) => ({
|
||||
event,
|
||||
globalIndex: start + i
|
||||
}))
|
||||
})
|
||||
|
||||
const visibleLabels = computed(() => {
|
||||
const { start, end } = visibleRange.value
|
||||
if (end < start) return []
|
||||
return eventLabels.value.slice(start, end + 1).map((label, i) => ({
|
||||
label,
|
||||
globalIndex: start + i
|
||||
}))
|
||||
})
|
||||
|
||||
// Active label — closest event to center of viewport (O(1) via index)
|
||||
const activeLabel = computed(() => {
|
||||
const total = displayEvents.value.length
|
||||
if (total === 0) return null
|
||||
const centerX = scrollLeft.value + viewportWidth.value / 2
|
||||
const spacing = EVENT_SPACING.value
|
||||
if (spacing <= 0) return null
|
||||
const index = Math.round((centerX - PADDING.value) / spacing)
|
||||
const clamped = Math.max(0, Math.min(total - 1, index))
|
||||
return eventLabels.value[clamped]?.key ?? null
|
||||
})
|
||||
|
||||
function onScroll() {
|
||||
if (timelineRef.value) {
|
||||
scrollLeft.value = timelineRef.value.scrollLeft
|
||||
}
|
||||
}
|
||||
|
||||
function scrollToIndex(index) {
|
||||
if (!timelineRef.value) return
|
||||
const x = getEventX(index)
|
||||
timelineRef.value.scrollTo({
|
||||
left: x - viewportWidth.value / 2,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
|
||||
function scrollToYearCenter(year) {
|
||||
if (!timelineRef.value) return
|
||||
// Find exact year, or nearest in the requested direction
|
||||
let range = yearRanges.value.find(r => r.year === year)
|
||||
if (!range) {
|
||||
// Find closest year
|
||||
const sorted = [...yearRanges.value].sort((a, b) => Math.abs(a.year - year) - Math.abs(b.year - year))
|
||||
range = sorted[0]
|
||||
}
|
||||
if (!range) return
|
||||
const centerX = (range.startX + range.endX) / 2
|
||||
timelineRef.value.scrollTo({
|
||||
left: centerX - viewportWidth.value / 2,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
|
||||
function updateViewportWidth() {
|
||||
if (timelineRef.value) {
|
||||
viewportWidth.value = timelineRef.value.clientWidth || 400
|
||||
containerHeight.value = timelineRef.value.clientHeight || 400
|
||||
}
|
||||
}
|
||||
|
||||
// Zoom while keeping the viewport center stable
|
||||
function applyZoom(newZoom, centerClientX) {
|
||||
const el = timelineRef.value
|
||||
if (!el) return
|
||||
|
||||
// Default center to viewport middle
|
||||
const rect = el.getBoundingClientRect()
|
||||
const cx = centerClientX !== undefined ? centerClientX - rect.left : viewportWidth.value / 2
|
||||
|
||||
// World-space X under the center point before zoom
|
||||
const worldXBefore = el.scrollLeft + cx
|
||||
|
||||
// Ratio of old spacing to new
|
||||
const oldZoom = zoomLevel.value
|
||||
const ratio = newZoom / oldZoom
|
||||
|
||||
zoomLevel.value = newZoom
|
||||
|
||||
// After Vue updates, restore scroll so the same world point stays under center
|
||||
nextTick(() => {
|
||||
el.scrollLeft = worldXBefore * ratio - cx
|
||||
scrollLeft.value = el.scrollLeft
|
||||
})
|
||||
}
|
||||
|
||||
// Desktop: Ctrl+wheel or pinch on trackpad (both fire wheel with ctrlKey)
|
||||
function onWheel(e) {
|
||||
if (e.ctrlKey || e.metaKey) {
|
||||
// Pinch / Ctrl+scroll → zoom
|
||||
const delta = -e.deltaY * ZOOM_STEP * 0.1
|
||||
const newZoom = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, zoomLevel.value + delta))
|
||||
if (newZoom !== zoomLevel.value) {
|
||||
applyZoom(newZoom, e.clientX)
|
||||
}
|
||||
} else {
|
||||
// Normal scroll — let the browser handle horizontal scroll
|
||||
const el = timelineRef.value
|
||||
if (el) {
|
||||
el.scrollLeft += e.deltaX || e.deltaY
|
||||
scrollLeft.value = el.scrollLeft
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Touch: pinch-to-zoom
|
||||
let touchStartDist = 0
|
||||
let touchStartZoom = 1
|
||||
|
||||
function getTouchDist(touches) {
|
||||
const dx = touches[0].clientX - touches[1].clientX
|
||||
const dy = touches[0].clientY - touches[1].clientY
|
||||
return Math.sqrt(dx * dx + dy * dy)
|
||||
}
|
||||
|
||||
function onTouchStart(e) {
|
||||
if (e.touches.length === 2) {
|
||||
touchStartDist = getTouchDist(e.touches)
|
||||
touchStartZoom = zoomLevel.value
|
||||
}
|
||||
}
|
||||
|
||||
function onTouchMove(e) {
|
||||
if (e.touches.length === 2) {
|
||||
const dist = getTouchDist(e.touches)
|
||||
const scale = dist / touchStartDist
|
||||
const newZoom = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, touchStartZoom * scale))
|
||||
const cx = (e.touches[0].clientX + e.touches[1].clientX) / 2
|
||||
applyZoom(newZoom, cx)
|
||||
}
|
||||
}
|
||||
|
||||
function onTouchEnd() {
|
||||
touchStartDist = 0
|
||||
}
|
||||
|
||||
// Scroll to center on the last event on mount
|
||||
let resizeObserver = null
|
||||
// Emit timeline state so the layout can position shader points
|
||||
function emitViewState() {
|
||||
const { start, end } = visibleRange.value
|
||||
emit('viewUpdate', {
|
||||
scrollLeft: scrollLeft.value,
|
||||
viewportWidth: viewportWidth.value,
|
||||
containerHeight: containerHeight.value,
|
||||
visibleStart: start,
|
||||
visibleEnd: end,
|
||||
events: displayEvents.value.map((e, i) => ({
|
||||
emotion: e.emotion,
|
||||
x: getEventX(i),
|
||||
color: eventsStore.getGlowColor(e)
|
||||
}))
|
||||
})
|
||||
}
|
||||
|
||||
watch(
|
||||
[scrollLeft, viewportWidth, containerHeight, displayEvents, zoomLevel],
|
||||
emitViewState,
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
onMounted(async () => {
|
||||
await nextTick()
|
||||
if (!timelineRef.value) return
|
||||
updateViewportWidth()
|
||||
|
||||
const events = displayEvents.value
|
||||
if (events.length === 0) return
|
||||
const lastX = getEventX(events.length - 1)
|
||||
timelineRef.value.scrollLeft = lastX - viewportWidth.value / 2
|
||||
scrollLeft.value = timelineRef.value.scrollLeft
|
||||
|
||||
// Update viewport width on resize
|
||||
resizeObserver = new ResizeObserver(updateViewportWidth)
|
||||
resizeObserver.observe(timelineRef.value)
|
||||
|
||||
// Emit initial state
|
||||
emitViewState()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
resizeObserver?.disconnect()
|
||||
})
|
||||
|
||||
function zoomIn() {
|
||||
const newZoom = Math.min(MAX_ZOOM, zoomLevel.value + ZOOM_STEP * 2)
|
||||
if (newZoom !== zoomLevel.value) applyZoom(newZoom)
|
||||
}
|
||||
|
||||
function zoomOut() {
|
||||
const newZoom = Math.max(MIN_ZOOM, zoomLevel.value - ZOOM_STEP * 2)
|
||||
if (newZoom !== zoomLevel.value) applyZoom(newZoom)
|
||||
}
|
||||
|
||||
defineExpose({ timelineRef, zoomIn, zoomOut, zoomLevel, MIN_ZOOM, MAX_ZOOM })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.timeline-container {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 60px;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.timeline::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.timeline__track {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Month labels */
|
||||
.timeline__labels {
|
||||
position: absolute;
|
||||
bottom: 44px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.timeline__month {
|
||||
position: absolute;
|
||||
transform: translateX(-50%);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
opacity: 0.35;
|
||||
transition: opacity 0.3s ease, font-size 0.3s ease, font-weight 0.3s ease;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.timeline__month--active {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Sticky year labels — positioned outside the scroll container */
|
||||
.timeline__sticky-years {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 32px;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.timeline__sticky-year-group {
|
||||
position: absolute;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
pointer-events: auto;
|
||||
transition: left 0.15s ease-out;
|
||||
}
|
||||
|
||||
.timeline__sticky-year {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
opacity: 0.6;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.timeline__year-arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: inherit;
|
||||
opacity: 0.45;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: opacity 0.2s ease, background 0.2s ease;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.timeline__year-arrow:active {
|
||||
opacity: 0.8;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
/* TransitionGroup animations */
|
||||
.year-fade-enter-active,
|
||||
.year-fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.year-fade-enter-from,
|
||||
.year-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
278
frontend/_src/components/UserMenu.vue
Normal file
278
frontend/_src/components/UserMenu.vue
Normal file
|
|
@ -0,0 +1,278 @@
|
|||
<template>
|
||||
<Transition name="slide-right">
|
||||
<div v-if="open" class="user-menu glass--panel">
|
||||
<!-- User header -->
|
||||
<div class="user-menu__header">
|
||||
<div class="user-menu__avatar">
|
||||
<span>K</span>
|
||||
</div>
|
||||
<div class="user-menu__info">
|
||||
<div class="user-menu__name">k-adam</div>
|
||||
<div class="user-menu__handle">@k-adam</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="user-menu__divider" />
|
||||
|
||||
<!-- Menu items -->
|
||||
<div class="user-menu__items">
|
||||
<button class="user-menu__item" @click="$emit('navigate', 'upgrade')">
|
||||
<q-icon name="auto_awesome" size="20px" />
|
||||
<span>Plan upgraden</span>
|
||||
</button>
|
||||
<button class="user-menu__item" @click="$emit('navigate', 'personalize')">
|
||||
<q-icon name="palette" size="20px" />
|
||||
<span>Personalisierung</span>
|
||||
</button>
|
||||
<button class="user-menu__item" @click="$emit('navigate', 'settings')">
|
||||
<q-icon name="settings" size="20px" />
|
||||
<span>Einstellungen</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="user-menu__divider" />
|
||||
|
||||
<!-- Help with submenu -->
|
||||
<div class="user-menu__items">
|
||||
<button
|
||||
class="user-menu__item"
|
||||
:class="{ 'user-menu__item--active': helpOpen }"
|
||||
@click="helpOpen = !helpOpen"
|
||||
>
|
||||
<q-icon name="support_agent" size="20px" />
|
||||
<span>Hilfe</span>
|
||||
<q-icon
|
||||
name="chevron_right"
|
||||
size="18px"
|
||||
class="user-menu__chevron"
|
||||
:class="{ 'user-menu__chevron--open': helpOpen }"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<!-- Help sub-items -->
|
||||
<Transition name="expand">
|
||||
<div v-if="helpOpen" class="user-menu__sub">
|
||||
<button class="user-menu__item user-menu__item--sub" @click="$emit('navigate', 'help-center')">
|
||||
<q-icon name="help_outline" size="18px" />
|
||||
<span>Hilfecenter</span>
|
||||
</button>
|
||||
<button class="user-menu__item user-menu__item--sub" @click="$emit('navigate', 'release-notes')">
|
||||
<q-icon name="new_releases" size="18px" />
|
||||
<span>Release-Hinweise</span>
|
||||
</button>
|
||||
<button class="user-menu__item user-menu__item--sub" @click="$emit('navigate', 'terms')">
|
||||
<q-icon name="description" size="18px" />
|
||||
<span>AGB und Richtlinien</span>
|
||||
</button>
|
||||
<button class="user-menu__item user-menu__item--sub" @click="$emit('navigate', 'report-bug')">
|
||||
<q-icon name="bug_report" size="18px" />
|
||||
<span>Fehler melden</span>
|
||||
</button>
|
||||
<button class="user-menu__item user-menu__item--sub" @click="$emit('navigate', 'download')">
|
||||
<q-icon name="download" size="18px" />
|
||||
<span>Apps herunterladen</span>
|
||||
</button>
|
||||
<button class="user-menu__item user-menu__item--sub" @click="$emit('navigate', 'shortcuts')">
|
||||
<q-icon name="keyboard" size="18px" />
|
||||
<span>Tastaturkuerzel</span>
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
<div class="user-menu__divider" />
|
||||
|
||||
<div class="user-menu__items">
|
||||
<button class="user-menu__item" @click="$emit('navigate', 'logout')">
|
||||
<q-icon name="logout" size="20px" />
|
||||
<span>Abmelden</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Footer: user + plan -->
|
||||
<div class="user-menu__footer">
|
||||
<div class="user-menu__avatar user-menu__avatar--sm">
|
||||
<span>K</span>
|
||||
</div>
|
||||
<div class="user-menu__info">
|
||||
<div class="user-menu__name user-menu__name--sm">Kevin Ada</div>
|
||||
<div class="user-menu__plan">Free</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps({ open: { type: Boolean, default: false } })
|
||||
defineEmits(['close', 'navigate'])
|
||||
|
||||
const helpOpen = ref(false)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.user-menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 25;
|
||||
width: 280px;
|
||||
max-width: 85vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 20px 0 0 20px;
|
||||
border-top: none;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.08);
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* User header */
|
||||
.user-menu__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 24px 20px 16px;
|
||||
}
|
||||
|
||||
.user-menu__avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: #e05a33;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-menu__avatar--sm {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.user-menu__info {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-menu__name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.user-menu__name--sm {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.user-menu__handle {
|
||||
font-size: 12px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.user-menu__plan {
|
||||
font-size: 11px;
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
/* Divider */
|
||||
.user-menu__divider {
|
||||
height: 1px;
|
||||
margin: 4px 16px;
|
||||
background: rgba(128, 128, 128, 0.15);
|
||||
}
|
||||
|
||||
/* Menu items */
|
||||
.user-menu__items {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.user-menu__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: none;
|
||||
background: none;
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
transition: background 0.15s ease;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.user-menu__item:hover,
|
||||
.user-menu__item--active {
|
||||
background: rgba(128, 128, 128, 0.12);
|
||||
}
|
||||
|
||||
.user-menu__item:active {
|
||||
background: rgba(128, 128, 128, 0.2);
|
||||
}
|
||||
|
||||
.user-menu__item--sub {
|
||||
padding-left: 24px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.user-menu__chevron {
|
||||
margin-left: auto;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.user-menu__chevron--open {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/* Help sub-items */
|
||||
.user-menu__sub {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.user-menu__footer {
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 16px 20px 24px;
|
||||
border-top: 1px solid rgba(128, 128, 128, 0.1);
|
||||
}
|
||||
|
||||
/* Slide-right transition */
|
||||
.slide-right-enter-active,
|
||||
.slide-right-leave-active {
|
||||
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
|
||||
.slide-right-enter-from,
|
||||
.slide-right-leave-to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
/* Expand transition for help sub-menu */
|
||||
.expand-enter-active,
|
||||
.expand-leave-active {
|
||||
transition: max-height 0.25s ease, opacity 0.2s ease;
|
||||
max-height: 300px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.expand-enter-from,
|
||||
.expand-leave-to {
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
32
frontend/_src/components/UserMenuButton.vue
Normal file
32
frontend/_src/components/UserMenuButton.vue
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<button class="user-menu-btn glass--button" @click="$emit('openMenu')">
|
||||
<q-icon name="person_outline" size="22px" :color="isDark ? 'white' : 'grey-8'" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useQuasar } from 'quasar'
|
||||
|
||||
defineEmits(['openMenu'])
|
||||
|
||||
const $q = useQuasar()
|
||||
const isDark = computed(() => $q.dark.isActive)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.user-menu-btn {
|
||||
position: fixed;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
z-index: 30;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
134
frontend/_src/components/ZoomControl.vue
Normal file
134
frontend/_src/components/ZoomControl.vue
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
<template>
|
||||
<div class="zoom-control glass--button">
|
||||
<button class="zoom-control__btn" @click="$emit('zoomIn')">
|
||||
<q-icon name="add" size="18px" />
|
||||
</button>
|
||||
<div class="zoom-control__track" ref="trackRef" @pointerdown="onTrackDown">
|
||||
<div class="zoom-control__fill" :style="{ height: fillPercent + '%' }" />
|
||||
<div class="zoom-control__thumb" :style="{ bottom: fillPercent + '%' }" />
|
||||
</div>
|
||||
<button class="zoom-control__btn" @click="$emit('zoomOut')">
|
||||
<q-icon name="remove" size="18px" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
zoom: { type: Number, default: 1 },
|
||||
min: { type: Number, default: 0.4 },
|
||||
max: { type: Number, default: 3.0 }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['zoomIn', 'zoomOut', 'zoomTo'])
|
||||
const trackRef = ref(null)
|
||||
|
||||
const fillPercent = computed(() => {
|
||||
return ((props.zoom - props.min) / (props.max - props.min)) * 100
|
||||
})
|
||||
|
||||
function onTrackDown(e) {
|
||||
if (!trackRef.value) return
|
||||
updateFromPointer(e)
|
||||
|
||||
const onMove = (ev) => updateFromPointer(ev)
|
||||
const onUp = () => {
|
||||
window.removeEventListener('pointermove', onMove)
|
||||
window.removeEventListener('pointerup', onUp)
|
||||
}
|
||||
window.addEventListener('pointermove', onMove)
|
||||
window.addEventListener('pointerup', onUp)
|
||||
}
|
||||
|
||||
function updateFromPointer(e) {
|
||||
if (!trackRef.value) return
|
||||
const rect = trackRef.value.getBoundingClientRect()
|
||||
// Bottom = min, top = max → invert Y
|
||||
const ratio = 1 - Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height))
|
||||
const newZoom = props.min + ratio * (props.max - props.min)
|
||||
emit('zoomTo', newZoom)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.zoom-control {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 6px 4px;
|
||||
border-radius: 22px;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.zoom-control__btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
background: none;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
padding: 0;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.zoom-control__btn:active {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.zoom-control__track {
|
||||
position: relative;
|
||||
width: 3px;
|
||||
height: 80px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.zoom-control__fill {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-radius: 2px;
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.zoom-control__thumb {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
transform: translate(-50%, 50%);
|
||||
pointer-events: none;
|
||||
box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
/* Light mode adjustments */
|
||||
.body--light .zoom-control__track {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.body--light .zoom-control__fill {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.body--light .zoom-control__thumb {
|
||||
background: #333;
|
||||
box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.body--light .zoom-control__btn:active {
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue