diff --git a/src/components/SheetCanvas.vue b/src/components/SheetCanvas.vue
index 4c90d41..92292df 100644
--- a/src/components/SheetCanvas.vue
+++ b/src/components/SheetCanvas.vue
@@ -109,13 +109,6 @@ function selectObj(id: string) {
-
-
- {{ Math.round(zoom * 100) }}%
-
-
-
-
Datei ablegen (.json .csv .xlsx)
@@ -170,34 +163,6 @@ function selectObj(id: string) {
height: 62px;
opacity: 0.9;
}
-.zoom-ctl {
- position: absolute;
- right: 16px;
- bottom: 16px;
- display: inline-flex;
- align-items: center;
- gap: 6px;
- padding: 4px 8px;
- background: var(--surface);
- border: 1px solid var(--border);
- border-radius: 999px;
- box-shadow: var(--shadow);
- font-size: 12px;
- font-variant-numeric: tabular-nums;
- z-index: 15;
-}
-.zoom-ctl button {
- border: 1px solid var(--border);
- background: var(--surface);
- border-radius: 6px;
- width: 22px;
- height: 22px;
- cursor: pointer;
-}
-.zoom-ctl button.fit {
- width: auto;
- padding: 0 8px;
-}
.drop {
position: absolute;
right: 24px;
diff --git a/src/components/StatusBar.vue b/src/components/StatusBar.vue
index 44d2941..0b5acaf 100644
--- a/src/components/StatusBar.vue
+++ b/src/components/StatusBar.vue
@@ -7,6 +7,9 @@ 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;
@@ -16,6 +19,12 @@ const fmt = (n: number) =>
Mittel {{ fmt(agg.avg) }}
Anzahl {{ agg.count }}
Zellen {{ agg.cells }}
+
+
+
+
+
+
@@ -47,4 +56,35 @@ const fmt = (n: number) =>
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;
+}