cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-07-26 10:38:55 +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;
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 (
<div className={style.extraRow}>
<AuxTimerInput />
<TapButton onClick={toggleDirection} aspect='tight'>
{direction === SimpleDirection.CountDown && <IoArrowDown data-testid='aux-timer-direction' />}
{direction === SimpleDirection.CountUp && <IoArrowUp data-testid='aux-timer-direction' />}
</TapButton>
<label className={style.label}>
Auxiliary Timer
<div className={style.controls}>
<AuxTimerInput />
<TapButton onClick={toggleDirection} aspect='tight'>
{direction === SimpleDirection.CountDown && <IoArrowDown data-testid='aux-timer-direction' />}
{direction === SimpleDirection.CountUp && <IoArrowUp data-testid='aux-timer-direction' />}
</TapButton>
<TapButton
onClick={start}
theme={Playback.Play}
active={playback === SimplePlayback.Start}
disabled={!userCan.start}
>
<IoPlay data-testid='aux-timer-start' />
</TapButton>
<TapButton
onClick={pause}
theme={Playback.Pause}
active={playback === SimplePlayback.Pause}
disabled={!userCan.pause}
>
<IoPause data-testid='aux-timer-pause' />
</TapButton>
<TapButton onClick={stop} theme={Playback.Stop} disabled={!userCan.stop}>
<IoStop data-testid='aux-timer-stop' />
</TapButton>
</div>
<TapButton
onClick={start}
theme={Playback.Play}
active={playback === SimplePlayback.Start}
disabled={!userCan.start}
>
<IoPlay data-testid='aux-timer-start' />
</TapButton>
<TapButton
onClick={pause}
theme={Playback.Pause}
active={playback === SimplePlayback.Pause}
disabled={!userCan.pause}
>
<IoPause data-testid='aux-timer-pause' />
</TapButton>
<TapButton onClick={stop} theme={Playback.Stop} disabled={!userCan.stop}>
<IoStop data-testid='aux-timer-stop' />
</TapButton>
</div>
</label>
);
}