Adopt shared WebUI layout primitives

This commit is contained in:
2026-08-18 10:42:54 +02:00
parent db76260010
commit 4ec5d56055
2 changed files with 8 additions and 11 deletions
+7 -7
View File
@@ -12,7 +12,7 @@ import {
XCircle XCircle
} from "lucide-react"; } from "lucide-react";
import { Link } from "react-router"; import { Link } from "react-router";
import { import { FormGrid, ToolbarGroup,
AdminIconButton, AdminIconButton,
Button, Button,
DateTimeField, DateTimeField,
@@ -125,7 +125,7 @@ export default function TasksPage({ settings, auth }: { settings: ApiSettings; a
<aside className="tasks-sidebar"> <aside className="tasks-sidebar">
<div className="tasks-sidebar-bar"> <div className="tasks-sidebar-bar">
<span className="tasks-title"><ListChecks size={18} /><strong>i18n:govoplan-tasks.work</strong></span> <span className="tasks-title"><ListChecks size={18} /><strong>i18n:govoplan-tasks.work</strong></span>
<span className="tasks-toolbar-actions"> <ToolbarGroup align="end" className="tasks-toolbar-actions">
<AdminIconButton <AdminIconButton
label="i18n:govoplan-tasks.refresh" label="i18n:govoplan-tasks.refresh"
icon={<RefreshCw size={16} aria-hidden="true" />} icon={<RefreshCw size={16} aria-hidden="true" />}
@@ -141,7 +141,7 @@ export default function TasksPage({ settings, auth }: { settings: ApiSettings; a
helpContextId="tasks.action.create" helpContextId="tasks.action.create"
/> />
) : null} ) : null}
</span> </ToolbarGroup>
</div> </div>
<form className="tasks-search" onSubmit={submitSearch} role="search"> <form className="tasks-search" onSubmit={submitSearch} role="search">
<Search size={15} aria-hidden="true" /> <Search size={15} aria-hidden="true" />
@@ -188,10 +188,10 @@ export default function TasksPage({ settings, auth }: { settings: ApiSettings; a
<section className="tasks-workspace" data-help-context-id="tasks.page.detail"> <section className="tasks-workspace" data-help-context-id="tasks.page.detail">
<div className="tasks-topbar"> <div className="tasks-topbar">
<span className="tasks-detail-title"><ListChecks size={18} /><strong>{selected?.title ?? "i18n:govoplan-tasks.work_details"}</strong></span> <span className="tasks-detail-title"><ListChecks size={18} /><strong>{selected?.title ?? "i18n:govoplan-tasks.work_details"}</strong></span>
<span className="tasks-toolbar-actions"> <ToolbarGroup align="end" className="tasks-toolbar-actions">
<DocumentationHelpLink reference={DOCUMENTATION} /> <DocumentationHelpLink reference={DOCUMENTATION} />
{selected?.provider_id === "tasks.explicit" && canWrite ? <TaskActions item={selected} busy={busy} onAction={(action) => action === "defer" ? setDeferOpen(true) : void runAction(action)} /> : null} {selected?.provider_id === "tasks.explicit" && canWrite ? <TaskActions item={selected} busy={busy} onAction={(action) => action === "defer" ? setDeferOpen(true) : void runAction(action)} /> : null}
</span> </ToolbarGroup>
</div> </div>
{error ? <DismissibleAlert tone="danger" compact resetKey={error}>{error}</DismissibleAlert> : null} {error ? <DismissibleAlert tone="danger" compact resetKey={error}>{error}</DismissibleAlert> : null}
@@ -323,10 +323,10 @@ function CreateTaskDialog({ open, busy, settings, auth, onClose, onCreated, onEr
<form id="tasks-create-form" className="tasks-create-form" onSubmit={submit}> <form id="tasks-create-form" className="tasks-create-form" onSubmit={submit}>
<FormField label="i18n:govoplan-tasks.title"><input value={title} onChange={(event) => setTitle(event.target.value)} maxLength={500} autoFocus required /></FormField> <FormField label="i18n:govoplan-tasks.title"><input value={title} onChange={(event) => setTitle(event.target.value)} maxLength={500} autoFocus required /></FormField>
<FormField label="i18n:govoplan-tasks.summary"><textarea value={summary} onChange={(event) => setSummary(event.target.value)} maxLength={4000} rows={4} /></FormField> <FormField label="i18n:govoplan-tasks.summary"><textarea value={summary} onChange={(event) => setSummary(event.target.value)} maxLength={4000} rows={4} /></FormField>
<div className="tasks-create-grid"> <FormGrid columns={2} gap="small" collapseAt="workspace" className="tasks-create-grid">
<FormField label="i18n:govoplan-tasks.priority" helpContextId="tasks.field.priority"><select value={priority} onChange={(event) => setPriority(event.target.value as WorkPriority)}><option value="low">i18n:govoplan-tasks.priority.low</option><option value="normal">i18n:govoplan-tasks.priority.normal</option><option value="high">i18n:govoplan-tasks.priority.high</option><option value="urgent">i18n:govoplan-tasks.priority.urgent</option></select></FormField> <FormField label="i18n:govoplan-tasks.priority" helpContextId="tasks.field.priority"><select value={priority} onChange={(event) => setPriority(event.target.value as WorkPriority)}><option value="low">i18n:govoplan-tasks.priority.low</option><option value="normal">i18n:govoplan-tasks.priority.normal</option><option value="high">i18n:govoplan-tasks.priority.high</option><option value="urgent">i18n:govoplan-tasks.priority.urgent</option></select></FormField>
<FormField label="i18n:govoplan-tasks.due_at" helpContextId="tasks.field.due-at"><DateTimeField value={dueAt} onChange={setDueAt} min={localDateTime(new Date())} /></FormField> <FormField label="i18n:govoplan-tasks.due_at" helpContextId="tasks.field.due-at"><DateTimeField value={dueAt} onChange={setDueAt} min={localDateTime(new Date())} /></FormField>
</div> </FormGrid>
<FormField label="i18n:govoplan-tasks.required_action"><input value={requiredAction} onChange={(event) => setRequiredAction(event.target.value)} maxLength={500} /></FormField> <FormField label="i18n:govoplan-tasks.required_action"><input value={requiredAction} onChange={(event) => setRequiredAction(event.target.value)} maxLength={500} /></FormField>
<p className="tasks-assignment-note">i18n:govoplan-tasks.assigned_to_you</p> <p className="tasks-assignment-note">i18n:govoplan-tasks.assigned_to_you</p>
</form> </form>
+1 -4
View File
@@ -259,9 +259,7 @@
} }
.tasks-create-grid { .tasks-create-grid {
display: grid;
grid-template-columns: minmax(150px, .75fr) minmax(260px, 1.25fr); grid-template-columns: minmax(150px, .75fr) minmax(260px, 1.25fr);
gap: 12px;
} }
.tasks-assignment-note { .tasks-assignment-note {
@@ -285,8 +283,7 @@
align-items: flex-start; align-items: flex-start;
} }
.tasks-properties dl, .tasks-properties dl {
.tasks-create-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }