data/bericht
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: Toolbar auf zwei Zeilen, einheitliche Element-Höhe 30px
All checks were successful
Deploy bericht / deploy (push) Successful in 1s
Details

Browse source 
- Zeile 1: Tools (Select/Draw/Rect/Kreis/Pfeil/Text), Farbe, Strich,
  Undo/Redo, Löschen
- Zeile 2: Schrift (Family/Size/Bold/Italic), Zoom, Rotation
- .row-break als flex-basis:100% Element für sauberen Umbruch
- Alle Buttons + Inputs (color, range, number, select) auf height:30px
- Doppelte undo/redo/delete-Buttons entfernt

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
[deploy]
This commit is contained in:
Eduard Wisch 2026-04-08 16:32:55 +02:00
parent 90d89130f3
commit a6cb8ade44
2 changed files with 41 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
bericht_card.php
View file

@ -272,13 +272,17 @@ if (!$bericht) {
print '<button type="button" class="tool-btn" data-tool="arrow" title="'.$langs->trans("BerichtToolArrow").'">↗</button>';
print '<button type="button" class="tool-btn" data-tool="text" title="'.$langs->trans("BerichtToolText").'">T</button>';
print '<span class="sep"></span>';
print '<button type="button" id="btn-undo" title="'.$langs->trans("BerichtUndo").'">↶</button>';
print '<button type="button" id="btn-redo" title="'.$langs->trans("BerichtRedo").'">↷</button>';
print '<span class="sep"></span>';
print '<label>'.$langs->trans("BerichtColor").': <input type="color" id="tool-color" value="#ff0000"></label>';
print '<label>'.$langs->trans("BerichtStrokeWidth").': <input type="range" id="tool-stroke" min="1" max="20" value="3"></label>';
print '<span class="sep"></span>';
// Text-Optionen (nur sichtbar wenn Text-Tool aktiv oder ein Text-Objekt selektiert)
print '<button type="button" id="btn-undo" title="'.$langs->trans("BerichtUndo").'">↶</button>';
print '<button type="button" id="btn-redo" title="'.$langs->trans("BerichtRedo").'">↷</button>';
print '<button type="button" id="btn-delete-selected" title="'.$langs->trans("BerichtToolDelete").'">🗑️</button>';
// ====== Zweite Zeile ======
print '<div class="row-break"></div>';
// Text-Optionen
print '<label class="text-tool-option">Schrift: <select id="tool-fontfamily">'
.'<option value="Helvetica">Helvetica</option>'
.'<option value="Arial">Arial</option>'
@ -299,7 +303,6 @@ if (!$bericht) {
print '<span class="sep"></span>';
print '<button type="button" id="btn-rotate-left" title="'.$langs->trans("BerichtRotateLeft").'">⟲</button>';
print '<button type="button" id="btn-rotate-right" title="'.$langs->trans("BerichtRotateRight").'">⟳</button>';
print '<button type="button" id="btn-delete-selected" title="'.$langs->trans("BerichtToolDelete").'">🗑️</button>';
print '</div>';
print '<div class="bericht-canvas-wrap">';
print '<canvas id="pdf-canvas"></canvas>';

39
css/bericht.css
View file

@ -65,7 +65,7 @@
display: flex; flex-direction: column;
}
.bericht-toolbar {
display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center;
background: var(--colorbacktitle1, #fff);
color: var(--colortext, inherit);
padding: 6px;
@ -73,16 +73,40 @@
margin-bottom: 8px;
border: 1px solid var(--colorboxbordertitle1, transparent);
}
/* Einheitliche Höhe für ALLE Steuerelemente in der Toolbar */
.bericht-toolbar button,
.bericht-toolbar .tool-btn,
.bericht-toolbar select,
.bericht-toolbar input[type="number"],
.bericht-toolbar input[type="text"],
.bericht-toolbar input[type="color"],
.bericht-toolbar input[type="range"] {
height: 30px;
box-sizing: border-box;
line-height: 1;
vertical-align: middle;
margin: 0;
}
.bericht-toolbar button,
.bericht-toolbar .tool-btn {
background: var(--butactionbg, transparent);
background: var(--colorbackbody, #2a2a30);
color: var(--colortext, inherit);
border: 1px solid var(--colorboxbordertitle1, #ccc);
border: 1px solid var(--colorboxbordertitle1, #555);
border-radius: 4px;
padding: 4px 10px;
padding: 0 10px;
cursor: pointer;
font-size: 16px;
font-size: 14px;
display: inline-flex; align-items: center; justify-content: center;
}
.bericht-toolbar input[type="color"] {
width: 32px;
padding: 2px;
border: 1px solid var(--colorboxbordertitle1, #555);
background: var(--colorbackbody, #2a2a30);
border-radius: 4px;
cursor: pointer;
}
.bericht-toolbar input[type="range"] { width: 90px; }
.bericht-toolbar .tool-btn.active {
background: var(--colorbackhmenu1, #5cb85c);
color: var(--colortextbackhmenu, #fff);
@ -92,8 +116,11 @@
width: 1px;
background: var(--colorboxbordertitle1, #ddd);
height: 24px;
margin: 0 6px;
margin: 0 4px;
align-self: center;
}
/* Forciert Zeilenumbruch — alle Elemente nach .row-break gehen auf neue Zeile */
.bericht-toolbar .row-break { flex-basis: 100%; height: 0; margin: 0; }
.bericht-toolbar label {
display: flex; align-items: center; gap: 4px;
font-size: 12px;