diff --git a/src/OberleisteApp.jsx b/src/OberleisteApp.jsx index 99594d0..b10dba6 100644 --- a/src/OberleisteApp.jsx +++ b/src/OberleisteApp.jsx @@ -128,10 +128,11 @@ function BarSelect({ icon, value, onChange, title, disabled, width, children, jo // BarCombo: dunklerer (bg-input) Pill-Container der select + optional gear // als EINE nahtlose Box rendert. Icon roh links daneben (kein Container). // iconClickable=true macht das Icon zum Toggle-Button (Overrides etc.). +// valueAccent=true faerbt den Select-Text accent (fuer Massstab "gesetzt"). function BarCombo({ icon, iconActive, iconClickable, onIconClick, iconTitle, value, onChange, width, title, children, disabled, - onGear, gearTitle, + onGear, gearTitle, valueAccent, }) { return (
onChange(e.target.value)} style={{ flex: 1, minWidth: 0, - background: 'transparent', color: 'var(--text-primary)', + background: 'transparent', + color: valueAccent ? 'var(--accent-light)' : 'var(--text-primary)', border: 'none', outline: 'none', padding: '0 22px 0 12px', fontSize: 11, fontFamily: 'var(--font)', + fontWeight: valueAccent ? 600 : 500, appearance: 'none', WebkitAppearance: 'none', backgroundImage: 'var(--select-arrow)', backgroundRepeat: 'no-repeat', @@ -558,11 +561,11 @@ export default function OberleisteApp() {
{/* ====== MASSSTAB 2-Reihen ====== - Oben: Segmented-Pill mit 4 Tools (%, fit, center, print/edit) - Unten: Live-Zoom-Chip + Dropdown + Links: Segmented-Pill mit 4 Tools (zentriert ueber beide Reihen) + Rechts oben: Massstab-Dropdown (gesetzt = green) + Rechts unten: Zoom-Verhaeltnis zum gesetzten Massstab (% Anzeige) */} {(() => { - // Segmented button — sitzt nahtlos in einer Pill mit den anderen const SegBtn = ({ icon, onClick, title, disabled, active, isFirst, isLast }) => ( ) + // Zoom-Verhaeltnis: setScale / liveScale → % + // 100% = perfekt am gesetzten Massstab; >100 = reingezoomt; <100 = rausgezoomt + const ratio = (!isPerspective && appliedScale && scaleVal) + ? appliedScale / scaleVal + : null + const ratioText = ratio == null + ? '—' + : ratio >= 1 + ? Math.round(ratio * 100) + '%' + : (ratio * 100).toFixed(ratio < 0.1 ? 1 : 0) + '%' + const atScale = ratio != null && Math.abs(ratio - 1) < 0.005 return ( -
- {/* Reihe 1: Segmented Pill mit 4 Tools */} +
+ {/* Buttons-Pill — sitzt auf Reihe 1, vertikal zentriert ueber beide Reihen */}
@@ -606,20 +617,9 @@ export default function OberleisteApp() { ? 'Print-View aktiv — klick zum Ausschalten' : 'Strichstärken anzeigen (Print-View)'} />
- {/* Reihe 2: Live-Zoom + Dropdown */} -
-
- {isPerspective ? '—' : fmtScale(scaleVal)} -
+ {/* Dropdown + Zoom-Ratio gestapelt */} +
+ {/* Reihe 1: Set-Massstab Dropdown (grün wenn gesetzt) */} {customMode ? ( applyDropdown(v)} disabled={isPerspective} width={140} + valueAccent={appliedScale != null} title="Gesetzter Massstab" > @@ -663,6 +664,25 @@ export default function OberleisteApp() { )} + {/* Reihe 2: Zoom-Verhaeltnis zum gesetzten Massstab. + Aligned mit dem Pill (nicht mit dem Icon links davon). */} +
+
+ {ratioText} +
+
)