View-Toggle: Icons 13→11, N/O/S/W Font 11→10, BarSelect Dead-Code raus

User: View-Bars wirken hoeher als andere Bars. Hoehen sind mathematisch
identisch (BAR_H + Border = 24 visual pro Reihe), aber 8 Buttons mit
Border-Trennlinien wirken visuell dichter als ein einzelner Dropdown.

Visual-Fix per User-Vorschlag: Icons + Font in Views minimal verkleinert,
macht die Bars weniger "dominant".

Plus BarSelect (komplett unused Dead-Code seit Migration zu BarCombo)
geloescht — der hatte als einziger noch bg-item statt bg-input und
verwirrte die Background-Konsistenz-Frage.

Hintergrund-Check: Alle Pills nutzen jetzt einheitlich var(--bg-input),
Hover var(--bg-item-hover), Active var(--accent).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-05-21 00:17:37 +02:00
parent 872832a3cc
commit c16f5ea740
+2 -43
View File
@@ -91,47 +91,6 @@ const pillSelect = {
fontSize: 10, fontSize: 10,
} }
// BarSelect: Icon roh links + custom-pill <select>. Vectorworks-Stil —
// dunkler Pill-Container, Caret rechts, joinedRight macht die rechte Kante
// flach fuer die Verkettung mit BarButton.
function BarSelect({ icon, value, onChange, title, disabled, width, children, joinedRight }) {
return (
<div title={title} style={{
display: 'inline-flex', alignItems: 'center', gap: 5,
opacity: disabled ? 0.5 : 1, flexShrink: 0,
}}>
{icon && (
<Icon name={icon} size={13}
style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
)}
<select
value={value || ''}
disabled={disabled}
onChange={(e) => onChange(e.target.value)}
style={{
height: BAR_H, width,
background: 'var(--bg-item)',
color: 'var(--text-primary)',
border: '1px solid var(--border)',
borderTopLeftRadius: 999, borderBottomLeftRadius: 999,
borderTopRightRadius: joinedRight ? 0 : 999,
borderBottomRightRadius: joinedRight ? 0 : 999,
borderRight: joinedRight ? 'none' : '1px solid var(--border)',
padding: '0 24px 0 12px',
fontSize: 11, fontFamily: 'var(--font)',
appearance: 'none', WebkitAppearance: 'none',
backgroundImage: 'var(--select-arrow)',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'right 9px center',
cursor: disabled ? 'not-allowed' : 'pointer',
flexShrink: 0, outline: 'none',
letterSpacing: 0,
}}
>{children}</select>
</div>
)
}
// BarCombo: dunklerer (bg-input) Pill-Container der select + optional gear // BarCombo: dunklerer (bg-input) Pill-Container der select + optional gear
// als EINE nahtlose Box rendert. Icon roh links daneben (kein Container). // als EINE nahtlose Box rendert. Icon roh links daneben (kein Container).
// iconClickable=true macht das Icon zum Toggle-Button (Overrides etc.). // iconClickable=true macht das Icon zum Toggle-Button (Overrides etc.).
@@ -498,7 +457,7 @@ export default function OberleisteApp() {
onMouseEnter={hoverIn(isActive)} onMouseEnter={hoverIn(isActive)}
onMouseLeave={hoverOut(isActive)} onMouseLeave={hoverOut(isActive)}
style={cellStyle(isActive, idx === 0)}> style={cellStyle(isActive, idx === 0)}>
<Icon name={v.icon} size={13} /> <Icon name={v.icon} size={11} />
</button> </button>
) )
})} })}
@@ -519,7 +478,7 @@ export default function OberleisteApp() {
onMouseLeave={hoverOut(isActive)} onMouseLeave={hoverOut(isActive)}
style={cellStyle(isActive, idx === 0)}> style={cellStyle(isActive, idx === 0)}>
<span style={{ <span style={{
fontFamily: 'DM Mono, monospace', fontSize: 11, fontWeight: 600, fontFamily: 'DM Mono, monospace', fontSize: 10, fontWeight: 600,
}}>{v.label}</span> }}>{v.label}</span>
</button> </button>
) )