mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-19 06:04:05 +00:00
Claude
be2226a38f
Bring both drawers onto the list and field patterns already used by the settings panel, rather than each carrying its own treatment. Navigation menu - Rows adopt the PanelList styling: neutral idle colour with blue reserved for the current view, which previously competed with a dozen other blue rows - Group the list under named headings instead of bare separators - Display options become toggle rows with a switch matching the Switch component, replacing the inconsistent "Active" text notes - Leading icons on a fixed box so labels line up, and an icon for Rename Client - Swap :focus for :focus-visible so clicking no longer leaves an outline - Show the client name in the header, next to the action that renames it View params editor - Compact fields (booleans, colours) sit beside their label instead of below it, which removes a third of the scroll height and pairs control with label - Restore the type hierarchy: option titles were dimmer than their section header. Titles now read as primary with descriptions muted underneath - Sections become cards with hairline separated rows - Section headers are keyboard reachable and mark sections holding custom values - Sticky header and footer with borders, so content no longer scrolls visibly underneath the Apply button, dropping the 10vh padding workaround - Give the presets block a heading and a tinted applied state Collapsed and hidden fields stay mounted and hidden with CSS: the form reads its values from the DOM, so unmounting them would drop them on Apply. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014L7R2LgjMSH2WQbiSP4uRn
51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import { OntimeView, URLPreset } from 'ontime-types';
|
|
import { useSearchParams } from 'react-router';
|
|
|
|
import { useViewUrlPresets } from '../../hooks-query/useUrlPresets';
|
|
import { cx } from '../../utils/styleUtils';
|
|
import Button from '../buttons/Button';
|
|
|
|
import style from './ViewParamsPresets.module.scss';
|
|
|
|
/**
|
|
* Shows a list of presets for the current view
|
|
*/
|
|
export function ViewParamsPresets({ target }: { target: OntimeView }) {
|
|
const { viewPresets } = useViewUrlPresets(target);
|
|
const [searchParams, setSearchParams] = useSearchParams();
|
|
|
|
const handleRecall = (preset: URLPreset) => {
|
|
const newSearch = new URLSearchParams(preset.search);
|
|
newSearch.set('alias', preset.alias);
|
|
setSearchParams(newSearch);
|
|
};
|
|
|
|
if (viewPresets.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className={style.presetSection}>
|
|
<div className={style.header}>Presets</div>
|
|
<div className={style.presetList}>
|
|
{viewPresets.map((preset) => {
|
|
const active = searchParams.get('alias') === preset.alias;
|
|
return (
|
|
<div key={preset.alias} className={cx([style.preset, active && style.active])}>
|
|
<div>{preset.alias}</div>
|
|
<Button
|
|
variant={active ? 'ghosted' : 'subtle-white'}
|
|
onClick={() => handleRecall(preset)}
|
|
disabled={active}
|
|
className={style.presetActions}
|
|
>
|
|
{active ? 'Applied' : 'Apply'}
|
|
</Button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|