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:
+2
-43
@@ -91,47 +91,6 @@ const pillSelect = {
|
||||
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
|
||||
// als EINE nahtlose Box rendert. Icon roh links daneben (kein Container).
|
||||
// iconClickable=true macht das Icon zum Toggle-Button (Overrides etc.).
|
||||
@@ -498,7 +457,7 @@ export default function OberleisteApp() {
|
||||
onMouseEnter={hoverIn(isActive)}
|
||||
onMouseLeave={hoverOut(isActive)}
|
||||
style={cellStyle(isActive, idx === 0)}>
|
||||
<Icon name={v.icon} size={13} />
|
||||
<Icon name={v.icon} size={11} />
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
@@ -519,7 +478,7 @@ export default function OberleisteApp() {
|
||||
onMouseLeave={hoverOut(isActive)}
|
||||
style={cellStyle(isActive, idx === 0)}>
|
||||
<span style={{
|
||||
fontFamily: 'DM Mono, monospace', fontSize: 11, fontWeight: 600,
|
||||
fontFamily: 'DM Mono, monospace', fontSize: 10, fontWeight: 600,
|
||||
}}>{v.label}</span>
|
||||
</button>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user