From 2675a248dcb8fbac5fdf2745d96efbab31d081ab Mon Sep 17 00:00:00 2001 From: Carlos Valente Date: Sat, 26 Oct 2024 13:36:10 +0200 Subject: [PATCH 1/2] refactor: improve visibility of extract element --- .../message/MessageControl.module.scss | 16 -------------- .../control/message/MessageControlExport.jsx | 5 +++-- .../features/control/message/TimerPreview.tsx | 3 ++- .../control/playback/TimerControlExport.tsx | 5 +++-- .../src/features/editors/Editor.module.scss | 9 -------- .../src/features/editors/EditorMixin.scss | 22 ------------------- .../editor-utils/EditorUtils.module.scss | 22 +++++++++++++++++++ .../editors/editor-utils/EditorUtils.tsx | 10 +++++++++ .../rundown/RundownExport.module.scss | 6 ----- .../src/features/rundown/RundownExport.tsx | 4 ++-- .../rundown/event-block/EventBlockInner.tsx | 3 ++- 11 files changed, 44 insertions(+), 61 deletions(-) create mode 100644 apps/client/src/features/editors/editor-utils/EditorUtils.module.scss create mode 100644 apps/client/src/features/editors/editor-utils/EditorUtils.tsx diff --git a/apps/client/src/features/control/message/MessageControl.module.scss b/apps/client/src/features/control/message/MessageControl.module.scss index 36e984b17f..3faf87717e 100644 --- a/apps/client/src/features/control/message/MessageControl.module.scss +++ b/apps/client/src/features/control/message/MessageControl.module.scss @@ -21,22 +21,6 @@ position: relative; } -.corner { - @include rotate-fourty-five; - - position: absolute; - top: 0.5rem; - right: 0.5rem; - cursor: pointer; - color: $ui-white; - transition-property: color; - transition-duration: $transition-time-action; - - &:hover { - color: $ontime-color; - } -} - .options { display: flex; flex-direction: column; diff --git a/apps/client/src/features/control/message/MessageControlExport.jsx b/apps/client/src/features/control/message/MessageControlExport.jsx index 54cd1789b2..0dd7b036a5 100644 --- a/apps/client/src/features/control/message/MessageControlExport.jsx +++ b/apps/client/src/features/control/message/MessageControlExport.jsx @@ -1,20 +1,21 @@ import { memo } from 'react'; -import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp'; import ErrorBoundary from '../../../common/components/error-boundary/ErrorBoundary'; import { handleLinks } from '../../../common/utils/linkUtils'; import { cx } from '../../../common/utils/styleUtils'; +import { Corner } from '../../editors/editor-utils/EditorUtils'; import MessageControl from './MessageControl'; import style from '../../editors/Editor.module.scss'; const MessageControlExport = () => { + const isExtracted = window.location.pathname.includes('/messagecontrol'); const classes = cx([style.content, style.contentColumnLayout]); return (
- handleLinks(event, 'messagecontrol')} /> + {!isExtracted && handleLinks(event, 'messagecontrol')} />}
diff --git a/apps/client/src/features/control/message/TimerPreview.tsx b/apps/client/src/features/control/message/TimerPreview.tsx index f4cd9c4e91..e0224a8ab0 100644 --- a/apps/client/src/features/control/message/TimerPreview.tsx +++ b/apps/client/src/features/control/message/TimerPreview.tsx @@ -10,6 +10,7 @@ import useViewSettings from '../../../common/hooks-query/useViewSettings'; import { handleLinks } from '../../../common/utils/linkUtils'; import { cx } from '../../../common/utils/styleUtils'; import { tooltipDelayMid } from '../../../ontimeConfig'; +import { Corner } from '../../editors/editor-utils/EditorUtils'; import style from './MessageControl.module.scss'; @@ -48,7 +49,7 @@ export default function TimerPreview() { return (
- handleLinks(event, 'timer')} /> + handleLinks(event, 'timer')} />
{ + const isExtracted = window.location.pathname.includes('/timercontrol'); return (
- handleLinks(event, 'timercontrol')} /> + {!isExtracted && handleLinks(event, 'timercontrol')} />}
diff --git a/apps/client/src/features/editors/Editor.module.scss b/apps/client/src/features/editors/Editor.module.scss index bba27a6d20..4b13971ab8 100644 --- a/apps/client/src/features/editors/Editor.module.scss +++ b/apps/client/src/features/editors/Editor.module.scss @@ -4,10 +4,6 @@ $min-playback-width: 27rem; $max-playback-width: 30rem; $panel-gap: 0.5rem; -.corner { - @include editor.corner; -} - .mainContainer { background-color: $ui-black; width: 100%; @@ -31,11 +27,6 @@ $panel-gap: 0.5rem; gap: $panel-gap; overflow: hidden; - .corner { - /* we show this if the component hasnt been extracted */ - display: inline; - } - .rundown, .playback, .messages { diff --git a/apps/client/src/features/editors/EditorMixin.scss b/apps/client/src/features/editors/EditorMixin.scss index 8b47104aae..7fa1d9525e 100644 --- a/apps/client/src/features/editors/EditorMixin.scss +++ b/apps/client/src/features/editors/EditorMixin.scss @@ -6,23 +6,6 @@ --editor--panel__br: 8px; } -@mixin corner() { - display: none; - transform: rotate(45deg); - - position: absolute; - top: 0.5rem; - right: 0.5rem; - cursor: pointer; - color: $ui-white; - transition-property: color; - transition-duration: $transition-time-action; - - &:hover { - color: $ontime-color; - } -} - @mixin panel() { display: flex; @@ -31,9 +14,4 @@ height: 100%; background-color: $bg-container-l2; padding: 1rem; - - .corner { - /* we show this if the component hasnt been extracted */ - display: inline; - } } diff --git a/apps/client/src/features/editors/editor-utils/EditorUtils.module.scss b/apps/client/src/features/editors/editor-utils/EditorUtils.module.scss new file mode 100644 index 0000000000..2be3755de4 --- /dev/null +++ b/apps/client/src/features/editors/editor-utils/EditorUtils.module.scss @@ -0,0 +1,22 @@ +.corner { + transform: rotate(45deg); + + position: absolute; + top: 0.5rem; + right: 0.5rem; + cursor: pointer; + color: $ui-white; + transition-property: color; + transition-duration: $transition-time-action; + border-radius: 99px; + + // similar styles to ontime-button-subtle + background-color: $gray-1050; + outline: 2px solid $gray-1050; + + &:hover { + color: $ontime-color; + background-color: $gray-1000; + outline: 2px solid $gray-1000; + } +} diff --git a/apps/client/src/features/editors/editor-utils/EditorUtils.tsx b/apps/client/src/features/editors/editor-utils/EditorUtils.tsx new file mode 100644 index 0000000000..9262fe650b --- /dev/null +++ b/apps/client/src/features/editors/editor-utils/EditorUtils.tsx @@ -0,0 +1,10 @@ +import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp'; +import { type IconBaseProps } from '@react-icons/all-files/lib'; + +import { cx } from '../../../common/utils/styleUtils'; + +import style from './EditorUtils.module.scss'; + +export function Corner({ className, ...elementProps }: IconBaseProps) { + return ; +} diff --git a/apps/client/src/features/rundown/RundownExport.module.scss b/apps/client/src/features/rundown/RundownExport.module.scss index c36053f106..939d04a583 100644 --- a/apps/client/src/features/rundown/RundownExport.module.scss +++ b/apps/client/src/features/rundown/RundownExport.module.scss @@ -22,12 +22,6 @@ height: 100%; } -.corner { - @include editor.corner; - display: inline; - z-index: 2; -} - .list { @include editor.panel; height: inherit; diff --git a/apps/client/src/features/rundown/RundownExport.tsx b/apps/client/src/features/rundown/RundownExport.tsx index d3e52b9c72..272d8d9326 100644 --- a/apps/client/src/features/rundown/RundownExport.tsx +++ b/apps/client/src/features/rundown/RundownExport.tsx @@ -1,11 +1,11 @@ import { memo } from 'react'; -import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp'; import { ContextMenu } from '../../common/components/context-menu/ContextMenu'; import ErrorBoundary from '../../common/components/error-boundary/ErrorBoundary'; import { useAppMode } from '../../common/stores/appModeStore'; import { handleLinks } from '../../common/utils/linkUtils'; import { cx } from '../../common/utils/styleUtils'; +import { Corner } from '../editors/editor-utils/EditorUtils'; import EventEditor from './event-editor/EventEditor'; import RundownWrapper from './RundownWrapper'; @@ -24,7 +24,7 @@ const RundownExport = () => {
- {!isExtracted && handleLinks(event, 'rundown')} />} + {!isExtracted && handleLinks(event, 'rundown')} />} diff --git a/apps/client/src/features/rundown/event-block/EventBlockInner.tsx b/apps/client/src/features/rundown/event-block/EventBlockInner.tsx index 4adab46def..5e353b0638 100644 --- a/apps/client/src/features/rundown/event-block/EventBlockInner.tsx +++ b/apps/client/src/features/rundown/event-block/EventBlockInner.tsx @@ -158,7 +158,8 @@ function TimerIcon(props: { type: TimerType; className: string }) { return ; } if (type === TimerType.TimeToEnd) { - return ; + const classes = cx([style.active, className]); + return ; } return ; } From e71717edb583b3b13d8e66af01f7dfc3989f10db Mon Sep 17 00:00:00 2001 From: Carlos Valente Date: Sat, 26 Oct 2024 13:46:44 +0200 Subject: [PATCH 2/2] refactor: improve visibility of time-to-end --- .../features/control/message/TimerPreview.tsx | 6 ++++++ .../rundown/event-block/EventBlockInner.tsx | 1 + .../composite/EventEditorTimes.tsx | 1 + .../rundown/time-input-flow/TimeInputFlow.tsx | 19 ++++++++++++++----- 4 files changed, 22 insertions(+), 5 deletions(-) diff --git a/apps/client/src/features/control/message/TimerPreview.tsx b/apps/client/src/features/control/message/TimerPreview.tsx index e0224a8ab0..1b7b55c561 100644 --- a/apps/client/src/features/control/message/TimerPreview.tsx +++ b/apps/client/src/features/control/message/TimerPreview.tsx @@ -25,6 +25,12 @@ export default function TimerPreview() { if (showTimerMessage) return 'Message'; if (phase === TimerPhase.Pending) return 'Standby to start'; if (phase === TimerPhase.Overtime && data.endMessage) return 'Custom end message'; + if (timerType === TimerType.TimeToEnd) + return ( + <> + Timer
Time to end + + ); return 'Timer'; })(); diff --git a/apps/client/src/features/rundown/event-block/EventBlockInner.tsx b/apps/client/src/features/rundown/event-block/EventBlockInner.tsx index 5e353b0638..7347d887ed 100644 --- a/apps/client/src/features/rundown/event-block/EventBlockInner.tsx +++ b/apps/client/src/features/rundown/event-block/EventBlockInner.tsx @@ -90,6 +90,7 @@ const EventBlockInner = (props: EventBlockInnerProps) => { delay={delay} timeStrategy={timeStrategy} linkStart={linkStart} + timerType={timerType} />
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 147450dcba..5d6dd0bfbd 100644 --- a/apps/client/src/features/rundown/event-editor/composite/EventEditorTimes.tsx +++ b/apps/client/src/features/rundown/event-editor/composite/EventEditorTimes.tsx @@ -82,6 +82,7 @@ const EventEditorTimes = (props: EventEditorTimesProps) => { timeStrategy={timeStrategy} linkStart={linkStart} delay={delay} + timerType={timerType} />
{delayLabel}
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 fb69582dd3..b68a439780 100644 --- a/apps/client/src/features/rundown/time-input-flow/TimeInputFlow.tsx +++ b/apps/client/src/features/rundown/time-input-flow/TimeInputFlow.tsx @@ -5,7 +5,7 @@ import { IoLink } from '@react-icons/all-files/io5/IoLink'; import { IoLockClosed } from '@react-icons/all-files/io5/IoLockClosed'; import { IoLockOpenOutline } from '@react-icons/all-files/io5/IoLockOpenOutline'; import { IoUnlink } from '@react-icons/all-files/io5/IoUnlink'; -import { MaybeString, TimeStrategy } from 'ontime-types'; +import { MaybeString, TimerType, TimeStrategy } from 'ontime-types'; import TimeInputWithButton from '../../../common/components/input/time-input/TimeInputWithButton'; import { useEventAction } from '../../../common/hooks/useEventAction'; @@ -22,12 +22,13 @@ interface EventBlockTimerProps { timeStrategy: TimeStrategy; linkStart: MaybeString; delay: number; + timerType: TimerType; } type TimeActions = 'timeStart' | 'timeEnd' | 'duration'; const TimeInputFlow = (props: EventBlockTimerProps) => { - const { eventId, timeStart, timeEnd, duration, timeStrategy, linkStart, delay } = props; + const { eventId, timeStart, timeEnd, duration, timeStrategy, linkStart, delay, timerType } = props; const { updateEvent, updateTimer } = useEventAction(); // In sync with EventEditorTimes @@ -43,7 +44,15 @@ const TimeInputFlow = (props: EventBlockTimerProps) => { updateEvent({ id: eventId, linkStart: doLink ? 'true' : null }); }; - const overMidnight = timeStart > timeEnd; + const warnings = []; + if (timeStart > timeEnd) { + warnings.push('Over midnight'); + } + + if (timerType === TimerType.TimeToEnd) { + warnings.push('Time to end'); + } + const hasDelay = delay !== 0; const isLockedEnd = timeStrategy === TimeStrategy.LockEnd; @@ -110,9 +119,9 @@ const TimeInputFlow = (props: EventBlockTimerProps) => { - {overMidnight && ( + {warnings.length > 0 && (
- +