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:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user