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:
@@ -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>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user