Beide Ebenen-Panels: Section-Header raus, Action-Buttons in Sichtbarkeit-Row

Der Section-Header mit dem Panel-Namen ("Ebenen" / "Zeichnungsebenen")
war redundant — der Panel-Tab in Rhino hat den Namen schon. Stattdessen
direkt mit der Sichtbarkeit-Dropdown beginnen.

EbenenManager:
- `<Section>`-Wrapper entfernt, Section-Import raus.
- "+"-Button neben der Sichtbarkeit-Dropdown (flex: 1).

GeschossManager:
- Gleich. "+"- und Edit-Buttons (Bleistift) neben der Sichtbarkeit-
  Dropdown.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-05-19 00:02:26 +02:00
parent cbabc12064
commit c4c9e56b2c
2 changed files with 58 additions and 58 deletions
+14 -12
View File
@@ -1,5 +1,4 @@
import { useState, useRef, useMemo, useEffect } from 'react' import { useState, useRef, useMemo, useEffect } from 'react'
import Section from './Section'
import Icon from './Icon' import Icon from './Icon'
import ConfirmDeleteEbene from './ConfirmDeleteEbene' import ConfirmDeleteEbene from './ConfirmDeleteEbene'
import ContextMenu from './ContextMenu' import ContextMenu from './ContextMenu'
@@ -407,14 +406,8 @@ export default function EbenenManager({
disabled: ebenen.length <= 1 }, disabled: ebenen.length <= 1 },
] ]
const actionBtns = (
<button className="btn-add" onClick={addNew} title="Ebene hinzufügen">
<Icon name="add" size={16} />
</button>
)
return ( return (
<Section title="Ebenen" badge={ebenen.length} action={actionBtns}> <>
{/* Ebenenkombinationen — Label + Dropdown + Save-As-Plus */} {/* Ebenenkombinationen — Label + Dropdown + Save-As-Plus */}
<div style={{ <div style={{
display: 'flex', flexDirection: 'column', gap: 4, display: 'flex', flexDirection: 'column', gap: 4,
@@ -474,9 +467,18 @@ export default function EbenenManager({
borderBottom: '1px solid var(--border-light)', borderBottom: '1px solid var(--border-light)',
}}> }}>
<span className="label-xs">Sichtbarkeit</span> <span className="label-xs">Sichtbarkeit</span>
<select value={mode} onChange={ev => onModeChange(ev.target.value)} style={{ width: '100%' }}> <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
{MODES.map(m => <option key={m.value} value={m.value}>{m.label}</option>)} <select
</select> value={mode}
onChange={ev => onModeChange(ev.target.value)}
style={{ flex: 1, minWidth: 0 }}
>
{MODES.map(m => <option key={m.value} value={m.value}>{m.label}</option>)}
</select>
<button className="btn-icon-sm" onClick={addNew} title="Ebene hinzufügen">
<Icon name="add" size={14} />
</button>
</div>
</div> </div>
<div style={{ <div style={{
@@ -582,6 +584,6 @@ export default function EbenenManager({
/> />
) )
})()} })()}
</Section> </>
) )
} }
+44 -46
View File
@@ -1,5 +1,4 @@
import { useState } from 'react' import { useState } from 'react'
import Section from './Section'
import Icon from './Icon' import Icon from './Icon'
import GeschossDialog from './GeschossDialog' import GeschossDialog from './GeschossDialog'
import GeschossSettingsDialog from './GeschossSettingsDialog' import GeschossSettingsDialog from './GeschossSettingsDialog'
@@ -104,64 +103,63 @@ export default function GeschossManager({
onChange([...zeichnungsebenen, newZ]) onChange([...zeichnungsebenen, newZ])
} }
const actions = (
<div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
<button className="btn-add" onClick={addQuick} title="Zeichnungsebene hinzufügen">
<Icon name="add" size={16} />
</button>
<button className="btn-icon-tonal" onClick={() => setDialogOpen(true)} title="Bearbeiten">
<Icon name="edit" size={14} />
</button>
</div>
)
const toggleVisible = (id) => { const toggleVisible = (id) => {
onChange(zeichnungsebenen.map(z => z.id === id ? { ...z, visible: !(z.visible !== false) } : z)) onChange(zeichnungsebenen.map(z => z.id === id ? { ...z, visible: !(z.visible !== false) } : z))
} }
return ( return (
<> <>
<Section title="Zeichnungsebenen" badge={zeichnungsebenen.length} action={actions}> <div style={{
<div style={{ display: 'flex', flexDirection: 'column', gap: 4,
display: 'flex', flexDirection: 'column', gap: 4, padding: '6px 14px',
padding: '6px 14px', background: 'var(--bg-section)',
background: 'var(--bg-section)', borderBottom: '1px solid var(--border-light)',
borderBottom: '1px solid var(--border-light)', }}>
}}> <span className="label-xs">Sichtbarkeit</span>
<span className="label-xs">Sichtbarkeit</span> <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
<select value={mode} onChange={ev => onModeChange(ev.target.value)} style={{ width: '100%' }}> <select
value={mode}
onChange={ev => onModeChange(ev.target.value)}
style={{ flex: 1, minWidth: 0 }}
>
{MODES.map(m => ( {MODES.map(m => (
<option key={m.value} value={m.value}>{m.label}</option> <option key={m.value} value={m.value}>{m.label}</option>
))} ))}
</select> </select>
<button className="btn-icon-sm" onClick={addQuick} title="Zeichnungsebene hinzufügen">
<Icon name="add" size={14} />
</button>
<button className="btn-icon-sm" onClick={() => setDialogOpen(true)} title="Bearbeiten">
<Icon name="edit" size={13} />
</button>
</div> </div>
</div>
<div style={{ <div style={{
display: 'flex', justifyContent: 'space-between', alignItems: 'center', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
padding: '3px 14px', padding: '3px 14px',
background: 'var(--bg-section)', background: 'var(--bg-section)',
borderBottom: '1px solid var(--border-light)', borderBottom: '1px solid var(--border-light)',
}}> }}>
<span className="label-xs">Gebäudehöhe</span> <span className="label-xs">Gebäudehöhe</span>
<span style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--text-secondary)' }}> <span style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--text-secondary)' }}>
{gesamthoehe.toFixed(2)} m {gesamthoehe.toFixed(2)} m
</span> </span>
</div> </div>
<div> <div>
{sorted.map(z => ( {sorted.map(z => (
<ZeichnungsebeneRow <ZeichnungsebeneRow
key={z.id} key={z.id}
z={z} z={z}
active={z.id === activeId} active={z.id === activeId}
mode={mode} mode={mode}
onClick={() => onActiveChange(z.id)} onClick={() => onActiveChange(z.id)}
onToggleVisible={() => toggleVisible(z.id)} onToggleVisible={() => toggleVisible(z.id)}
onSettings={() => setSettingsFor(z)} onSettings={() => setSettingsFor(z)}
/> />
))} ))}
</div> </div>
</Section>
{dialogOpen && ( {dialogOpen && (
<GeschossDialog <GeschossDialog