Ribbon: Text + Ansichten auf eine Leiste (Ansichten-Tab), als Standard-Tab zuerst

This commit is contained in:
2026-07-05 19:18:23 +02:00
parent 4e3b074f5c
commit fe22cbf0df
5 changed files with 26 additions and 25 deletions
+3 -7
View File
@@ -69,7 +69,7 @@ import type { Pick3dHit } from "./viewport/Wasm3DViewport";
import { ResourceManager } from "./ui/ResourceManager"; import { ResourceManager } from "./ui/ResourceManager";
import type { ResourceManagerHandlers } from "./ui/ResourceManager"; import type { ResourceManagerHandlers } from "./ui/ResourceManager";
import { HatchSwatch } from "./ui/hatchPreview"; import { HatchSwatch } from "./ui/hatchPreview";
import { TopBar, ViewRibbonTab, TextGroup } from "./ui/TopBar"; import { TopBar, ViewRibbonTab } from "./ui/TopBar";
import { RibbonBar } from "./ui/ribbon/RibbonBar"; import { RibbonBar } from "./ui/ribbon/RibbonBar";
import type { RibbonTabId } from "./ui/ribbon/ribbonItems"; import type { RibbonTabId } from "./ui/ribbon/ribbonItems";
import { Dropdown } from "./ui/Dropdown"; import { Dropdown } from "./ui/Dropdown";
@@ -359,7 +359,7 @@ export default function App() {
// Aktiver Ribbon-Tab (2D/3D/BIM/Ansichten). Liegt hier (nicht in der RibbonBar), // Aktiver Ribbon-Tab (2D/3D/BIM/Ansichten). Liegt hier (nicht in der RibbonBar),
// weil die Tab-Reiter in der TopBar-Zeile sitzen und der Ribbon-Inhalt darunter // weil die Tab-Reiter in der TopBar-Zeile sitzen und der Ribbon-Inhalt darunter
// — beide teilen sich denselben aktiven Tab. // — beide teilen sich denselben aktiven Tab.
const [ribbonTab, setRibbonTab] = useState<RibbonTabId>("2d"); const [ribbonTab, setRibbonTab] = useState<RibbonTabId>("views");
const [activeWallTypeId, setActiveWallTypeId] = useState<string>( const [activeWallTypeId, setActiveWallTypeId] = useState<string>(
project.wallTypes[0].id, project.wallTypes[0].id,
); );
@@ -3232,11 +3232,6 @@ export default function App() {
onSelectTool={onSelectTool} onSelectTool={onSelectTool}
onRunCommand={onRunCommand} onRunCommand={onRunCommand}
tabContent={{ tabContent={{
text: (
<div className="ribbon-views">
<TextGroup textTarget={textTarget} />
</div>
),
views: ( views: (
<ViewRibbonTab <ViewRibbonTab
viewToggleEnabled={activeLevel.kind === "floor"} viewToggleEnabled={activeLevel.kind === "floor"}
@@ -3283,6 +3278,7 @@ export default function App() {
}, },
deleteDrawingCombo, deleteDrawingCombo,
}} }}
textTarget={textTarget}
/> />
), ),
}} }}
-1
View File
@@ -124,7 +124,6 @@ export const de = {
"ribbon.tab.2d": "2D", "ribbon.tab.2d": "2D",
"ribbon.tab.3d": "3D", "ribbon.tab.3d": "3D",
"ribbon.tab.bim": "BIM", "ribbon.tab.bim": "BIM",
"ribbon.tab.text": "Text",
"ribbon.tab.views": "Ansichten", "ribbon.tab.views": "Ansichten",
"ribbon.group.draw": "Zeichnen", "ribbon.group.draw": "Zeichnen",
"ribbon.group.modify": "Ändern", "ribbon.group.modify": "Ändern",
-1
View File
@@ -123,7 +123,6 @@ export const en: Record<TranslationKey, string> = {
"ribbon.tab.2d": "2D", "ribbon.tab.2d": "2D",
"ribbon.tab.3d": "3D", "ribbon.tab.3d": "3D",
"ribbon.tab.bim": "BIM", "ribbon.tab.bim": "BIM",
"ribbon.tab.text": "Text",
"ribbon.tab.views": "Views", "ribbon.tab.views": "Views",
"ribbon.group.draw": "Draw", "ribbon.group.draw": "Draw",
"ribbon.group.modify": "Modify", "ribbon.group.modify": "Modify",
+10
View File
@@ -991,6 +991,9 @@ export interface ViewRibbonTabProps {
planColorMode: PlanColorMode; planColorMode: PlanColorMode;
onPlanColorMode: (m: PlanColorMode) => void; onPlanColorMode: (m: PlanColorMode) => void;
combos: ComboMenuHandlers; combos: ComboMenuHandlers;
/** Text-/Font-Formatierung auf DERSELBEN Leiste (Raumstempel-Ziel; `null` =
* nur Defaults). Liegt bewusst im „Ansichten"-Tab (Nutzer-Wunsch). */
textTarget: TextTarget | null;
} }
/** /**
@@ -1025,6 +1028,7 @@ export function ViewRibbonTab({
planColorMode, planColorMode,
onPlanColorMode, onPlanColorMode,
combos, combos,
textTarget,
}: ViewRibbonTabProps) { }: ViewRibbonTabProps) {
// „frei" wird über einen Prompt erfasst; akzeptiert „1:35" ODER „35". // „frei" wird über einen Prompt erfasst; akzeptiert „1:35" ODER „35".
const onScaleChange = (value: string) => { const onScaleChange = (value: string) => {
@@ -1248,6 +1252,12 @@ export function ViewRibbonTab({
)} )}
</label> </label>
</div> </div>
<Sep />
{/* Text-/Font-Formatierung auf DERSELBEN Leiste (Nutzer-Wunsch: Text und
Ansichten zusammen) — Stil/Schrift/Grösse + B/I/U · L/C/R + Zeilenhöhe,
formatiert das aktuelle Text-Ziel (Raumstempel) live. */}
<TextGroup textTarget={textTarget} />
</div> </div>
); );
} }
+13 -16
View File
@@ -28,7 +28,7 @@ export interface RibbonGroup {
} }
/** Kennung eines Ribbon-Tabs (fest, für Tab-State + i18n). */ /** Kennung eines Ribbon-Tabs (fest, für Tab-State + i18n). */
export type RibbonTabId = "2d" | "3d" | "bim" | "text" | "views"; export type RibbonTabId = "views" | "2d" | "3d" | "bim";
/** Ein Ribbon-Tab: Beschriftung + gruppierte Elemente. */ /** Ein Ribbon-Tab: Beschriftung + gruppierte Elemente. */
export interface RibbonTab { export interface RibbonTab {
@@ -41,12 +41,20 @@ const t = (id: ToolId): RibbonItem => ({ kind: "tool", id });
const c = (name: string): RibbonItem => ({ kind: "command", name }); const c = (name: string): RibbonItem => ({ kind: "command", name });
/** /**
* Die Ribbon-Tabs (Reihenfolge 2D·3D·BIM·Ansichten). 2D (Zeichnen + Ändern) und * Die Ribbon-Tabs (Reihenfolge Ansichten·2D·3D·BIM). Ansichten" ist der
* BIM (Bauteile) sind datengetrieben aus Werkzeugen/Befehlen; Ansichten" trägt * Standard-Tab (zuerst, initial aktiv) und trägt reichen Custom-Inhalt: die aus
* reichen Custom-Inhalt (aus der TopBar gemergt, siehe `ViewRibbonTab` die * der TopBar gemergte Ansichts-/Zoom-/Darstellungs-Steuerung UND die Text-/Font-
* Registry lässt seine `groups` leer). 3D ist vorerst leer (spätere Phase). * Formatierung auf DERSELBEN Leiste (`ViewRibbonTab` `groups` bleibt leer). 2D
* (Zeichnen + Ändern) und BIM (Bauteile) sind datengetrieben aus Werkzeugen/
* Befehlen; 3D ist vorerst leer (spätere Phase).
*/ */
export const RIBBON_TABS: RibbonTab[] = [ export const RIBBON_TABS: RibbonTab[] = [
{
// Custom-Inhalt (ViewRibbonTab): Ansichts-/Zoom-/Darstellungssteuerung + Text.
id: "views",
labelKey: "ribbon.tab.views",
groups: [],
},
{ {
id: "2d", id: "2d",
labelKey: "ribbon.tab.2d", labelKey: "ribbon.tab.2d",
@@ -97,15 +105,4 @@ export const RIBBON_TABS: RibbonTab[] = [
}, },
], ],
}, },
{
// Custom-Inhalt: die Text-/Font-Formatierung (TextGroup), via tabContent.
id: "text",
labelKey: "ribbon.tab.text",
groups: [],
},
{
id: "views",
labelKey: "ribbon.tab.views",
groups: [],
},
]; ];