diff --git a/apps/client/src/features/operator/Operator.tsx b/apps/client/src/features/operator/Operator.tsx index 3c9ffc7c5..b6fa66cb7 100644 --- a/apps/client/src/features/operator/Operator.tsx +++ b/apps/client/src/features/operator/Operator.tsx @@ -35,7 +35,7 @@ export default function Operator() { const timeoutId = useRef(null); const { selectedEventId } = useSelectedEventId(); - const { subscribe, mainSource, secondarySource, shouldEdit, hidePast } = useOperatorOptions(); + const { subscribe, mainSource, secondarySource, shouldEdit, hidePast, showStart } = useOperatorOptions(); const { data: settings } = useSettings(); const [showEditPrompt, setShowEditPrompt] = useState(false); @@ -160,6 +160,7 @@ export default function Operator() { isSelected={isSelected} isPast={isPast} selectedRef={isSelected ? selectedRef : undefined} + showStart={showStart} subscribed={subscribedData} totalGap={totalGap} onLongPress={canEdit ? handleEdit : () => undefined} @@ -208,6 +209,7 @@ export default function Operator() { isSelected={isSelected} isPast={isPast} selectedRef={isSelected ? selectedRef : undefined} + showStart={showStart} subscribed={subscribedData} totalGap={totalGap} onLongPress={canEdit ? handleEdit : () => undefined} diff --git a/apps/client/src/features/operator/operator-event/OperatorEvent.module.scss b/apps/client/src/features/operator/operator-event/OperatorEvent.module.scss index d2453987e..0de360990 100644 --- a/apps/client/src/features/operator/operator-event/OperatorEvent.module.scss +++ b/apps/client/src/features/operator/operator-event/OperatorEvent.module.scss @@ -1,3 +1,4 @@ +@use '@/theme/viewerDefs' as *; @import '../Operator.module.scss'; .event { @@ -5,13 +6,14 @@ border-top: 1px solid $white-1; padding-right: 0.5rem; color: $white-90; - background-color: $gray-1300; + background-color: $viewer-card-bg-color; display: grid; align-items: center; - grid-template-columns: 1.25rem 1fr auto; - grid-template-rows: auto auto auto; column-gap: 0.5rem; + row-gap: 0.5rem; + grid-template-rows: auto auto auto; + grid-template-columns: 1.25rem 1fr auto; grid-template-areas: 'binder main schedule' 'binder secondary running' @@ -69,14 +71,23 @@ white-space: pre-line; } +.plannedStart, .timeUntil { + line-height: 1em; + background-color: $gray-1000; + padding: 0.25rem 0.5rem; + border-radius: 1px; +} + +.plannedStart { + font-size: 1.5rem; + margin-right: 0.5rem; +} + .timeUntil { font-size: calc(1rem - 2px); line-height: 1em; grid-area: schedule; justify-self: end; - background-color: $gray-1000; - padding: 0.25rem 0.5rem; - border-radius: 1px; } .runningTime { diff --git a/apps/client/src/features/operator/operator-event/OperatorEvent.tsx b/apps/client/src/features/operator/operator-event/OperatorEvent.tsx index 361a64ee3..294f839a4 100644 --- a/apps/client/src/features/operator/operator-event/OperatorEvent.tsx +++ b/apps/client/src/features/operator/operator-event/OperatorEvent.tsx @@ -1,6 +1,6 @@ import { memo, RefObject, SyntheticEvent } from 'react'; import { useLongPress } from '@mantine/hooks'; -import { MILLIS_PER_MINUTE, MILLIS_PER_SECOND } from 'ontime-utils'; +import { MILLIS_PER_MINUTE, MILLIS_PER_SECOND, millisToString } from 'ontime-utils'; import DelayIndicator from '../../../common/components/delay-indicator/DelayIndicator'; import { cx, getAccessibleColour } from '../../../common/utils/styleUtils'; @@ -24,6 +24,7 @@ interface OperatorEventProps { isSelected: boolean; isPast: boolean; selectedRef?: RefObject; + showStart: boolean; subscribed: Subscribed; totalGap: number; onLongPress: (event: EditEvent) => void; @@ -44,6 +45,7 @@ function OperatorEvent({ isSelected, isPast, selectedRef, + showStart, subscribed, totalGap, onLongPress, @@ -64,9 +66,8 @@ function OperatorEvent({ const operatorClasses = cx([ style.event, - isSelected ? style.running : null, - subscribed ? style.subscribed : null, - isPast ? style.past : null, + isSelected && style.running, + isPast && style.past, ]); return ( @@ -75,9 +76,11 @@ function OperatorEvent({ {cue} - {main} + + {showStart && {millisToString(timeStart)}} + {main} + {secondary} -