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

refactor: style cleanups and migrations

Browse Source 
fix: close modal with button
refactor: small type improvements
refactor: migrate time inputs
refactor: migrate tooltips
refactor: prevent component resizing
This commit is contained in:
Carlos Valente
2025-07-06 21:33:46 +02:00
committed by Carlos Valente
parent 6facd6a666
commit 17a7d035bf
54 changed files with 521 additions and 469 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/control/playback/aux-timer/AuxTimer.module.scss
+21
View File
@@ -22,3 +22,24 @@
gap: 0.25rem;
height: 1.5rem;
}
.fakeInput {
box-sizing: border-box;
width: 100%;
max-width: 7.5em;
height: 2rem;
display: grid;
place-content: center;
font-size: 1rem;
font-weight: 400;
color: $gray-200;
border-radius: $component-border-radius-md;
border: 1px solid transparent;
letter-spacing: 0.5px;
font-variant-numeric: tabular-nums;
padding-inline: 0.5em;
outline: none;
}
apps/client/src/features/control/playback/aux-timer/AuxTimer.tsx
+16 -7
View File
@@ -1,6 +1,6 @@
import { IoArrowDown, IoArrowUp, IoPause, IoPlay, IoStop } from 'react-icons/io5';
import { Playback, SimpleDirection, SimplePlayback } from 'ontime-types';
import { parseUserTime } from 'ontime-utils';
import { millisToString, parseUserTime } from 'ontime-utils';
import TimeInput from '../../../../common/components/input/time-input/TimeInput';
import { setAuxTimer, useAuxTimerControl, useAuxTimerTime } from '../../../../common/hooks/useSocket';
@@ -22,7 +22,7 @@ export function AuxTimer({ index }: AuxTimerProps) {
setDirection(index, newDirection);
};
const canStop = playback !== SimplePlayback.Stop;
const isActive = playback !== SimplePlayback.Stop;
const playbackAction = playback === SimplePlayback.Start ? 'pause' : 'play';
return (
@@ -30,15 +30,15 @@ export function AuxTimer({ index }: AuxTimerProps) {
Aux Timer {index}
<div className={style.controls}>
<div className={style.input}>
<AuxTimerInput index={index} />
<TapButton onClick={toggleDirection} aspect='tight'>
<AuxTimerInput index={index} isActive={isActive} />
<TapButton onClick={toggleDirection} aspect='tight' disabled={isActive}>
{direction === SimpleDirection.CountDown && <IoArrowDown data-testid={`aux-timer-direction-${index}`} />}
{direction === SimpleDirection.CountUp && <IoArrowUp data-testid={`aux-timer-direction-${index}`} />}
</TapButton>
</div>
<div className={style.twoSides}>
<AuxTogglePlay index={index} action={playbackAction} />
<TapButton onClick={() => stop(index)} theme={Playback.Stop} disabled={!canStop}>
<TapButton onClick={() => stop(index)} theme={Playback.Stop} disabled={!isActive}>
<IoStop data-testid={`aux-timer-stop-${index}`} />
</TapButton>
</div>
@@ -47,11 +47,12 @@ export function AuxTimer({ index }: AuxTimerProps) {
);
}
interface AuxTimerInput {
interface AuxTimerInputProps {
index: number;
isActive: boolean;
}
function AuxTimerInput({ index }: AuxTimerProps) {
function AuxTimerInput({ index, isActive }: AuxTimerInputProps) {
const newTimeInMs = useAuxTimerTime(index);
const { setDuration } = setAuxTimer;
@@ -60,6 +61,14 @@ function AuxTimerInput({ index }: AuxTimerProps) {
setDuration(index, newTimeInMs);
};
if (isActive) {
return (
<div className={style.fakeInput} data-testid={`time-label-aux${index}`}>
{millisToString(newTimeInMs)}
</div>
);
}
return (
<TimeInput submitHandler={handleTimeUpdate} name={`aux${index}`} time={newTimeInMs} placeholder={`Aux ${index}`} />
);