From 211da902f6835c70768b99cb4d0be37fb85f0103 Mon Sep 17 00:00:00 2001 From: Steffen Becker Date: Mon, 25 May 2026 14:55:22 +0200 Subject: [PATCH] feat: add expandable extended toolbar with placeholders --- src/App.svelte | 51 ++++++- src/lib/editor/ToolbarExpanded.svelte | 207 ++++++++++++++++++++++++++ src/lib/storage/theme.ts | 15 +- 3 files changed, 269 insertions(+), 4 deletions(-) create mode 100644 src/lib/editor/ToolbarExpanded.svelte diff --git a/src/App.svelte b/src/App.svelte index e817fa6..6c0c0dc 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -2,14 +2,16 @@ import type { Editor } from '@tiptap/core'; import EditorComponent from './lib/editor/Editor.svelte'; import Toolbar from './lib/editor/Toolbar.svelte'; + import ToolbarExpanded from './lib/editor/ToolbarExpanded.svelte'; import { exportToOdt } from './lib/export/odt'; - import { loadTheme, saveTheme, applyTheme, type ThemeMode } from './lib/storage/theme'; + import { loadTheme, saveTheme, applyTheme, loadToolbarExpanded, saveToolbarExpanded, type ThemeMode } from './lib/storage/theme'; let editor: Editor | null = $state(null); let tick: number = $state(0); let themeMode: ThemeMode = $state(loadTheme()); let themeOpen = $state(false); + let toolbarExpanded = $state(loadToolbarExpanded()); function selectTheme(m: ThemeMode) { themeMode = m; @@ -18,6 +20,11 @@ themeOpen = false; } + function toggleToolbar() { + toolbarExpanded = !toolbarExpanded; + saveToolbarExpanded(toolbarExpanded); + } + function clickOutside(node: HTMLElement) { function handler(e: MouseEvent) { if (!node.contains(e.target as Node)) themeOpen = false; @@ -35,6 +42,22 @@
+
+ {#if toolbarExpanded} + + {/if} @@ -111,6 +137,29 @@ margin-right: 1rem; } + .toolbar-toggle-btn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + border: none; + border-radius: var(--radius); + background: transparent; + color: var(--color-text); + cursor: pointer; + transition: background 0.15s; + } + + .toolbar-toggle-btn:hover { + background: var(--color-btn-hover); + } + + .toolbar-toggle-btn.active { + background: var(--color-primary); + color: white; + } + .theme-wrap { position: relative; } diff --git a/src/lib/editor/ToolbarExpanded.svelte b/src/lib/editor/ToolbarExpanded.svelte new file mode 100644 index 0000000..a3bae78 --- /dev/null +++ b/src/lib/editor/ToolbarExpanded.svelte @@ -0,0 +1,207 @@ + + +
+ {#if editor} +
+ +
+ +
+ +
+ +
+ +
+ +
+ + +
+ +
+ +
+ + + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ {/if} +
+ + diff --git a/src/lib/storage/theme.ts b/src/lib/storage/theme.ts index 5658c02..114798d 100644 --- a/src/lib/storage/theme.ts +++ b/src/lib/storage/theme.ts @@ -1,15 +1,24 @@ export type ThemeMode = 'light' | 'dark' | 'auto'; -const STORAGE_KEY = 'odf-editor-theme'; +const THEME_KEY = 'odf-editor-theme'; +const TOOLBAR_KEY = 'odf-editor-toolbar-expanded'; export function loadTheme(): ThemeMode { - const saved = localStorage.getItem(STORAGE_KEY); + const saved = localStorage.getItem(THEME_KEY); if (saved === 'light' || saved === 'dark' || saved === 'auto') return saved; return 'auto'; } export function saveTheme(mode: ThemeMode): void { - localStorage.setItem(STORAGE_KEY, mode); + localStorage.setItem(THEME_KEY, mode); +} + +export function loadToolbarExpanded(): boolean { + return localStorage.getItem(TOOLBAR_KEY) === 'true'; +} + +export function saveToolbarExpanded(expanded: boolean): void { + localStorage.setItem(TOOLBAR_KEY, String(expanded)); } function resolveMode(mode: ThemeMode): 'light' | 'dark' {