From b78a95caaa616219ef26f4cf351d8d00bab1de40 Mon Sep 17 00:00:00 2001
From: karim <karim@gabrielevarano.ch>
Date: Wed, 20 May 2026 23:03:02 +0200
Subject: [PATCH] Massstab in 2 Reihen + View-Toggle inaktiv ebenfalls dunkel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User-Wunsch: Massstab-Stack analog Preset-Block. Plus inaktive View-
Toggle-Buttons sollen denselben dunklen Hintergrund haben wie der
Preset-Block.

Massstab:
- Reihe 1 (oben): Buttons (%, fit_screen, center_focus_strong, print/edit)
- Reihe 2 (unten): Live-Zoom-Chip + Massstab-Dropdown (BarCombo statt
  BarSelect — dunklerer bg-input + zusammenhaengender Pill)
- Custom-Input ebenfalls auf bg-input

View-Toggle: inaktive Buttons bg-item → bg-input (konsistent dunkel mit
allen anderen Pills). Aktiv bleibt accent-fill.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/OberleisteApp.jsx | 153 +++++++++++++++++++++++-------------------
 1 file changed, 83 insertions(+), 70 deletions(-)

diff --git a/src/OberleisteApp.jsx b/src/OberleisteApp.jsx
index 8e77759..859fb5d 100644
--- a/src/OberleisteApp.jsx
+++ b/src/OberleisteApp.jsx
@@ -418,7 +418,7 @@ export default function OberleisteApp() {
               title={`Ansicht ${v.label}`}
               style={{
                 height: BAR_H, padding: '0 10px',
-                background: isActive ? 'var(--accent)' : 'var(--bg-item)',
+                background: isActive ? 'var(--accent)' : 'var(--bg-input)',
                 color: isActive ? 'var(--bg-panel)' : 'var(--text-primary)',
                 border: '1px solid var(--border)',
                 borderLeft: isFirst ? '1px solid var(--border)' : 'none',
@@ -557,78 +557,91 @@ export default function OberleisteApp() {
 
       <div style={sep} />
 
-      {/* ====== MASSSTAB ====== */}
-      {/* Live-Zoom Chip — pill, accent wenn Massstab anwendbar */}
+      {/* ====== MASSSTAB 2-Reihen ======
+          Oben:  Buttons (%, fit, center, print/edit)
+          Unten: Live-Zoom-Chip + Dropdown
+      */}
       <div style={{
-        display: 'inline-flex', alignItems: 'center',
-        height: BAR_H, padding: '0 10px',
-        background: isPerspective ? 'var(--bg-input)' : 'var(--accent)',
-        color: isPerspective ? 'var(--text-muted)' : 'var(--bg-panel)',
-        border: '1px solid var(--border-light)',
-        borderRadius: 999,
-        fontFamily: 'DM Mono, monospace', fontSize: 11, fontWeight: 600,
-        minWidth: 60, justifyContent: 'center', flexShrink: 0,
-      }} title="Live-Zoom">
-        {isPerspective ? '—' : fmtScale(scaleVal)}
-      </div>
-      {customMode ? (
-        <input
-          ref={customInputRef}
-          disabled={isPerspective}
-          type="text" placeholder="1:N"
-          value={draft}
-          onChange={(e) => setDraft(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') applyDraft()
-            else if (e.key === 'Escape') cancelDraft()
-          }}
-          onBlur={applyDraft}
-          style={{
-            height: BAR_H, width: 100,
-            background: 'var(--bg-item)',
-            color: 'var(--text-primary)',
-            border: '1px solid var(--border)',
+        display: 'flex', flexDirection: 'column', gap: 4,
+        flexShrink: 0,
+      }}>
+        {/* Reihe 1: Buttons */}
+        <div style={{ display: 'flex', gap: 4, justifyContent: 'flex-start' }}>
+          <BarButton icon="percent" onClick={apply100}
+                      disabled={isPerspective || !appliedScale}
+                      title={appliedScale ? `Zoom auf 1:${appliedScale} snappen` : 'Erst einen Massstab wählen'} />
+          <BarButton icon="fit_screen" onClick={zoomExtents}
+                      title="Auf gesamten Inhalt zoomen" />
+          <BarButton icon="center_focus_strong" onClick={zoomSelection}
+                      title="Auf Selektion zoomen" />
+          <BarButton
+            icon={state.showLineweights ? 'print' : 'edit'}
+            active={state.showLineweights}
+            onClick={() => setShowLineweights(!state.showLineweights)}
+            title={state.showLineweights
+              ? 'Print-View aktiv — klick zum Ausschalten'
+              : 'Strichstärken anzeigen (Print-View)'}
+          />
+        </div>
+        {/* Reihe 2: Live-Zoom + Dropdown */}
+        <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
+          <div style={{
+            display: 'inline-flex', alignItems: 'center',
+            height: BAR_H, padding: '0 10px',
+            background: isPerspective ? 'var(--bg-input)' : 'var(--accent)',
+            color: isPerspective ? 'var(--text-muted)' : 'var(--bg-panel)',
+            border: '1px solid var(--border-light)',
             borderRadius: 999,
-            padding: '0 12px', fontSize: 11,
-            fontFamily: 'DM Mono, monospace',
-            outline: 'none',
-          }}
-          title="Massstab eingeben (Enter = uebernehmen, Esc = abbrechen)"
-        />
-      ) : (
-        <BarSelect
-          icon="straighten"
-          value={dropdownValue}
-          onChange={(v) => applyDropdown(v)}
-          disabled={isPerspective}
-          width={140}
-          title="Gesetzter Massstab"
-        >
-          <option value="__none__">—</option>
-          {PRESETS.map(p => (
-            <option key={p.value} value={String(p.value)}>{p.label}</option>
-          ))}
-          {appliedScale != null && !PRESETS.some(p => p.value === appliedScale) && (
-            <option value={String(appliedScale)}>1:{appliedScale}</option>
+            fontFamily: 'DM Mono, monospace', fontSize: 11, fontWeight: 600,
+            minWidth: 60, justifyContent: 'center', flexShrink: 0,
+          }} title="Live-Zoom">
+            {isPerspective ? '—' : fmtScale(scaleVal)}
+          </div>
+          {customMode ? (
+            <input
+              ref={customInputRef}
+              disabled={isPerspective}
+              type="text" placeholder="1:N"
+              value={draft}
+              onChange={(e) => setDraft(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') applyDraft()
+                else if (e.key === 'Escape') cancelDraft()
+              }}
+              onBlur={applyDraft}
+              style={{
+                height: BAR_H, width: 100,
+                background: 'var(--bg-input)',
+                color: 'var(--text-primary)',
+                border: '1px solid var(--border)',
+                borderRadius: 999,
+                padding: '0 12px', fontSize: 11,
+                fontFamily: 'DM Mono, monospace',
+                outline: 'none',
+              }}
+              title="Massstab eingeben (Enter = uebernehmen, Esc = abbrechen)"
+            />
+          ) : (
+            <BarCombo
+              icon="straighten"
+              value={dropdownValue}
+              onChange={(v) => applyDropdown(v)}
+              disabled={isPerspective}
+              width={140}
+              title="Gesetzter Massstab"
+            >
+              <option value="__none__">—</option>
+              {PRESETS.map(p => (
+                <option key={p.value} value={String(p.value)}>{p.label}</option>
+              ))}
+              {appliedScale != null && !PRESETS.some(p => p.value === appliedScale) && (
+                <option value={String(appliedScale)}>1:{appliedScale}</option>
+              )}
+              <option value="__custom__">Eigener…</option>
+            </BarCombo>
           )}
-          <option value="__custom__">Eigener…</option>
-        </BarSelect>
-      )}
-      <BarButton icon="percent" onClick={apply100}
-                  disabled={isPerspective || !appliedScale}
-                  title={appliedScale ? `Zoom auf 1:${appliedScale} snappen` : 'Erst einen Massstab wählen'} />
-      <BarButton icon="fit_screen" onClick={zoomExtents}
-                  title="Auf gesamten Inhalt zoomen" />
-      <BarButton icon="center_focus_strong" onClick={zoomSelection}
-                  title="Auf Selektion zoomen" />
-      <BarButton
-        icon={state.showLineweights ? 'print' : 'edit'}
-        active={state.showLineweights}
-        onClick={() => setShowLineweights(!state.showLineweights)}
-        title={state.showLineweights
-          ? 'Print-View aktiv — klick zum Ausschalten'
-          : 'Strichstärken anzeigen (Print-View)'}
-      />
+        </div>
+      </div>
 
       {/* Snap-Toggles (Ortho/Grid/OSnap) sind in Rhinos eigener Footer-Bar
           schon vorhanden — hier rausgenommen um Doppelung zu vermeiden. */}