karim/DOSSIER
Public Access
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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