diff --git a/src/panels/AttributesPanel.tsx b/src/panels/AttributesPanel.tsx index b824c4b..31881d0 100644 --- a/src/panels/AttributesPanel.tsx +++ b/src/panels/AttributesPanel.tsx @@ -80,7 +80,6 @@ export function AttributesPanel() { onChange: (next: UiSource) => void, ) => ( onChange(v as UiSource)} @@ -110,7 +109,7 @@ export function AttributesPanel() { ) => ( <> {t(labelKey)} - + {ui === "custom" && valueEditor} {sourceSelect(editable, ui, onSource)} @@ -159,11 +158,13 @@ export function AttributesPanel() { return (
-
{t("attr.title")}
- - {/* ── Stift/Strich ──────────────────────────────────────────────── */} -
{t("attr.stroke")}
+ {/* EIN durchgehendes Grid über alle Sektionen — dieselben zwei Spalten + (Label | Wert) für Stift/Füllung/Maße, damit die Wertfelder überall + bündig in EINER Spalte stehen. Sektion-Balken spannen beide Spalten. */}
+ {/* ── Stift/Strich ──────────────────────────────────────────── */} +
{t("attr.stroke")}
+ {/* Farbe — gilt für Wand UND Drawing2D (Kontrakt setzt beide). */} {t("attr.color")} @@ -208,7 +209,6 @@ export function AttributesPanel() { onChange={(v) => host.onSetSelectionLineStyle(v === "__none__" ? undefined : v) } - width={120} options={[ { value: "__none__", label: t("attr.lineStyle.none") }, ...project.lineStyles.map((l) => ({ value: l.id, label: l.name })), @@ -218,14 +218,13 @@ export function AttributesPanel() { {lineStyle ? lineStyle.name : "—"} )} -
- {/* ── Füllung (Vordergrund/Hintergrund + Schraffur) ─────────────── */} - {/* Vordergrund = Muster-/Schraffurfarbe, Hintergrund = Füllfarbe/Poché. - Jedes Feld: Nach Ebene (LayerCategory erzwingt den Wert) / Nach Bauteil - (erbt vom Component-Manager, Default) / eigener Wert (Override). */} -
{t("attr.fill")}
-
+ {/* ── Füllung (Vordergrund/Hintergrund + Schraffur) ─────────── */} + {/* Vordergrund = Muster-/Schraffurfarbe, Hintergrund = Füllfarbe/ + Poché. Jedes Feld: Nach Ebene (LayerCategory erzwingt den Wert) / + Nach Bauteil (erbt vom Component-Manager, Default) / eigener Wert. */} +
{t("attr.fill")}
+ {sourceRow( "attr.foreground", pocheEditable, @@ -248,7 +247,6 @@ export function AttributesPanel() { hatchUi, onHatchSourceChange, host.onSetSelectionFill(v || null)} options={[ @@ -257,11 +255,9 @@ export function AttributesPanel() { ]} />, )} -
- {/* ── Maße (informativ, aus der bbox) ───────────────────────────── */} -
{t("attr.size")}
-
+ {/* ── Maße (informativ, aus der bbox) ───────────────────────── */} +
{t("attr.size")}
{t("attr.width")} {formatM(bboxW)} {t("attr.height")} diff --git a/src/styles.css b/src/styles.css index 667a400..870c963 100644 --- a/src/styles.css +++ b/src/styles.css @@ -3979,10 +3979,6 @@ body { /* ── Attribute-Palette (AttributesPanel) ─────────────────────────────── */ .attr-panel { - display: flex; - flex-direction: column; - gap: 4px; - padding: 8px; overflow-y: auto; height: 100%; min-height: 0; @@ -3993,28 +3989,29 @@ body { padding: 8px 4px; text-align: center; } -.attr-title { - font-weight: 600; - color: var(--label); - padding: 0 2px 4px; -} -/* OCS-artiges Eigenschaften-Grid: Sektion-Balken über die volle Breite, Zeilen - mit dezenten Trennlinien (klares Grid, ohne aufdringliche Ränder), Wertfelder - füllen ihre Zelle linksbündig — einheitlicher Look für Texte/Zahlen/Dropdowns. */ +/* OCS-artiges Eigenschaften-Grid: EIN durchgehendes Zwei-Spalten-Grid über alle + Sektionen (Label | Wert), damit die Wertfelder über Stift/Füllung/Maße hinweg + in EINER Spalte bündig stehen. Sektion-Balken spannen beide Spalten. Zeilen mit + dezenten Trennlinien; Wertfelder füllen ihre Zelle linksbündig über die volle + Panel-Breite — einheitlicher Look für Texte/Zahlen/Dropdowns. */ .attr-section-label { + grid-column: 1 / -1; color: var(--label); font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em; - margin: 8px 0 0; - padding: 4px 8px; + margin: 8px 0 2px; + padding: 3px 6px; background: var(--panel-2); border-radius: 3px; } +.attr-section-label:first-child { + margin-top: 0; +} .attr-grid { display: grid; - grid-template-columns: minmax(84px, auto) 1fr; + grid-template-columns: minmax(80px, max-content) 1fr; align-items: stretch; gap: 0; padding: 0; @@ -4024,17 +4021,25 @@ body { white-space: nowrap; display: flex; align-items: center; - padding: 4px 10px 4px 6px; + padding: 3px 10px 3px 2px; border-bottom: 1px solid var(--line); } .attr-val { display: flex; align-items: center; justify-content: flex-start; + gap: 6px; min-width: 0; - padding: 3px 2px 3px 0; + padding: 2px 0; border-bottom: 1px solid var(--line); } +/* Wertfelder (Dropdown-Trigger, Zahlenfeld) füllen die Wert-Spalte — der + Dropdown wächst in die verfügbare Breite (kein fixes width mehr im TSX). */ +.attr-val .tb-dd-trigger { + flex: 1 1 auto; + min-width: 0; + justify-content: space-between; +} .attr-readonly { color: var(--label); opacity: 0.85;