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

style: add label to auxiliary timer

Browse Source
This commit is contained in:
Carlos Valente
2024-06-02 21:42:12 +02:00
committed by Carlos Valente
parent c4359af2a0
commit 73e4a15718
2 changed files with 38 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/control/playback/aux-timer/AuxTimer.module.scss
+9 -2
View File
@@ -1,5 +1,12 @@
.extraRow { .label {
display: block;
margin-top: 2rem;
font-size: $inner-section-text-size;
color: $label-gray;
}
.controls {
margin-top: 0.25rem;
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
margin-top: 2rem;
} }
apps/client/src/features/control/playback/aux-timer/AuxTimer.tsx
+29 -26
View File
@@ -29,33 +29,36 @@ export function AuxTimer() {
}; };
return ( return (
<div className={style.extraRow}> <label className={style.label}>
<AuxTimerInput /> Auxiliary Timer
<TapButton onClick={toggleDirection} aspect='tight'> <div className={style.controls}>
{direction === SimpleDirection.CountDown && <IoArrowDown data-testid='aux-timer-direction' />} <AuxTimerInput />
{direction === SimpleDirection.CountUp && <IoArrowUp data-testid='aux-timer-direction' />} <TapButton onClick={toggleDirection} aspect='tight'>
</TapButton> {direction === SimpleDirection.CountDown && <IoArrowDown data-testid='aux-timer-direction' />}
{direction === SimpleDirection.CountUp && <IoArrowUp data-testid='aux-timer-direction' />}
</TapButton>
<TapButton <TapButton
onClick={start} onClick={start}
theme={Playback.Play} theme={Playback.Play}
active={playback === SimplePlayback.Start} active={playback === SimplePlayback.Start}
disabled={!userCan.start} disabled={!userCan.start}
> >
<IoPlay data-testid='aux-timer-start' /> <IoPlay data-testid='aux-timer-start' />
</TapButton> </TapButton>
<TapButton <TapButton
onClick={pause} onClick={pause}
theme={Playback.Pause} theme={Playback.Pause}
active={playback === SimplePlayback.Pause} active={playback === SimplePlayback.Pause}
disabled={!userCan.pause} disabled={!userCan.pause}
> >
<IoPause data-testid='aux-timer-pause' /> <IoPause data-testid='aux-timer-pause' />
</TapButton> </TapButton>
<TapButton onClick={stop} theme={Playback.Stop} disabled={!userCan.stop}> <TapButton onClick={stop} theme={Playback.Stop} disabled={!userCan.stop}>
<IoStop data-testid='aux-timer-stop' /> <IoStop data-testid='aux-timer-stop' />
</TapButton> </TapButton>
</div> </div>
</label>
); );
} }