wkh/numolus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Toolbar: insert/functions buttons as icon-only pictograms

Browse Source 
Tabelle/Diagramm/Text/Funktionen now show only their glyph (▦ ▤ ¶ 𝑓,
matching the icons already used for object kinds in CanvasObject.vue)
instead of a text label, with title + aria-label tooltips for
accessibility. New shared .icon-btn style for the compact square shape.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
wkh
2026-09-02 15:41:15 +02:00
co-authored by Claude Sonnet 5
parent c3fde283c8
commit bcc0e8252e
1 changed files with 25 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AppToolbar.vue
+25 -5
View File
@@ -230,13 +230,24 @@ function onReset() {
</button> </button>
<span class="divider" /> <span class="divider" />
<button class="btn accent" @click="insertTable">＋ Tabelle</button> <button class="btn accent icon-btn" title="Tabelle einfügen" aria-label="Tabelle einfügen" @click="insertTable">
<button class="btn accent" @click="insertChart">＋ Diagramm</button> ▦
<button class="btn accent" @click="insertText">＋ Text</button> </button>
<button class="btn accent icon-btn" title="Diagramm einfügen" aria-label="Diagramm einfügen" @click="insertChart">
▤
</button>
<button class="btn accent icon-btn" title="Text einfügen" aria-label="Text einfügen" @click="insertText">
</button>
<span class="divider" /> <span class="divider" />
<button class="btn" title="Benutzerdefinierte Funktionen" @click="functionsOpen = true"> <button
𝑓 Funktionen class="btn accent icon-btn"
title="Benutzerdefinierte Funktionen"
aria-label="Benutzerdefinierte Funktionen"
@click="functionsOpen = true"
>
𝑓
</button> </button>
<div class="spacer" /> <div class="spacer" />
@@ -537,6 +548,15 @@ function onReset() {
color: var(--accent); color: var(--accent);
font-weight: 600; 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 { .menu-wrap {
position: relative; position: relative;
} }