cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-11 10:23:54 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

refactor(rundown): move offset tip inside the pill, drop labels

Browse Source 
Group labels widened the header and left the label, toggles and icon
reading as three detached elements. Instead keep only the offset
indicator and place it inside the pill, divided from the toggles, so the
control reads as one grouped segmented unit. Mode/View revert to plain
pills.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Hj5P4eDgf97zSCzViGHNDy
This commit is contained in:
Claude
2026-07-19 09:02:30 +00:00
parent a93f2a765e
commit 42c5aa4fe4
2 changed files with 31 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/rundown/rundown-header/RundownHeader.module.scss
+6 -11
View File
@@ -58,24 +58,19 @@
}
}
.controlGroup {
/** inner toggle row when the pill also holds a trailing element (e.g. info icon) */
.segments {
display: flex;
align-items: center;
gap: 0.375rem;
}
.groupLabel {
color: $gray-400;
font-size: calc(1rem - 3px);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
white-space: nowrap;
gap: 2px;
}
.infoIcon {
display: flex;
align-items: center;
height: calc(2rem - 4px); // match .radioButton height
padding-inline: 0.4rem;
border-left: 1px solid $gray-1000;
color: $gray-400;
font-size: calc(1rem + 1px);
cursor: help;
apps/client/src/features/rundown/rundown-header/RundownHeader.tsx
+25 -32
View File
@@ -75,47 +75,40 @@ function RundownHeader({ isExtracted, viewMode, setViewMode }: RundownHeaderProp
return (
<Toolbar.Root className={style.header}>
{showRunEditToggle && (
<div className={style.controlGroup}>
<span className={style.groupLabel}>Mode</span>
<ToggleGroup value={[editorMode]} onValueChange={toggleAppMode} className={style.group}>
<Tooltip
text='Live playback view with auto-follow'
render={<Toolbar.Button render={<Toggle />} value={AppMode.Run} className={style.radioButton} />}
>
Run
</Tooltip>
<Tooltip
text='Manual editing without playback automation'
render={<Toolbar.Button render={<Toggle />} value={AppMode.Edit} className={style.radioButton} />}
>
Edit
</Tooltip>
</ToggleGroup>
</div>
)}
<div className={style.controlGroup}>
<span className={style.groupLabel}>View</span>
<ToggleGroup value={[viewMode]} onValueChange={toggleViewMode} className={style.group}>
<ToggleGroup value={[editorMode]} onValueChange={toggleAppMode} className={style.group}>
<Tooltip
text='View rundown in list mode'
render={<Toolbar.Button render={<Toggle />} value={RundownViewMode.List} className={style.radioButton} />}
text='Live playback view with auto-follow'
render={<Toolbar.Button render={<Toggle />} value={AppMode.Run} className={style.radioButton} />}
>
List
Run
</Tooltip>
<Tooltip
text='View rundown in table mode'
render={<Toolbar.Button render={<Toggle />} value={RundownViewMode.Table} className={style.radioButton} />}
text='Manual editing without playback automation'
render={<Toolbar.Button render={<Toggle />} value={AppMode.Edit} className={style.radioButton} />}
>
Table
Edit
</Tooltip>
</ToggleGroup>
</div>
)}
<ToggleGroup value={[viewMode]} onValueChange={toggleViewMode} className={style.group}>
<Tooltip
text='View rundown in list mode'
render={<Toolbar.Button render={<Toggle />} value={RundownViewMode.List} className={style.radioButton} />}
>
List
</Tooltip>
<Tooltip
text='View rundown in table mode'
render={<Toolbar.Button render={<Toggle />} value={RundownViewMode.Table} className={style.radioButton} />}
>
Table
</Tooltip>
</ToggleGroup>
{showOffsetToggle && (
<div className={style.controlGroup}>
<span className={style.groupLabel}>Offset</span>
<ToggleGroup value={[offsetMode]} onValueChange={toggleOffsetMode} className={style.group}>
<div className={style.group}>
<ToggleGroup value={[offsetMode]} onValueChange={toggleOffsetMode} className={style.segments}>
<Toolbar.Button render={<Toggle />} value={OffsetMode.Absolute} className={style.radioButton}>
Absolute
</Toolbar.Button>