wkhandClaude Opus 5.5
e14bada114
The app becomes a Rails 8 application; the Vue frontend moves to app/frontend and is served through vite_rails. - Without an account documents stay in the browser (IndexedDB). Sign-in is by magic link or the 6-digit code from the same mail; afterwards local documents can be uploaded into the account. - Server documents (/d/<id>) with versioned saves and a single-editor lock per browser tab; others see them read-only and follow by polling. - Sharing via link (works without an account) and via e-mail invitation, roles viewer/editor; the owner manages links and people. - Store gains a read-only mode that blocks all content changes. - Solid Queue, Cache and Cable share the one PostgreSQL database. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
91 lines
2.3 KiB
Vue
91 lines
2.3 KiB
Vue
<script setup lang="ts">
|
||
import { computed } from 'vue';
|
||
import { useDocument } from '../store/document';
|
||
import { formatValue } from '../store/format';
|
||
|
||
const store = useDocument();
|
||
const agg = computed(() => store.selectionAggregate.value);
|
||
const fmt = (n: number) =>
|
||
formatValue(Math.round(n * 1e6) / 1e6, store.activeLocale.value);
|
||
|
||
const zoom = computed(() => store.activeZoom.value);
|
||
const setZoom = store.setZoom;
|
||
</script>
|
||
|
||
<template>
|
||
<div class="status-bar">
|
||
<span class="range">{{ store.selectionRangeName.value }}</span>
|
||
<span v-if="agg.count > 0" class="metric">Summe <b>{{ fmt(agg.sum) }}</b></span>
|
||
<span v-if="agg.count > 0" class="metric">Mittel <b>{{ fmt(agg.avg) }}</b></span>
|
||
<span class="metric">Anzahl <b>{{ agg.count }}</b></span>
|
||
<span class="metric dim">Zellen {{ agg.cells }}</span>
|
||
<span class="divider" />
|
||
<div class="zoom-ctl" title="Zoom (dieses Blatt)">
|
||
<button @click="setZoom(zoom - 0.1)">−</button>
|
||
<button class="fit" @click="setZoom(1)">{{ Math.round(zoom * 100) }}%</button>
|
||
<button @click="setZoom(zoom + 0.1)">＋</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* shares one row with SheetTabs.vue (see App.vue's .bottom-bar) -- pinned to
|
||
the right, scrolls internally rather than wrapping if it ever runs out of
|
||
room, so the combined row always stays a single line. */
|
||
.status-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 0 1 auto;
|
||
gap: 4px 14px;
|
||
padding: 5px 14px;
|
||
font-size: 12px;
|
||
color: var(--text-dim);
|
||
font-variant-numeric: tabular-nums;
|
||
white-space: nowrap;
|
||
overflow-x: auto;
|
||
scrollbar-width: thin;
|
||
}
|
||
.metric b {
|
||
color: var(--text);
|
||
font-weight: 600;
|
||
}
|
||
.metric.dim {
|
||
opacity: 0.7;
|
||
}
|
||
.range {
|
||
font-weight: 600;
|
||
color: var(--text);
|
||
}
|
||
.divider {
|
||
width: 1px;
|
||
align-self: stretch;
|
||
background: var(--border);
|
||
flex: none;
|
||
}
|
||
.zoom-ctl {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
flex: none;
|
||
}
|
||
.zoom-ctl button {
|
||
border: 1px solid var(--border);
|
||
background: var(--surface);
|
||
border-radius: 6px;
|
||
width: 20px;
|
||
height: 20px;
|
||
line-height: 1;
|
||
cursor: pointer;
|
||
color: var(--text-dim);
|
||
}
|
||
.zoom-ctl button:hover {
|
||
border-color: var(--accent);
|
||
color: var(--accent);
|
||
}
|
||
.zoom-ctl button.fit {
|
||
width: auto;
|
||
padding: 0 7px;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
</style>
|