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

Adopt shared WebUI layout primitives

Browse Source
This commit is contained in:
zemion
2026-08-18 10:42:53 +02:00
parent 11f175cbb3
commit 570709b0bd
3 changed files with 14 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/features/postbox/PostboxAdminPanel.tsx
+9 -9
View File
@@ -12,7 +12,7 @@ import {
Save, Save,
Trash2 Trash2
} from "lucide-react"; } from "lucide-react";
import { import { FormGrid,
ActionBlockerHint, ActionBlockerHint,
AdminPageLayout, AdminPageLayout,
Button, Button,
@@ -990,7 +990,7 @@ function TemplateDialog({
</div> </div>
} }
> >
<div className="postbox-form-grid two-columns"> <FormGrid columns={2} gap="small" collapseAt="narrow" className="postbox-form-grid">
<FormField label="Name" documentation={POSTBOX_FIELD_DOCUMENTATION}> <FormField label="Name" documentation={POSTBOX_FIELD_DOCUMENTATION}>
<input <input
value={draft.name} value={draft.name}
@@ -1157,7 +1157,7 @@ function TemplateDialog({
/> />
</div> </div>
{linkedCopy.enabled ? ( {linkedCopy.enabled ? (
<div className="postbox-form-grid two-columns"> <FormGrid columns={2} gap="small" collapseAt="narrow" className="postbox-form-grid">
<FormField label="Organization structure" documentation={POSTBOX_FIELD_DOCUMENTATION}> <FormField label="Organization structure" documentation={POSTBOX_FIELD_DOCUMENTATION}>
<select <select
value={linkedCopy.structure_id || ""} value={linkedCopy.structure_id || ""}
@@ -1344,10 +1344,10 @@ function TemplateDialog({
/> />
</FormField> </FormField>
) : <div />} ) : <div />}
</div> </FormGrid>
) : null} ) : null}
</div> </div>
</div> </FormGrid>
{preview ? <TemplateImpactPreview preview={preview} /> : null} {preview ? <TemplateImpactPreview preview={preview} /> : null}
<p className="postbox-form-note"> <p className="postbox-form-note">
Available pattern variables include template, unit, function, and optional context names or slugs. Published revisions are immutable. Available pattern variables include template, unit, function, and optional context names or slugs. Published revisions are immutable.
@@ -1444,7 +1444,7 @@ function ExactPostboxDialog({
</div> </div>
} }
> >
<div className="postbox-form-grid two-columns"> <FormGrid columns={2} gap="small" collapseAt="narrow" className="postbox-form-grid">
<FormField label="Name" documentation={POSTBOX_FIELD_DOCUMENTATION}> <FormField label="Name" documentation={POSTBOX_FIELD_DOCUMENTATION}>
<input value={draft.name} onChange={(event) => onChange({ ...draft, name: event.target.value })} /> <input value={draft.name} onChange={(event) => onChange({ ...draft, name: event.target.value })} />
</FormField> </FormField>
@@ -1491,7 +1491,7 @@ function ExactPostboxDialog({
onChange={(checked) => onChange({ ...draft, portal_visible: checked })} onChange={(checked) => onChange({ ...draft, portal_visible: checked })}
/> />
</div> </div>
</div> </FormGrid>
</Dialog> </Dialog>
); );
} }
@@ -1541,7 +1541,7 @@ function MaterializeDialog({
</div> </div>
} }
> >
<div className="postbox-form-grid"> <FormGrid gap="small" className="postbox-form-grid">
<FormField label="Organization unit" documentation={POSTBOX_FIELD_DOCUMENTATION}> <FormField label="Organization unit" documentation={POSTBOX_FIELD_DOCUMENTATION}>
<select <select
value={draft.organization_unit_id} value={draft.organization_unit_id}
@@ -1571,7 +1571,7 @@ function MaterializeDialog({
<FormField label="Optional case or service context" documentation={POSTBOX_FIELD_DOCUMENTATION}> <FormField label="Optional case or service context" documentation={POSTBOX_FIELD_DOCUMENTATION}>
<input value={draft.context_key} onChange={(event) => onChange({ ...draft, context_key: event.target.value })} /> <input value={draft.context_key} onChange={(event) => onChange({ ...draft, context_key: event.target.value })} />
</FormField> </FormField>
</div> </FormGrid>
</Dialog> </Dialog>
); );
} }
webui/src/features/postbox/PostboxPage.tsx
+5 -5
View File
@@ -18,7 +18,7 @@ import {
UserRoundCheck, UserRoundCheck,
X X
} from "lucide-react"; } from "lucide-react";
import { import { FormGrid,
ActionBlockerHint, ActionBlockerHint,
Button, Button,
ConfirmDialog, ConfirmDialog,
@@ -938,7 +938,7 @@ export default function PostboxPage({
</div> </div>
} }
> >
<div className="postbox-form-grid"> <FormGrid gap="small" className="postbox-form-grid">
<FormField label="Name" documentation={POSTBOX_FIELD_DOCUMENTATION}> <FormField label="Name" documentation={POSTBOX_FIELD_DOCUMENTATION}>
<input <input
value={groupingDraft.name} value={groupingDraft.name}
@@ -962,7 +962,7 @@ export default function PostboxPage({
} }
/> />
</div> </div>
</div> </FormGrid>
<fieldset className="postbox-source-selector"> <fieldset className="postbox-source-selector">
<legend>Source postboxes</legend> <legend>Source postboxes</legend>
{postboxes.map((postbox) => ( {postboxes.map((postbox) => (
@@ -1014,7 +1014,7 @@ export default function PostboxPage({
</div> </div>
} }
> >
<div className="postbox-compose-grid"> <FormGrid columns={2} gap="small" collapseAt="narrow" className="postbox-compose-grid">
<FormField label="Postbox" documentation={POSTBOX_FIELD_DOCUMENTATION}> <FormField label="Postbox" documentation={POSTBOX_FIELD_DOCUMENTATION}>
<select <select
value={messageDraft.postbox_id} value={messageDraft.postbox_id}
@@ -1099,7 +1099,7 @@ export default function PostboxPage({
/> />
</FormField> </FormField>
</div> </div>
</div> </FormGrid>
</Dialog> </Dialog>
<ConfirmDialog <ConfirmDialog
webui/src/styles/postbox.css
-15
View File
@@ -420,15 +420,6 @@
width: min(900px, calc(100vw - 32px)); width: min(900px, calc(100vw - 32px));
} }
.postbox-form-grid {
display: grid;
gap: 14px;
}
.postbox-form-grid.two-columns {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.postbox-form-grid input, .postbox-form-grid input,
.postbox-form-grid select { .postbox-form-grid select {
width: 100%; width: 100%;
@@ -600,9 +591,7 @@
} }
.postbox-compose-grid { .postbox-compose-grid {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(160px, 1fr); grid-template-columns: minmax(0, 2fr) minmax(160px, 1fr);
gap: 12px;
} }
.postbox-compose-wide { .postbox-compose-wide {
@@ -755,7 +744,6 @@
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.postbox-form-grid.two-columns,
.postbox-provenance dl, .postbox-provenance dl,
.postbox-admin-properties { .postbox-admin-properties {
grid-template-columns: 1fr; grid-template-columns: 1fr;
@@ -770,7 +758,4 @@
flex-direction: column; flex-direction: column;
} }
.postbox-compose-grid {
grid-template-columns: 1fr;
}
} }