GovOPlaN/govoplan-core
2
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

Add shared WebUI layout primitives

Browse Source
This commit is contained in:
zemion
2026-08-18 10:42:55 +02:00
parent dd7ad4d9c7
commit 6814a41ae4
22 changed files with 574 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/features/settings/SettingsPage.tsx
+19 -18
View File
@@ -1,3 +1,4 @@
import ContentGrid, { FormGrid } from "../../components/ContentGrid";
import { useEffect, useMemo, useState } from "react";
import { useSearchParams } from "react-router";
import type { ApiSettings, AuthInfo, AuthUpdate, FilesConnectorsUiCapability, MailProfilesUiCapability, SettingsSectionContribution, SettingsSectionsUiCapability, UserUiPreferences, UserUiTheme } from "../../types";
@@ -317,9 +318,9 @@ export default function SettingsPage({
</div>
{active === "profile" &&
<div className="dashboard-grid settings-dashboard-grid">
<ContentGrid columns={2} collapseAt="workspace" className="">
<Card title="i18n:govoplan-core.my_profile.2f3df0a9">
<div className="form-grid">
<FormGrid columns={1} collapseAt="standard" className="">
<FormField label="i18n:govoplan-core.account_display_name.03ed8fc5" help="i18n:govoplan-core.this_global_name_is_shown_in_the_title_bar_and_f.1d46240e">
<input value={profileName} onChange={(event) => setProfileName(event.target.value)} placeholder={auth.user.email} />
</FormField>
@@ -340,7 +341,7 @@ export default function SettingsPage({
</Button>
</div>
{profileResult && <DismissibleAlert tone={profileResultTone} resetKey={profileResult} floating>{profileResult}</DismissibleAlert>}
</div>
</FormGrid>
</Card>
<Card title="i18n:govoplan-core.account_context.5bb0a918">
<dl className="detail-list compact-detail-list">
@@ -351,7 +352,7 @@ export default function SettingsPage({
</dl>
<p className="muted small-note">i18n:govoplan-core.email_changes_and_password_management_require_de.f7443b69</p>
</Card>
</div>
</ContentGrid>
}
{active === "mail-profiles" && MailProfileScopeManager &&
@@ -393,9 +394,9 @@ export default function SettingsPage({
}
{active === "interface" &&
<div className="dashboard-grid settings-dashboard-grid">
<ContentGrid columns={2} collapseAt="workspace" className="">
<Card title="i18n:govoplan-core.interface_preferences.b82b39a7">
<div className="form-grid">
<FormGrid columns={1} collapseAt="standard" className="">
<ToggleSwitch
label="i18n:govoplan-core.compact_tables.c755d9ee"
help="i18n:govoplan-core.prepared_ui_preference_for_denser_tables_the_cur.45698d83"
@@ -425,10 +426,10 @@ export default function SettingsPage({
</Button>
</div>
{uiResult && <DismissibleAlert tone={uiResultTone} resetKey={uiResult} floating>{uiResult}</DismissibleAlert>}
</div>
</FormGrid>
</Card>
<Card title="i18n:govoplan-core.theme_and_language.60a8cf59">
<div className="form-grid">
<FormGrid columns={1} collapseAt="standard" className="">
<FormField label="i18n:govoplan-core.language.89b86ab0">
<select value={language} onChange={(event) => setLanguage(event.target.value)} disabled={selectableLanguages.length <= 1}>
{selectableLanguages.map((item) =>
@@ -455,15 +456,15 @@ export default function SettingsPage({
<div><dt>i18n:govoplan-core.available.7c62a142</dt><dd>{availableLanguages.map((item) => item.code.toUpperCase()).join(", ")}</dd></div>
<div><dt>i18n:govoplan-core.density.f9160c22</dt><dd>{compactTables ? "i18n:govoplan-core.compact_preview.3e06901d" : "i18n:govoplan-core.comfortable.2313707a"}</dd></div>
</dl>
</div>
</FormGrid>
</Card>
</div>
</ContentGrid>
}
{active === "workspace" &&
<div className="dashboard-grid settings-dashboard-grid">
<ContentGrid columns={2} collapseAt="workspace" className="">
<Card title="i18n:govoplan-core.campaign_workspace.c345580f">
<div className="form-grid">
<FormGrid columns={1} collapseAt="standard" className="">
<ToggleSwitch
label="i18n:govoplan-core.sticky_section_sidebars.399c92d4"
help="i18n:govoplan-core.keeps_campaign_and_admin_section_navigation_in_v.f3602938"
@@ -488,7 +489,7 @@ export default function SettingsPage({
</Button>
</div>
{uiResult && <DismissibleAlert tone={uiResultTone} resetKey={uiResult} floating>{uiResult}</DismissibleAlert>}
</div>
</FormGrid>
</Card>
<Card title="i18n:govoplan-core.editor_behavior.99581bc1">
<div className="placeholder-stack">
@@ -498,13 +499,13 @@ export default function SettingsPage({
<span>i18n:govoplan-core.template_placeholder_chips_and_preview_overlays.11634d55</span>
</div>
</Card>
</div>
</ContentGrid>
}
{active === "local-connection" &&
<div className="dashboard-grid settings-dashboard-grid">
<ContentGrid columns={2} collapseAt="workspace" className="">
<Card title="i18n:govoplan-core.local_api_connection.bfb02921">
<div className="form-grid">
<FormGrid columns={1} collapseAt="standard" className="">
<FormField label="i18n:govoplan-core.api_base_url.1358fba4" help="i18n:govoplan-core.leave_empty_to_use_the_same_origin_in_vite_dev_a.9a1c25d7">
<input value={settings.apiBaseUrl} onChange={(e) => onSettingsChange({ ...settings, apiBaseUrl: e.target.value })} placeholder="https://example.org or empty" />
</FormField>
@@ -526,7 +527,7 @@ export default function SettingsPage({
</Button>
</div>
{testResult && <DismissibleAlert tone={testResultTone} resetKey={testResult} floating>{testResult}</DismissibleAlert>}
</div>
</FormGrid>
</Card>
<Card title="i18n:govoplan-core.session_state.b7a3d0f4">
<dl className="detail-list compact-detail-list">
@@ -536,7 +537,7 @@ export default function SettingsPage({
</dl>
<p className="muted small-note">i18n:govoplan-core.tenant_user_mail_server_and_policy_administratio.2f551271</p>
</Card>
</div>
</ContentGrid>
}
{activeContributedSection &&