diff --git a/README.md b/README.md index 5c7dd05..afad937 100644 --- a/README.md +++ b/README.md @@ -180,7 +180,7 @@ Point-Mode ändert nie die Tabellen-/Objektauswahl im Hintergrund. ### Benutzerdefinierte Funktionen -Der Button **„𝑓 Funktionen"** in der Symbolleiste öffnet die einzige Stelle, an +Der **„fx"-Button** in der Symbolleiste öffnet die einzige Stelle, an der eigene, dokumentweite Funktionen angelegt, bearbeitet und gelöscht werden — kein JSON-Handedit, keine Konsole. Danach in jeder Zelle aufrufbar wie ein eingebauter Funktionsname: `=MARGE(Umsatz!B2; Umsatz!C2)`. @@ -334,8 +334,8 @@ Bereich, über den sie selbst iteriert. Siehe „Bekannte Grenzen" unten. ### Benannte Bereiche -Der Button **„🏷" (Benannte Bereiche)** in der Symbolleiste, direkt neben -**„𝑓 Funktionen"**, öffnet die einzige Stelle, an der dokumentweite Namen für +Der **„Benannte Bereiche"-Button** (Tag-Symbol) in der Symbolleiste, direkt +neben dem **„fx"-Button**, öffnet die einzige Stelle, an der dokumentweite Namen für eine feste Zelle/einen festen Bereich angelegt, bearbeitet und gelöscht werden — z. B. `Umsatz_Q1` statt `Umsatz!B2:B6`. Danach in **jeder** Top-Level-Formel unqualifiziert nutzbar, ohne Tabellen-Präfix: @@ -676,7 +676,7 @@ das Dropdown, ohne die Bearbeitung selbst abzubrechen. Sonst?)`, `AND(Bedingung1; Bedingung2; …)`, `OR(Bedingung1; Bedingung2; …)`, `NOT(Bedingung)`, `DATE(Jahr; Monat; Tag)`, `TIME(Std; Min; Sek)`, `TODAY()`, `NOW()`, `XLOOKUP(Suchwert; Suchbereich; Rückgabebereich; [WennNichtGefunden]; -[Vergleichsmodus]; [Suchmodus])` — plus alle über **„𝑓 Funktionen"** angelegten +[Vergleichsmodus]; [Suchmodus])` — plus alle über den **„fx"-Button** angelegten benutzerdefinierten Funktionen (siehe „Benutzerdefinierte Funktionen" oben), die sich für den Aufrufer identisch verhalten. Argumente gemischt: Einzelzellen, Bereiche (lokal oder `Name!…`), Zahl-Literale — z. B. diff --git a/src/components/AppToolbar.vue b/src/components/AppToolbar.vue index 06574eb..2fef3b5 100644 --- a/src/components/AppToolbar.vue +++ b/src/components/AppToolbar.vue @@ -7,6 +7,7 @@ import BaseModal from './BaseModal.vue'; import CustomFunctionsModal from './CustomFunctionsModal.vue'; import NamedRangesModal from './NamedRangesModal.vue'; import TheLogo from './TheLogo.vue'; +import ToolbarIcon from './ToolbarIcon.vue'; import { WICOM, WICOM_SOCIAL } from '../config/brand'; import { exportJson, @@ -210,55 +211,60 @@ function onReset() { aria-label="Einstellungen" @click="store.ui.settingsOpen = !store.ui.settingsOpen" > - ⚙ + - - - +
+ + +
- - - - +
+ + + +
- - - +
+ + +
@@ -410,8 +416,8 @@ function onReset() { display: flex; align-items: center; flex-wrap: wrap; - gap: 8px; - padding: 10px 14px; + gap: 10px; + padding: 9px 16px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); @@ -513,26 +519,72 @@ function onReset() { color: var(--accent); } .gear { - border: 1px solid var(--border); - background: var(--surface); - border-radius: 8px; - width: 30px; - height: 30px; - font-size: 15px; - line-height: 1; + display: inline-flex; + align-items: center; + justify-content: center; + border: 1px solid transparent; + background: transparent; + border-radius: 9px; + width: 32px; + height: 32px; cursor: pointer; color: var(--text-dim); + transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease; +} +.gear:hover { + background: var(--surface-2); + color: var(--text); } -.gear:hover, .gear.on { + background: var(--accent-weak); border-color: var(--accent); color: var(--accent); } -.divider { - width: 1px; - align-self: stretch; - background: var(--border); - margin: 2px 4px; + +/* --- grouped icon-button clusters (segmented-control look) --- */ +.tgroup { + display: flex; + align-items: center; + gap: 2px; + padding: 3px; + background: var(--surface-2); + border: 1px solid var(--border); + border-radius: 10px; +} +.ibtn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 30px; + height: 28px; + border: 0; + border-radius: 7px; + background: transparent; + color: var(--text-dim); + cursor: pointer; + transition: background-color 0.12s ease, color 0.12s ease; +} +.tgroup.accent .ibtn { + color: var(--accent); +} +.ibtn:hover { + background: var(--surface); + color: var(--text); + box-shadow: var(--shadow-sm); +} +.tgroup.accent .ibtn:hover { + color: var(--accent); +} +.ibtn:disabled { + opacity: 0.35; + cursor: default; + pointer-events: none; +} +.ibtn.fx em { + font-style: italic; + font-weight: 700; + font-size: 14px; + font-family: Georgia, 'Times New Roman', serif; } .spacer { flex: 1; @@ -554,20 +606,6 @@ function onReset() { cursor: default; pointer-events: none; } -.btn.accent { - border-color: var(--accent); - color: var(--accent); - font-weight: 600; -} -.icon-btn { - display: inline-flex; - align-items: center; - justify-content: center; - width: 34px; - padding: 6px 0; - font-size: 14px; - line-height: 1; -} .menu-wrap { position: relative; } diff --git a/src/components/ToolbarIcon.vue b/src/components/ToolbarIcon.vue new file mode 100644 index 0000000..c79ec23 --- /dev/null +++ b/src/components/ToolbarIcon.vue @@ -0,0 +1,88 @@ + + + + +