Toolbar: insert/functions buttons as icon-only pictograms

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
+25 -5
View File
@@ -230,13 +230,24 @@ function onReset() {
</button>
<span class="divider" />
<button class="btn accent" @click="insertTable">+ Tabelle</button>
<button class="btn accent" @click="insertChart">+ Diagramm</button>
<button class="btn accent" @click="insertText">+ Text</button>
<button class="btn accent icon-btn" title="Tabelle einfügen" aria-label="Tabelle einfügen" @click="insertTable">
▦
</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" />
<button class="btn" title="Benutzerdefinierte Funktionen" @click="functionsOpen = true">
𝑓 Funktionen
<button
class="btn accent icon-btn"
title="Benutzerdefinierte Funktionen"
aria-label="Benutzerdefinierte Funktionen"
@click="functionsOpen = true"
>
𝑓
</button>
<div class="spacer" />
@@ -537,6 +548,15 @@ function onReset() {
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;
}