devops
b093b0c4b5
My rsync --delete based deploy sync overwrote the working tree with a stale local copy and accidentally reverted commit50d95fa(V2 Design-Fundament, task ea7c2063) — new ui/ components deleted, token/color work in dashboard/v2 and nexus-tokens.css rolled back. This restores all 17 files exactly from 50d95fa; no overlap with the modal rework files (TaskBoardView, tasks store, BoardCard), which stay as committed in2ee1fe9. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
73 lines
2.0 KiB
Vue
73 lines
2.0 KiB
Vue
<script setup lang="ts">
|
||
/**
|
||
* StatusDot — Nexus V2 animierter Status-Indikator
|
||
*
|
||
* Kapselt die pulse-keyframes aus nexus-tokens.css.
|
||
* Status-Farben und Pulse-Animationen stammen ausschließlich aus Tokens.
|
||
*
|
||
* Props:
|
||
* status – 'work' | 'think' | 'idle' | 'block' | 'queue'
|
||
* size – 'sm' (8px) | 'md' (9px) | 'lg' (12px), default 'md'
|
||
* pulse – Animation aktiv (default: true für work/think/block)
|
||
* label – Text-Label rechts neben dem Dot (optional)
|
||
*/
|
||
|
||
withDefaults(defineProps<{
|
||
status: 'work' | 'think' | 'idle' | 'block' | 'queue'
|
||
size?: 'sm' | 'md' | 'lg'
|
||
pulse?: boolean
|
||
label?: string
|
||
}>(), {
|
||
size: 'md',
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<span class="status-dot-wrapper">
|
||
<span
|
||
class="dot"
|
||
:class="[status, size, { pulse: pulse !== false }]"
|
||
:aria-label="label || status"
|
||
role="status"
|
||
></span>
|
||
<span v-if="label" class="dot-label">{{ label }}</span>
|
||
</span>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.status-dot-wrapper {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.dot {
|
||
display: inline-block;
|
||
border-radius: 50%;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.dot.sm { width: 7px; height: 7px; }
|
||
.dot.md { width: 9px; height: 9px; }
|
||
.dot.lg { width: 12px; height: 12px; }
|
||
|
||
/* Farben aus nexus-tokens.css — Single Source of Truth */
|
||
.dot.work { background: var(--st-work); }
|
||
.dot.think { background: var(--st-think); }
|
||
.dot.idle { background: var(--st-idle); }
|
||
.dot.block { background: var(--st-block); }
|
||
.dot.queue { background: var(--st-queue); }
|
||
|
||
/* Pulse-Animationen (Keyframes in tokens.css definiert) */
|
||
.dot.work.pulse { animation: pulse-work 1.8s infinite; box-shadow: 0 0 0 0 rgba(61,220,151,.55); }
|
||
.dot.think.pulse { animation: pulse-think 1.8s infinite; box-shadow: 0 0 0 0 rgba(52,214,245,.55); }
|
||
.dot.block.pulse { animation: pulse-block 1.4s infinite; box-shadow: 0 0 0 0 rgba(251,113,133,.55); }
|
||
|
||
.dot-label {
|
||
font-size: 12.5px;
|
||
font-weight: 600;
|
||
color: var(--tx-2);
|
||
white-space: nowrap;
|
||
}
|
||
</style>
|