mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-10 09:53:48 +00:00
b1848d2982
The settings UI had accumulated three inconsistencies. This addresses all three without renaming any group or breaking `?settings=` deep links. Empty states - Add `Panel.EmptyState` / `Panel.TableEmpty` (title + description + action), promoting the treatment previously local to the spreadsheet PreviewTable. - Add missing empty states to Custom fields, Projects, Rundowns and both Client tables, which previously rendered bare column headers. - Convert the remaining `TableEmpty` call sites off the generic "No data yet". - Rename `.empty` to `.loaderBox` in ProjectPanel, where it meant a loader box rather than an empty state. Entity forms in modals - Add `useEntityModal`, replacing six different open/close mechanisms. - Move the multi-field create/edit forms into `Modal`: automations (wide), triggers, URL presets, custom fields, custom views, new rundown and project merge. Single-field row renames stay inline. - Create and edit now share one surface instead of rendering above the table and in-place respectively, and the list is no longer interactive underneath. - Remove the duplicate project create form; the "New" button now routes to the existing QuickStart modal. Sidebar - Add a search box with per-section keywords, so sections are reachable by the term users have in mind (osc, alias, google sheet, pin...). - Fix duplicated `manage__sheets` id, which highlighted two entries at once. Also - Close button no longer floats over content; drop the 300px padding hack. - Tables scroll with the panel instead of owning a nested scroll area. - Derive divider/table/list padding from a card padding custom property. - Fix an unreachable branch that stopped duplicate custom field labels from being rejected. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UP4knuna8kLe79NAuNDhUJ
62 lines
694 B
SCSS
62 lines
694 B
SCSS
.current {
|
|
background-color: $blue-1100;
|
|
}
|
|
|
|
.isEditing {
|
|
color: $blue-500;
|
|
}
|
|
|
|
.form {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.formInput {
|
|
flex: 2;
|
|
}
|
|
|
|
.saveButton {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.containCell {
|
|
max-width: 50%;
|
|
}
|
|
|
|
.sortableHeader {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
}
|
|
|
|
.fullWidth {
|
|
width: 100%;
|
|
}
|
|
|
|
.innerColumn {
|
|
margin: 0 2rem;
|
|
margin-bottom: 2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1em;
|
|
}
|
|
|
|
.inlineLabels {
|
|
label {
|
|
display: flex;
|
|
gap: 1rem;
|
|
}
|
|
}
|
|
|
|
.warningInfo {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.loaderBox {
|
|
height: 300px;
|
|
position: relative;
|
|
}
|