Define semantic page archetypes
This commit is contained in:
@@ -1,36 +1,71 @@
|
||||
import type { HTMLAttributes, ReactNode } from "react";
|
||||
import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
|
||||
import type { PlatformInterfaceIdentityProps } from "../types";
|
||||
import ActionToolbar, { ToolbarGroup } from "./ActionToolbar";
|
||||
import Button from "./Button";
|
||||
|
||||
type RefreshablePageActions = {
|
||||
refreshable: true;
|
||||
reloadAction: ReactNode;
|
||||
} | {
|
||||
refreshable?: false;
|
||||
reloadAction?: never;
|
||||
};
|
||||
|
||||
type PageActionBarCommonProps = PlatformInterfaceIdentityProps &
|
||||
Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
|
||||
reloadAction: ReactNode;
|
||||
contextActions?: ReactNode;
|
||||
helpAction?: ReactNode;
|
||||
label?: string;
|
||||
};
|
||||
|
||||
export type CollectionPageActionBarProps = PageActionBarCommonProps & {
|
||||
export type PageEditorAction = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & PlatformInterfaceIdentityProps & {
|
||||
label: ReactNode;
|
||||
disabledReason?: ReactNode;
|
||||
};
|
||||
|
||||
export type OverviewPageActionBarProps = PageActionBarCommonProps & RefreshablePageActions & {
|
||||
variant: "overview";
|
||||
primaryActions?: ReactNode;
|
||||
};
|
||||
|
||||
export type CollectionPageActionBarProps = PageActionBarCommonProps & RefreshablePageActions & {
|
||||
variant: "collection";
|
||||
createAction?: ReactNode;
|
||||
};
|
||||
|
||||
export type DetailPageActionBarProps = PageActionBarCommonProps & {
|
||||
export type DetailPageActionBarProps = PageActionBarCommonProps & RefreshablePageActions & {
|
||||
variant: "detail";
|
||||
primaryActions?: ReactNode;
|
||||
consequentialActions?: ReactNode;
|
||||
destructiveActions?: ReactNode;
|
||||
};
|
||||
|
||||
export type EditorPageActionBarProps = PageActionBarCommonProps & {
|
||||
export type EditorPageActionBarProps = PageActionBarCommonProps & RefreshablePageActions & {
|
||||
variant: "editor";
|
||||
discardAction: ReactNode;
|
||||
saveAction: ReactNode;
|
||||
dirty: boolean;
|
||||
saving?: boolean;
|
||||
dirtyLabel?: ReactNode;
|
||||
cleanLabel?: ReactNode;
|
||||
savingLabel?: ReactNode;
|
||||
cleanDisabledReason?: ReactNode;
|
||||
savingDisabledReason?: ReactNode;
|
||||
discardAction: PageEditorAction;
|
||||
saveAction: PageEditorAction;
|
||||
primaryActions?: ReactNode;
|
||||
destructiveActions?: ReactNode;
|
||||
};
|
||||
|
||||
export type WorkspacePageActionBarProps = PageActionBarCommonProps & RefreshablePageActions & {
|
||||
variant: "workspace";
|
||||
primaryActions?: ReactNode;
|
||||
destructiveActions?: ReactNode;
|
||||
};
|
||||
|
||||
export type PageActionBarProps =
|
||||
| OverviewPageActionBarProps
|
||||
| CollectionPageActionBarProps
|
||||
| DetailPageActionBarProps
|
||||
| EditorPageActionBarProps;
|
||||
| EditorPageActionBarProps
|
||||
| WorkspacePageActionBarProps;
|
||||
|
||||
function ActionSlot({ name, children }: { name: string; children: ReactNode }) {
|
||||
return (
|
||||
@@ -41,11 +76,41 @@ function ActionSlot({ name, children }: { name: string; children: ReactNode }) {
|
||||
}
|
||||
|
||||
const defaultLabels = {
|
||||
overview: "Overview page actions",
|
||||
collection: "Collection page actions",
|
||||
detail: "Detail page actions",
|
||||
editor: "Editor page actions"
|
||||
editor: "Editor page actions",
|
||||
workspace: "Workspace page actions"
|
||||
} as const;
|
||||
|
||||
function DestructiveSlot({ children }: { children: ReactNode }) {
|
||||
if (!children) return null;
|
||||
return (
|
||||
<ActionSlot name="destructive">
|
||||
<span className="page-action-destructive-group" data-page-action-separation="destructive">
|
||||
{children}
|
||||
</span>
|
||||
</ActionSlot>
|
||||
);
|
||||
}
|
||||
|
||||
function EditorAction({
|
||||
action,
|
||||
variant,
|
||||
disabledReason
|
||||
}: {
|
||||
action: PageEditorAction;
|
||||
variant: "ghost" | "primary";
|
||||
disabledReason?: ReactNode;
|
||||
}) {
|
||||
const { label, disabledReason: actionDisabledReason, ...buttonProps } = action;
|
||||
return (
|
||||
<Button {...buttonProps} variant={variant} disabledReason={disabledReason ?? actionDisabledReason}>
|
||||
{label}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Semantic action placement for headed pages.
|
||||
*
|
||||
@@ -56,18 +121,33 @@ export default function PageActionBar(props: PageActionBarProps) {
|
||||
const normalizedProps = props as PageActionBarProps & {
|
||||
createAction?: ReactNode;
|
||||
primaryActions?: ReactNode;
|
||||
consequentialActions?: ReactNode;
|
||||
discardAction?: ReactNode;
|
||||
saveAction?: ReactNode;
|
||||
destructiveActions?: ReactNode;
|
||||
dirty?: boolean;
|
||||
saving?: boolean;
|
||||
dirtyLabel?: ReactNode;
|
||||
cleanLabel?: ReactNode;
|
||||
savingLabel?: ReactNode;
|
||||
cleanDisabledReason?: ReactNode;
|
||||
savingDisabledReason?: ReactNode;
|
||||
discardAction?: PageEditorAction;
|
||||
saveAction?: PageEditorAction;
|
||||
};
|
||||
const {
|
||||
variant,
|
||||
refreshable = false,
|
||||
reloadAction,
|
||||
contextActions,
|
||||
helpAction,
|
||||
createAction,
|
||||
primaryActions,
|
||||
consequentialActions,
|
||||
destructiveActions,
|
||||
dirty = false,
|
||||
saving = false,
|
||||
dirtyLabel = "Unsaved changes",
|
||||
cleanLabel = "Saved",
|
||||
savingLabel = "Saving…",
|
||||
cleanDisabledReason = "There are no unsaved changes.",
|
||||
savingDisabledReason = "Changes are already being saved.",
|
||||
discardAction,
|
||||
saveAction,
|
||||
label,
|
||||
@@ -80,20 +160,36 @@ export default function PageActionBar(props: PageActionBarProps) {
|
||||
} = normalizedProps;
|
||||
|
||||
let trailingActions: ReactNode;
|
||||
if (variant === "collection") {
|
||||
if (variant === "overview") {
|
||||
trailingActions = primaryActions ? <ActionSlot name="primary">{primaryActions}</ActionSlot> : null;
|
||||
} else if (variant === "collection") {
|
||||
trailingActions = createAction ? <ActionSlot name="create">{createAction}</ActionSlot> : null;
|
||||
} else if (variant === "detail") {
|
||||
trailingActions = (
|
||||
<>
|
||||
{primaryActions ? <ActionSlot name="primary">{primaryActions}</ActionSlot> : null}
|
||||
{consequentialActions ? <ActionSlot name="consequential">{consequentialActions}</ActionSlot> : null}
|
||||
<DestructiveSlot>{destructiveActions}</DestructiveSlot>
|
||||
</>
|
||||
);
|
||||
} else if (variant === "editor") {
|
||||
const persistenceDisabledReason = saving ? savingDisabledReason : !dirty ? cleanDisabledReason : undefined;
|
||||
trailingActions = (
|
||||
<>
|
||||
{primaryActions ? <ActionSlot name="primary">{primaryActions}</ActionSlot> : null}
|
||||
<DestructiveSlot>{destructiveActions}</DestructiveSlot>
|
||||
<ActionSlot name="discard">
|
||||
<EditorAction action={discardAction!} variant="ghost" disabledReason={persistenceDisabledReason} />
|
||||
</ActionSlot>
|
||||
<ActionSlot name="save">
|
||||
<EditorAction action={saveAction!} variant="primary" disabledReason={persistenceDisabledReason} />
|
||||
</ActionSlot>
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
trailingActions = (
|
||||
<>
|
||||
<ActionSlot name="discard">{discardAction}</ActionSlot>
|
||||
<ActionSlot name="save">{saveAction}</ActionSlot>
|
||||
{primaryActions ? <ActionSlot name="primary">{primaryActions}</ActionSlot> : null}
|
||||
<DestructiveSlot>{destructiveActions}</DestructiveSlot>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -111,12 +207,24 @@ export default function PageActionBar(props: PageActionBarProps) {
|
||||
helpModuleId={helpModuleId}
|
||||
helpTopicId={helpTopicId}
|
||||
data-page-action-archetype={variant}
|
||||
data-page-refreshable={refreshable ? "true" : "false"}
|
||||
data-page-dirty={variant === "editor" ? (dirty ? "true" : "false") : undefined}
|
||||
>
|
||||
<ToolbarGroup className="page-action-bar-leading" data-page-action-group="leading">
|
||||
<ActionSlot name="reload">{reloadAction}</ActionSlot>
|
||||
{refreshable ? <ActionSlot name="reload">{reloadAction}</ActionSlot> : null}
|
||||
{contextActions ? <ActionSlot name="context">{contextActions}</ActionSlot> : null}
|
||||
</ToolbarGroup>
|
||||
<ToolbarGroup className="page-action-bar-trailing" align="end" data-page-action-group="trailing">
|
||||
{variant === "editor" ? (
|
||||
<span
|
||||
className={`page-dirty-state page-dirty-state-${saving ? "saving" : dirty ? "dirty" : "clean"}`}
|
||||
data-page-dirty-state={saving ? "saving" : dirty ? "dirty" : "clean"}
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
{saving ? savingLabel : dirty ? dirtyLabel : cleanLabel}
|
||||
</span>
|
||||
) : null}
|
||||
{helpAction ? <ActionSlot name="help">{helpAction}</ActionSlot> : null}
|
||||
{trailingActions}
|
||||
</ToolbarGroup>
|
||||
|
||||
@@ -7,6 +7,7 @@ import PageScrollViewport from "./PageScrollViewport";
|
||||
import PageTitle from "./PageTitle";
|
||||
|
||||
export type PageLayoutMode = "standalone" | "workspace" | "embedded";
|
||||
export type PageArchetype = "overview" | "collection" | "detail" | "editor" | "workspace";
|
||||
|
||||
export type PageHeaderProps = {
|
||||
title: ReactNode;
|
||||
@@ -48,6 +49,8 @@ export function PageHeader({
|
||||
}
|
||||
|
||||
export type PageLayoutProps = PlatformInterfaceIdentityProps & {
|
||||
/** Semantic page intent. This is independent from viewport/layout geometry. */
|
||||
archetype: PageArchetype;
|
||||
title: ReactNode;
|
||||
description?: ReactNode;
|
||||
actions?: ReactNode;
|
||||
@@ -70,6 +73,7 @@ export type PageLayoutProps = PlatformInterfaceIdentityProps & {
|
||||
};
|
||||
|
||||
export default function PageLayout({
|
||||
archetype,
|
||||
title,
|
||||
description,
|
||||
actions,
|
||||
@@ -107,6 +111,7 @@ export default function PageLayout({
|
||||
const layout = (
|
||||
<div
|
||||
className={layoutClasses}
|
||||
data-page-archetype={archetype}
|
||||
data-help-scope="page"
|
||||
data-interface-id={interfaceId}
|
||||
data-help-context-id={helpContextId}
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import type { ReactNode } from "react";
|
||||
import type { PlatformInterfaceIdentityProps } from "../../types";
|
||||
import PageLayout from "../PageLayout";
|
||||
import PageLayout, { type PageArchetype } from "../PageLayout";
|
||||
|
||||
export type AdminPageLayoutProps = PlatformInterfaceIdentityProps & {
|
||||
archetype?: PageArchetype;
|
||||
title: string;
|
||||
description: string;
|
||||
loading?: boolean;
|
||||
@@ -15,6 +16,7 @@ export type AdminPageLayoutProps = PlatformInterfaceIdentityProps & {
|
||||
};
|
||||
|
||||
export default function AdminPageLayout({
|
||||
archetype = "detail",
|
||||
title,
|
||||
description,
|
||||
loading = false,
|
||||
@@ -31,6 +33,7 @@ export default function AdminPageLayout({
|
||||
}: AdminPageLayoutProps) {
|
||||
return (
|
||||
<PageLayout
|
||||
archetype={archetype}
|
||||
title={title}
|
||||
description={description}
|
||||
loading={loading}
|
||||
|
||||
@@ -11,6 +11,7 @@ export default function DashboardPage() {
|
||||
|
||||
return (
|
||||
<PageLayout
|
||||
archetype="overview"
|
||||
title="i18n:govoplan-core.dashboard.d87f47b4"
|
||||
description="Install and enable the dashboard module to make this page configurable."
|
||||
viewportClassName="core-dashboard-page"
|
||||
|
||||
@@ -8,6 +8,7 @@ import FormField from "../../components/FormField";
|
||||
import PasswordField from "../../components/PasswordField";
|
||||
import Button from "../../components/Button";
|
||||
import PageLayout from "../../components/PageLayout";
|
||||
import PageActionBar from "../../components/PageActionBar";
|
||||
import ToggleSwitch from "../../components/ToggleSwitch";
|
||||
import { apiFetch } from "../../api/client";
|
||||
import { fetchAuthProfile, fetchAuthRoles, updateProfile } from "../../api/auth";
|
||||
@@ -306,6 +307,22 @@ export default function SettingsPage({
|
||||
}
|
||||
}
|
||||
|
||||
const editorSection = active === "profile" || active === "interface" || active === "workspace";
|
||||
const editorDirty = active === "profile" ? profileDirty : editorSection ? uiDirty : false;
|
||||
const editorSaving = active === "profile" ? profileBusy : editorSection ? uiBusy : false;
|
||||
const discardEditor = () => {
|
||||
if (active === "profile") {
|
||||
setProfileName(auth.user.display_name || "");
|
||||
setTenantProfileName(auth.user.tenant_display_name || "");
|
||||
} else {
|
||||
resetUiPreferences();
|
||||
}
|
||||
};
|
||||
const saveEditor = () => {
|
||||
if (active === "profile") void saveProfile();
|
||||
else void saveUiPreferences();
|
||||
};
|
||||
|
||||
return (
|
||||
<WorkspaceLayout
|
||||
className="module-workspace"
|
||||
@@ -314,9 +331,24 @@ export default function SettingsPage({
|
||||
contentLabel="i18n:govoplan-core.settings.c7f73bb5"
|
||||
>
|
||||
<PageLayout
|
||||
archetype={editorSection ? "editor" : "workspace"}
|
||||
title="i18n:govoplan-core.settings.c7f73bb5"
|
||||
description="i18n:govoplan-core.your_profile_personal_webui_preferences_and_loca.beda6d56"
|
||||
actions={<DocumentationHelpLink reference={SETTINGS_DOCUMENTATION} />}
|
||||
actions={editorSection ? (
|
||||
<PageActionBar
|
||||
variant="editor"
|
||||
dirty={editorDirty}
|
||||
saving={editorSaving}
|
||||
helpAction={<DocumentationHelpLink reference={SETTINGS_DOCUMENTATION} />}
|
||||
discardAction={{ label: "i18n:govoplan-core.discard.36fff63c", onClick: discardEditor }}
|
||||
saveAction={{
|
||||
label: active === "profile" ? "i18n:govoplan-core.save_profile.f597c0e8" : "i18n:govoplan-core.save_preferences.0f1a7e44",
|
||||
onClick: saveEditor
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<PageActionBar variant="workspace" helpAction={<DocumentationHelpLink reference={SETTINGS_DOCUMENTATION} />} />
|
||||
)}
|
||||
mode="workspace"
|
||||
>
|
||||
|
||||
@@ -333,16 +365,6 @@ export default function SettingsPage({
|
||||
<FormField label="i18n:govoplan-core.email.84add5b2">
|
||||
<input value={auth.user.email} disabled />
|
||||
</FormField>
|
||||
<div className="button-row compact-actions">
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => void saveProfile()}
|
||||
disabled={profileBusy || !profileDirty}
|
||||
disabledReason={profileBusy ? "Profile changes are already being saved." : !profileDirty ? "There are no unsaved profile changes." : undefined}
|
||||
>
|
||||
{profileBusy ? "i18n:govoplan-core.saving.56a2285c" : "i18n:govoplan-core.save_profile.f597c0e8"}
|
||||
</Button>
|
||||
</div>
|
||||
{profileResult && <DismissibleAlert tone={profileResultTone} resetKey={profileResult} floating>{profileResult}</DismissibleAlert>}
|
||||
</FormGrid>
|
||||
</Card>
|
||||
@@ -418,16 +440,6 @@ export default function SettingsPage({
|
||||
checked={reduceMotion}
|
||||
onChange={setReduceMotion} />
|
||||
|
||||
<div className="button-row compact-actions">
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => void saveUiPreferences()}
|
||||
disabled={uiBusy || !uiDirty}
|
||||
disabledReason={uiBusy ? "Interface preferences are already being saved." : !uiDirty ? "There are no unsaved interface changes." : undefined}
|
||||
>
|
||||
{uiBusy ? "i18n:govoplan-core.saving.56a2285c" : "i18n:govoplan-core.save_preferences.0f1a7e44"}
|
||||
</Button>
|
||||
</div>
|
||||
{uiResult && <DismissibleAlert tone={uiResultTone} resetKey={uiResult} floating>{uiResult}</DismissibleAlert>}
|
||||
</FormGrid>
|
||||
</Card>
|
||||
@@ -481,16 +493,6 @@ export default function SettingsPage({
|
||||
disabled
|
||||
onChange={() => undefined} />
|
||||
|
||||
<div className="button-row compact-actions">
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => void saveUiPreferences()}
|
||||
disabled={uiBusy || !uiDirty}
|
||||
disabledReason={uiBusy ? "Workspace preferences are already being saved." : !uiDirty ? "There are no unsaved workspace changes." : undefined}
|
||||
>
|
||||
{uiBusy ? "i18n:govoplan-core.saving.56a2285c" : "i18n:govoplan-core.save_preferences.0f1a7e44"}
|
||||
</Button>
|
||||
</div>
|
||||
{uiResult && <DismissibleAlert tone={uiResultTone} resetKey={uiResult} floating>{uiResult}</DismissibleAlert>}
|
||||
</FormGrid>
|
||||
</Card>
|
||||
|
||||
+2
-2
@@ -142,9 +142,9 @@ export { default as MessageDisplayPanel } from "./components/MessageDisplayPanel
|
||||
export type { MessageDisplayAttachment, MessageDisplayField } from "./components/MessageDisplayPanel";
|
||||
export { default as PageTitle } from "./components/PageTitle";
|
||||
export { default as PageLayout, PageHeader } from "./components/PageLayout";
|
||||
export type { PageHeaderProps, PageLayoutMode, PageLayoutProps } from "./components/PageLayout";
|
||||
export type { PageArchetype, PageHeaderProps, PageLayoutMode, PageLayoutProps } from "./components/PageLayout";
|
||||
export { default as PageActionBar } from "./components/PageActionBar";
|
||||
export type { CollectionPageActionBarProps, DetailPageActionBarProps, EditorPageActionBarProps, PageActionBarProps } from "./components/PageActionBar";
|
||||
export type { CollectionPageActionBarProps, DetailPageActionBarProps, EditorPageActionBarProps, OverviewPageActionBarProps, PageActionBarProps, PageEditorAction, WorkspacePageActionBarProps } from "./components/PageActionBar";
|
||||
export { default as PageScrollViewport } from "./components/PageScrollViewport";
|
||||
export type { PageScrollViewportProps } from "./components/PageScrollViewport";
|
||||
export { default as WorkspaceLayout } from "./components/WorkspaceLayout";
|
||||
|
||||
@@ -101,6 +101,11 @@
|
||||
.action-toolbar-spacer { flex: 1 1 auto; min-width: 8px; }
|
||||
.page-action-slot { min-width: 0; display: inline-flex; align-items: center; }
|
||||
.page-action-bar-trailing { flex: 0 1 auto; }
|
||||
.page-action-destructive-group { display: inline-flex; align-items: center; gap: var(--space-2); border-inline-start: 2px solid var(--line-dark); margin-inline-start: 4px; padding-inline-start: var(--space-2); }
|
||||
.page-dirty-state { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; color: var(--text-soft); font-size: 12px; font-weight: 700; white-space: nowrap; }
|
||||
.page-dirty-state::before { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--success); content: ""; }
|
||||
.page-dirty-state-dirty::before { background: var(--warning); }
|
||||
.page-dirty-state-saving::before { background: var(--accent); }
|
||||
.app-content { min-height: 0; overflow: hidden; }
|
||||
.workspace { height: 100%; min-height: 0; display: grid; grid-template-columns: 198px minmax(0, 1fr); }
|
||||
.workspace-layout-primary,
|
||||
|
||||
Reference in New Issue
Block a user