Kevin Adametz
522deffa1a
Elf universelle Hintergründe von grafisch bis fotografisch (Tinte, Goldstaub, Horizont, Kohle, Leinen, Nebel, Dämmerung, Nachthimmel, Tusche, Papier, Aquarell) plus vier v2-Fassungen zur Abstimmung, alle 2048² JPEG mit 320er Vorschauen (7 MB statt 48 MB). Auswahl, Reihenfolge und Helligkeit stehen in src/config/backgrounds.js; der Picker zeigt Name und aktuelle Wahl, das Logo folgt der Bildhelligkeit, Presets zeigen auf die neuen Bilder, alte Pfade werden beim Laden auf den Nachfolger umgeschrieben. Der Service Worker cacht nur die Vorschauen vor. Werkzeuge zum Neu-Rendern (SVG-Builder, Gemini-Prompts) liegen in dev/tools/backgrounds, die Sichtungs-Renders bleiben lokal (gitignore). Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
58 lines
1.6 KiB
Vue
58 lines
1.6 KiB
Vue
<template>
|
|
<img
|
|
:src="src"
|
|
:height="height"
|
|
:style="{ height: `${height}px`, width: 'auto' }"
|
|
alt="That's Me"
|
|
class="brand-logo"
|
|
draggable="false"
|
|
/>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import { useQuasar } from 'quasar'
|
|
import { useSettingsStore } from 'stores/settings'
|
|
import { logoVariantForBackground } from 'src/utils/brand'
|
|
import { findBackgroundImage } from 'src/config/backgrounds'
|
|
import logoPositive from 'assets/logo-thatsme-positiv.svg'
|
|
import logoNegative from 'assets/logo-thatsme-negativ.svg'
|
|
|
|
/**
|
|
* The wordmark, in the variant that reads on the current ground.
|
|
* `variant="auto"` follows the LifeWave background colours; the login page
|
|
* and other fixed surfaces pass an explicit variant.
|
|
*/
|
|
const props = defineProps({
|
|
variant: {
|
|
type: String,
|
|
default: 'auto',
|
|
validator: value => ['auto', 'positive', 'negative'].includes(value)
|
|
},
|
|
height: { type: Number, default: 26 }
|
|
})
|
|
|
|
const $q = useQuasar()
|
|
const settingsStore = useSettingsStore()
|
|
|
|
const resolvedVariant = computed(() => {
|
|
if (props.variant !== 'auto') return props.variant
|
|
const fl = settingsStore.floatingLines
|
|
return logoVariantForBackground({
|
|
bgEdge: fl.bgEdge,
|
|
bgCenter: fl.bgCenter,
|
|
backgroundImage: fl.backgroundImage,
|
|
imageTone: findBackgroundImage(fl.backgroundImage)?.tone ?? null,
|
|
isDark: $q.dark.isActive
|
|
})
|
|
})
|
|
|
|
const src = computed(() => (resolvedVariant.value === 'positive' ? logoPositive : logoNegative))
|
|
</script>
|
|
|
|
<style scoped>
|
|
.brand-logo {
|
|
display: block;
|
|
transition: opacity 0.25s ease;
|
|
}
|
|
</style>
|