ui: Toolbar auf zwei Zeilen, einheitliche Element-Höhe 30px
All checks were successful
Deploy bericht / deploy (push) Successful in 1s
All checks were successful
Deploy bericht / deploy (push) Successful in 1s
- 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:
parent
90d89130f3
commit
a6cb8ade44
2 changed files with 41 additions and 11 deletions
|
|
@ -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="arrow" title="'.$langs->trans("BerichtToolArrow").'">↗</button>';
|
||||||
print '<button type="button" class="tool-btn" data-tool="text" title="'.$langs->trans("BerichtToolText").'">T</button>';
|
print '<button type="button" class="tool-btn" data-tool="text" title="'.$langs->trans("BerichtToolText").'">T</button>';
|
||||||
print '<span class="sep"></span>';
|
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("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 '<label>'.$langs->trans("BerichtStrokeWidth").': <input type="range" id="tool-stroke" min="1" max="20" value="3"></label>';
|
||||||
print '<span class="sep"></span>';
|
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">'
|
print '<label class="text-tool-option">Schrift: <select id="tool-fontfamily">'
|
||||||
.'<option value="Helvetica">Helvetica</option>'
|
.'<option value="Helvetica">Helvetica</option>'
|
||||||
.'<option value="Arial">Arial</option>'
|
.'<option value="Arial">Arial</option>'
|
||||||
|
|
@ -299,7 +303,6 @@ if (!$bericht) {
|
||||||
print '<span class="sep"></span>';
|
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-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-rotate-right" title="'.$langs->trans("BerichtRotateRight").'">⟳</button>';
|
||||||
print '<button type="button" id="btn-delete-selected" title="'.$langs->trans("BerichtToolDelete").'">🗑️</button>';
|
|
||||||
print '</div>';
|
print '</div>';
|
||||||
print '<div class="bericht-canvas-wrap">';
|
print '<div class="bericht-canvas-wrap">';
|
||||||
print '<canvas id="pdf-canvas"></canvas>';
|
print '<canvas id="pdf-canvas"></canvas>';
|
||||||
|
|
|
||||||
|
|
@ -65,7 +65,7 @@
|
||||||
display: flex; flex-direction: column;
|
display: flex; flex-direction: column;
|
||||||
}
|
}
|
||||||
.bericht-toolbar {
|
.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);
|
background: var(--colorbacktitle1, #fff);
|
||||||
color: var(--colortext, inherit);
|
color: var(--colortext, inherit);
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
|
|
@ -73,16 +73,40 @@
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
border: 1px solid var(--colorboxbordertitle1, transparent);
|
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 button,
|
||||||
.bericht-toolbar .tool-btn {
|
.bericht-toolbar .tool-btn {
|
||||||
background: var(--butactionbg, transparent);
|
background: var(--colorbackbody, #2a2a30);
|
||||||
color: var(--colortext, inherit);
|
color: var(--colortext, inherit);
|
||||||
border: 1px solid var(--colorboxbordertitle1, #ccc);
|
border: 1px solid var(--colorboxbordertitle1, #555);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 4px 10px;
|
padding: 0 10px;
|
||||||
cursor: pointer;
|
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 {
|
.bericht-toolbar .tool-btn.active {
|
||||||
background: var(--colorbackhmenu1, #5cb85c);
|
background: var(--colorbackhmenu1, #5cb85c);
|
||||||
color: var(--colortextbackhmenu, #fff);
|
color: var(--colortextbackhmenu, #fff);
|
||||||
|
|
@ -92,8 +116,11 @@
|
||||||
width: 1px;
|
width: 1px;
|
||||||
background: var(--colorboxbordertitle1, #ddd);
|
background: var(--colorboxbordertitle1, #ddd);
|
||||||
height: 24px;
|
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 {
|
.bericht-toolbar label {
|
||||||
display: flex; align-items: center; gap: 4px;
|
display: flex; align-items: center; gap: 4px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue