Event ID (read only)
diff --git a/apps/client/src/features/rundown/time-input-flow/TimeInputFlow.tsx b/apps/client/src/features/rundown/time-input-flow/TimeInputFlow.tsx
index 7b08fc8f4..b4f70d834 100644
--- a/apps/client/src/features/rundown/time-input-flow/TimeInputFlow.tsx
+++ b/apps/client/src/features/rundown/time-input-flow/TimeInputFlow.tsx
@@ -11,6 +11,7 @@ import TimeInputWithButton from '../../../common/components/input/time-input/Tim
import { useEventAction } from '../../../common/hooks/useEventAction';
import { cx } from '../../../common/utils/styleUtils';
import { tooltipDelayFast, tooltipDelayMid } from '../../../ontimeConfig';
+import * as Editor from '../../editors/editor-utils/EditorUtils';
import style from './TimeInputFlow.module.scss';
@@ -23,10 +24,11 @@ interface EventBlockTimerProps {
timeStrategy: TimeStrategy;
linkStart: MaybeString;
delay: number;
+ showLabels?: boolean;
}
function TimeInputFlow(props: EventBlockTimerProps) {
- const { eventId, countToEnd, timeStart, timeEnd, duration, timeStrategy, linkStart, delay } = props;
+ const { eventId, countToEnd, timeStart, timeEnd, duration, timeStrategy, linkStart, delay, showLabels } = props;
const { updateEvent, updateTimer } = useEventAction();
// In sync with EventEditorTimes
@@ -62,60 +64,69 @@ function TimeInputFlow(props: EventBlockTimerProps) {
return (
<>
-
- name='timeStart'
- submitHandler={handleSubmit}
- time={timeStart}
- hasDelay={hasDelay}
- placeholder='Start'
- disabled={Boolean(linkStart)}
- >
-
- handleLink(!linkStart)}>
- S
- {linkStart ? : }
-
-
-
+
+ {showLabels && Start time}
+
+ name='timeStart'
+ submitHandler={handleSubmit}
+ time={timeStart}
+ hasDelay={hasDelay}
+ placeholder='Start'
+ disabled={Boolean(linkStart)}
+ >
+
+ handleLink(!linkStart)}>
+ S
+ {linkStart ? : }
+
+
+
+
-
- name='timeEnd'
- submitHandler={handleSubmit}
- time={timeEnd}
- hasDelay={hasDelay}
- disabled={isLockedDuration}
- placeholder='End'
- >
-
- handleChangeStrategy(TimeStrategy.LockEnd)}
- data-testid='lock__end'
- >
- E
- {isLockedEnd ? : }
-
-
-
+
+ {showLabels && End time}
+
+ name='timeEnd'
+ submitHandler={handleSubmit}
+ time={timeEnd}
+ hasDelay={hasDelay}
+ disabled={isLockedDuration}
+ placeholder='End'
+ >
+
+ handleChangeStrategy(TimeStrategy.LockEnd)}
+ data-testid='lock__end'
+ >
+ E
+ {isLockedEnd ? : }
+
+
+
+
-
- name='duration'
- submitHandler={handleSubmit}
- time={duration}
- disabled={isLockedEnd}
- placeholder='Duration'
- >
-
- handleChangeStrategy(TimeStrategy.LockDuration)}
- data-testid='lock__duration'
- >
- D
- {isLockedDuration ? : }
-
-
-
+
+ {showLabels && Duration}
+
+ name='duration'
+ submitHandler={handleSubmit}
+ time={duration}
+ disabled={isLockedEnd}
+ placeholder='Duration'
+ >
+
+ handleChangeStrategy(TimeStrategy.LockDuration)}
+ data-testid='lock__duration'
+ >
+ D
+ {isLockedDuration ? : }
+
+
+
+
{warnings.length > 0 && (
diff --git a/apps/client/src/theme/_ontimeStyles.scss b/apps/client/src/theme/_ontimeStyles.scss
index 689b26100..efaea7b83 100644
--- a/apps/client/src/theme/_ontimeStyles.scss
+++ b/apps/client/src/theme/_ontimeStyles.scss
@@ -5,6 +5,7 @@ $transition-time-feedback: 0.3s;
$component-border-radius-md: 3px;
$component-border-radius-sm: 2px;
+$component-border-radius-full: 99px;
// semantic colours
$action-blue: #3182ce;
@@ -50,12 +51,14 @@ $main-spacing: 2rem;
// interface text
$ontime-font-family: "Open Sans", "Segoe UI", sans-serif;
+$title-gray: $gray-200;
$label-gray: $gray-400;
$secondary-text-gray: $gray-400;
$muted-gray: $gray-600;
$section-white: $ui-white;
$inner-section-text-size: calc(1rem - 2px);
$text-body-size: calc(1rem - 1px);
+$aux-text-size: calc(1rem - 3px);
// media queries
$min-tablet: 500px;