From 6199d0ad10e1418866129347a2549639d09e4571 Mon Sep 17 00:00:00 2001 From: Carlos Valente Date: Wed, 18 Dec 2024 19:48:17 +0100 Subject: [PATCH] refactor: improve section style and composition --- .../TimeInputWithButton.module.scss | 2 + .../editor-utils/EditorUtils.module.scss | 11 +- .../editors/editor-utils/EditorUtils.tsx | 11 +- .../rundown/RundownExport.module.scss | 2 +- .../event-editor/EventEditor.module.scss | 28 +++-- .../rundown/event-editor/EventEditor.tsx | 6 +- .../event-editor/EventEditorEmpty.module.scss | 2 - .../rundown/event-editor/EventEditorEmpty.tsx | 7 +- .../composite/EventEditorTimes.tsx | 18 ++- .../composite/EventEditorTitles.tsx | 1 + .../rundown/time-input-flow/TimeInputFlow.tsx | 117 ++++++++++-------- apps/client/src/theme/_ontimeStyles.scss | 3 + 12 files changed, 128 insertions(+), 80 deletions(-) diff --git a/apps/client/src/common/components/input/time-input/TimeInputWithButton.module.scss b/apps/client/src/common/components/input/time-input/TimeInputWithButton.module.scss index bd0621373..75f8ca1b7 100644 --- a/apps/client/src/common/components/input/time-input/TimeInputWithButton.module.scss +++ b/apps/client/src/common/components/input/time-input/TimeInputWithButton.module.scss @@ -2,6 +2,8 @@ $input-delayed-border-color: $ontime-delay-text; .timeInput { border: 1px solid transparent; + color: $label-gray; + &.delayed { border: 1px solid $input-delayed-border-color; } diff --git a/apps/client/src/features/editors/editor-utils/EditorUtils.module.scss b/apps/client/src/features/editors/editor-utils/EditorUtils.module.scss index cb6f1c45a..cf4c73a00 100644 --- a/apps/client/src/features/editors/editor-utils/EditorUtils.module.scss +++ b/apps/client/src/features/editors/editor-utils/EditorUtils.module.scss @@ -8,7 +8,7 @@ color: $ui-white; transition-property: color; transition-duration: $transition-time-action; - border-radius: 99px; + border-radius: $component-border-radius-full; // similar styles to ontime-button-subtle background-color: $gray-1050; @@ -27,13 +27,16 @@ .title { font-size: 1rem; - color: $ui-white; + color: $title-gray; + display: flex; + align-items: center; + justify-content: space-between; } .label { display: block; - font-size: calc(1rem - 3px); + font-size: $aux-text-size; color: $label-gray; - margin-bottom: 0.25rem; + margin-bottom: $element-inner-spacing; max-width: max-content; // prevent label from taking entire row } diff --git a/apps/client/src/features/editors/editor-utils/EditorUtils.tsx b/apps/client/src/features/editors/editor-utils/EditorUtils.tsx index 0def1aa7a..58b3ee81b 100644 --- a/apps/client/src/features/editors/editor-utils/EditorUtils.tsx +++ b/apps/client/src/features/editors/editor-utils/EditorUtils.tsx @@ -1,4 +1,4 @@ -import type { LabelHTMLAttributes, ReactNode } from 'react'; +import type { HTMLAttributes, LabelHTMLAttributes } from 'react'; import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp'; import { type IconBaseProps } from '@react-icons/all-files/lib'; @@ -10,8 +10,13 @@ export function Corner({ className, ...elementProps }: IconBaseProps) { return ; } -export function Title({ children }: { children: ReactNode }) { - return

{children}

; +export function Title({ children, className, ...elementProps }: HTMLAttributes) { + const classes = cx([style.title, className]); + return ( +

+ {children} +

+ ); } export function Label({ children, className, ...elementProps }: LabelHTMLAttributes) { diff --git a/apps/client/src/features/rundown/RundownExport.module.scss b/apps/client/src/features/rundown/RundownExport.module.scss index 939d04a58..957d482c4 100644 --- a/apps/client/src/features/rundown/RundownExport.module.scss +++ b/apps/client/src/features/rundown/RundownExport.module.scss @@ -36,7 +36,7 @@ .side { max-height: 100%; max-width: 45rem; - margin: 2rem 0; + margin: 0.5rem 0; padding: 1rem; padding-right: 0; background-color: $gray-1325; diff --git a/apps/client/src/features/rundown/event-editor/EventEditor.module.scss b/apps/client/src/features/rundown/event-editor/EventEditor.module.scss index 6e274a102..f7d570f34 100644 --- a/apps/client/src/features/rundown/event-editor/EventEditor.module.scss +++ b/apps/client/src/features/rundown/event-editor/EventEditor.module.scss @@ -1,8 +1,7 @@ .eventEditor { - color: $label-gray; max-height: 100%; overflow-y: auto; - padding: 0.5rem; + padding-inline: 0.5rem; display: flex; flex-direction: column; @@ -16,7 +15,7 @@ flex: 1; display: flex; flex-direction: column; - gap: 1rem; + gap: 1.5rem; overflow-y: auto; } @@ -30,19 +29,22 @@ display: flex; flex-direction: column; gap: 1rem; - margin-top: 0.5rem; + + h3 { + margin-bottom: -0.5rem; // bring the title closer to the section elements + } } .decorated { color: var(--decorator-color, $ui-white); background-color: var(--decorator-bg, $gray-1100); width: fit-content; - padding: 0 0.5rem; - border-radius: 2px; + padding-inline: 0.5rem; + border-radius: $component-border-radius-sm; } .delayLabel { - font-size: calc(1rem - 3px); + font-size: $aux-text-size; color: $ontime-delay-text; &::after { @@ -56,7 +58,8 @@ gap: 0.5rem; max-width: max-content; cursor: pointer; - height: 30px; // manually match the height of a text input + height: 2rem; // manually match the height of a text input + margin-bottom: 0; // reset margin from label component } .inline { @@ -68,6 +71,13 @@ .splitTwo { display: grid; grid-template-columns: 1fr 1fr; - column-gap: 1.5rem; + column-gap: 1rem; row-gap: 1rem; } + +.tooltipIcon { + color: $blue-500; + display: inline-block; + font-size: 1.25em; + margin-left: 0.25em; +} diff --git a/apps/client/src/features/rundown/event-editor/EventEditor.tsx b/apps/client/src/features/rundown/event-editor/EventEditor.tsx index 880dd8eb6..bf6b3ddfd 100644 --- a/apps/client/src/features/rundown/event-editor/EventEditor.tsx +++ b/apps/client/src/features/rundown/event-editor/EventEditor.tsx @@ -79,14 +79,14 @@ export default function EventEditor(props: EventEditorProps) { handleSubmit={handleSubmit} />
-
- Custom Fields + + Custom Fields {isEditor && ( )} -
+ {Object.keys(customFields).map((fieldKey) => { const key = `${event.id}-${fieldKey}`; const fieldName = `custom-${fieldKey}`; diff --git a/apps/client/src/features/rundown/event-editor/EventEditorEmpty.module.scss b/apps/client/src/features/rundown/event-editor/EventEditorEmpty.module.scss index 9f443ccc9..9d8da825c 100644 --- a/apps/client/src/features/rundown/event-editor/EventEditorEmpty.module.scss +++ b/apps/client/src/features/rundown/event-editor/EventEditorEmpty.module.scss @@ -38,8 +38,6 @@ } .prompt { - font-size: 1rem; - text-align: left; margin-left: 4rem; } diff --git a/apps/client/src/features/rundown/event-editor/EventEditorEmpty.tsx b/apps/client/src/features/rundown/event-editor/EventEditorEmpty.tsx index e728348e4..01c2c005f 100644 --- a/apps/client/src/features/rundown/event-editor/EventEditorEmpty.tsx +++ b/apps/client/src/features/rundown/event-editor/EventEditorEmpty.tsx @@ -1,7 +1,8 @@ -import { memo } from 'react'; +import { memo, PropsWithChildren } from 'react'; import { Kbd } from '@chakra-ui/react'; import { deviceAlt, deviceMod } from '../../../common/utils/deviceUtils'; +import * as Editor from '../../editors/editor-utils/EditorUtils'; import style from './EventEditorEmpty.module.scss'; @@ -11,7 +12,7 @@ function EventEditorEmpty() { return (
-
Rundown shortcuts:
+ Rundown shortcuts @@ -168,6 +169,6 @@ function EventEditorEmpty() { ); } -function AuxKey({ children }: { children: React.ReactNode }) { +function AuxKey({ children }: PropsWithChildren) { return {children}; } diff --git a/apps/client/src/features/rundown/event-editor/composite/EventEditorTimes.tsx b/apps/client/src/features/rundown/event-editor/composite/EventEditorTimes.tsx index 0920e91f6..444712c71 100644 --- a/apps/client/src/features/rundown/event-editor/composite/EventEditorTimes.tsx +++ b/apps/client/src/features/rundown/event-editor/composite/EventEditorTimes.tsx @@ -1,5 +1,6 @@ import { memo } from 'react'; -import { Select, Switch } from '@chakra-ui/react'; +import { Select, Switch, Tooltip } from '@chakra-ui/react'; +import { IoInformationCircle } from '@react-icons/all-files/io5/IoInformationCircle'; import { EndAction, MaybeString, TimerType, TimeStrategy } from 'ontime-types'; import { millisToString, parseUserTime } from 'ontime-utils'; @@ -80,8 +81,8 @@ function EventEditorTimes(props: EventEditorTimesProps) { return ( <>
+ Event schedule
- Event schedule
{delayLabel}
+
+
+ Event Behaviour
End Action @@ -129,7 +134,16 @@ function EventEditorTimes(props: EventEditorTimesProps) {
+
+ + + + Display Options + + + +
Timer Type diff --git a/apps/client/src/features/rundown/event-editor/composite/EventEditorTitles.tsx b/apps/client/src/features/rundown/event-editor/composite/EventEditorTitles.tsx index 02c061238..2755244cc 100644 --- a/apps/client/src/features/rundown/event-editor/composite/EventEditorTitles.tsx +++ b/apps/client/src/features/rundown/event-editor/composite/EventEditorTitles.tsx @@ -29,6 +29,7 @@ const EventEditorTitles = (props: EventEditorTitlesProps) => { return (
+ Event Data
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;