From 972f9e35fd3a216cea285d9aae2e9dd2658ba386 Mon Sep 17 00:00:00 2001 From: Carlos Valente Date: Sat, 20 Dec 2025 13:21:40 +0100 Subject: [PATCH] refactor: create separation between editor wrapper and contents --- .../editor-utils/EditorUtils.module.scss | 7 ++ .../components/editor-utils/EditorUtils.tsx | 4 ++ .../message/MessageControlExport.module.scss | 11 +++ .../control/message/MessageControlExport.tsx | 14 ++-- .../playback/TimerControlExport.module.scss | 3 + .../control/playback/TimerControlExport.tsx | 10 +-- .../rundown/RundownExport.module.scss | 4 +- .../src/features/rundown/RundownExport.tsx | 8 +-- apps/client/src/theme/_ontimeStyles.scss | 4 ++ .../src/views/editor/Editor.module.scss | 43 ------------ apps/client/src/views/editor/Editor.tsx | 69 ++----------------- apps/client/src/views/editor/EditorMixin.scss | 17 ----- .../views/editor/ProtectedEditor.module.scss | 15 ++++ .../src/views/editor/ProtectedEditor.tsx | 57 ++++++++++++++- 14 files changed, 122 insertions(+), 144 deletions(-) create mode 100644 apps/client/src/features/control/message/MessageControlExport.module.scss create mode 100644 apps/client/src/features/control/playback/TimerControlExport.module.scss delete mode 100644 apps/client/src/views/editor/EditorMixin.scss create mode 100644 apps/client/src/views/editor/ProtectedEditor.module.scss diff --git a/apps/client/src/common/components/editor-utils/EditorUtils.module.scss b/apps/client/src/common/components/editor-utils/EditorUtils.module.scss index 4a7810547..098cf3b28 100644 --- a/apps/client/src/common/components/editor-utils/EditorUtils.module.scss +++ b/apps/client/src/common/components/editor-utils/EditorUtils.module.scss @@ -59,3 +59,10 @@ height: 0.75em; } } + +.panel { + position: relative; + border-radius: $panel-border-radius; + background-color: $bg-container-l2; + padding: 1rem; +} diff --git a/apps/client/src/common/components/editor-utils/EditorUtils.tsx b/apps/client/src/common/components/editor-utils/EditorUtils.tsx index 0e83753a8..54a157861 100644 --- a/apps/client/src/common/components/editor-utils/EditorUtils.tsx +++ b/apps/client/src/common/components/editor-utils/EditorUtils.tsx @@ -55,3 +55,7 @@ interface SeparatorProps extends HTMLAttributes { export function Separator({ className, orientation = 'vertical', ...elementProps }: SeparatorProps) { return
; } + +export function Panel({ className, ...props }: HTMLAttributes) { + return
; +} diff --git a/apps/client/src/features/control/message/MessageControlExport.module.scss b/apps/client/src/features/control/message/MessageControlExport.module.scss new file mode 100644 index 000000000..5a31e18ce --- /dev/null +++ b/apps/client/src/features/control/message/MessageControlExport.module.scss @@ -0,0 +1,11 @@ +.flexPanel { + flex: 1; +} + +.contentLayout { + display: flex; + flex-direction: column; + gap: $section-spacing; + color: $ui-white; + padding-top: $panel-top-padding; +} diff --git a/apps/client/src/features/control/message/MessageControlExport.tsx b/apps/client/src/features/control/message/MessageControlExport.tsx index 9ff3185cc..5816f141d 100644 --- a/apps/client/src/features/control/message/MessageControlExport.tsx +++ b/apps/client/src/features/control/message/MessageControlExport.tsx @@ -1,34 +1,32 @@ import { memo } from 'react'; -import { CornerExtract } from '../../../common/components/editor-utils/EditorUtils'; +import * as Editor from '../../../common/components/editor-utils/EditorUtils'; import ErrorBoundary from '../../../common/components/error-boundary/ErrorBoundary'; import ViewNavigationMenu from '../../../common/components/navigation-menu/ViewNavigationMenu'; import ProtectRoute from '../../../common/components/protect-route/ProtectRoute'; import { handleLinks } from '../../../common/utils/linkUtils'; -import { cx } from '../../../common/utils/styleUtils'; import { getIsNavigationLocked } from '../../../externals'; import MessageControl from './MessageControl'; -import style from '../../../views/editor/Editor.module.scss'; +import style from './MessageControlExport.module.scss'; export default memo(MessageControlExport); function MessageControlExport() { const isExtracted = window.location.pathname.includes('/messagecontrol'); - const classes = cx([style.content, style.contentColumnLayout]); return ( -
- {!isExtracted && handleLinks('messagecontrol', event)} />} + + {!isExtracted && handleLinks('messagecontrol', event)} />} {isExtracted && } -
+
-
+ ); } diff --git a/apps/client/src/features/control/playback/TimerControlExport.module.scss b/apps/client/src/features/control/playback/TimerControlExport.module.scss new file mode 100644 index 000000000..135228d2b --- /dev/null +++ b/apps/client/src/features/control/playback/TimerControlExport.module.scss @@ -0,0 +1,3 @@ +.content { + padding-top: $panel-top-padding; +} diff --git a/apps/client/src/features/control/playback/TimerControlExport.tsx b/apps/client/src/features/control/playback/TimerControlExport.tsx index feb268de5..6854111be 100644 --- a/apps/client/src/features/control/playback/TimerControlExport.tsx +++ b/apps/client/src/features/control/playback/TimerControlExport.tsx @@ -1,6 +1,6 @@ import { memo } from 'react'; -import { CornerExtract } from '../../../common/components/editor-utils/EditorUtils'; +import * as Editor from '../../../common/components/editor-utils/EditorUtils'; import ErrorBoundary from '../../../common/components/error-boundary/ErrorBoundary'; import ViewNavigationMenu from '../../../common/components/navigation-menu/ViewNavigationMenu'; import ProtectRoute from '../../../common/components/protect-route/ProtectRoute'; @@ -9,7 +9,7 @@ import { getIsNavigationLocked } from '../../../externals'; import PlaybackControl from './PlaybackControl'; -import style from '../../../views/editor/Editor.module.scss'; +import style from './TimerControlExport.module.scss'; export default memo(TimerControlExport); function TimerControlExport() { @@ -17,8 +17,8 @@ function TimerControlExport() { return ( -
- {!isExtracted && handleLinks('timercontrol', event)} />} + + {!isExtracted && handleLinks('timercontrol', event)} />} {isExtracted && }
@@ -26,7 +26,7 @@ function TimerControlExport() {
-
+ ); } diff --git a/apps/client/src/features/rundown/RundownExport.module.scss b/apps/client/src/features/rundown/RundownExport.module.scss index 45ddbd32c..a795aa146 100644 --- a/apps/client/src/features/rundown/RundownExport.module.scss +++ b/apps/client/src/features/rundown/RundownExport.module.scss @@ -1,5 +1,3 @@ -@use '../../views/editor/EditorMixin' as editor; - .rundownExport { height: 100%; flex: 1 1 auto; /* flex-grow: 1, flex-shrink: 1, flex-basis: auto */ @@ -23,7 +21,7 @@ } .list { - @include editor.panel; + display: flex; height: inherit; padding-inline: 0; box-shadow: $box-shadow-right; diff --git a/apps/client/src/features/rundown/RundownExport.tsx b/apps/client/src/features/rundown/RundownExport.tsx index df14476de..ca4a7150f 100644 --- a/apps/client/src/features/rundown/RundownExport.tsx +++ b/apps/client/src/features/rundown/RundownExport.tsx @@ -1,7 +1,7 @@ import { memo } from 'react'; import { useSessionStorage } from '@mantine/hooks'; -import { CornerExtract } from '../../common/components/editor-utils/EditorUtils'; +import * as Editor from '../../common/components/editor-utils/EditorUtils'; import ErrorBoundary from '../../common/components/error-boundary/ErrorBoundary'; import ViewNavigationMenu from '../../common/components/navigation-menu/ViewNavigationMenu'; import ProtectRoute from '../../common/components/protect-route/ProtectRoute'; @@ -58,14 +58,14 @@ function RundownExport() { {isExtracted && }
-
+ - {!isExtracted && handleLinks('rundown', event)} />} + {!isExtracted && handleLinks('rundown', event)} />} -
+ {!hideSideBar && (
diff --git a/apps/client/src/theme/_ontimeStyles.scss b/apps/client/src/theme/_ontimeStyles.scss index b4e3fbea9..3178c3095 100644 --- a/apps/client/src/theme/_ontimeStyles.scss +++ b/apps/client/src/theme/_ontimeStyles.scss @@ -7,6 +7,10 @@ $component-border-radius-md: 3px; $component-border-radius-sm: 2px; $component-border-radius-full: 99px; +$panel-border-radius: 8px; +$panel-gap: 0.5rem; +$panel-top-padding: 1.5rem; + // indexes $zindex-floating: 100; $zindex-nav: 200; diff --git a/apps/client/src/views/editor/Editor.module.scss b/apps/client/src/views/editor/Editor.module.scss index ac4089af2..f437c4563 100644 --- a/apps/client/src/views/editor/Editor.module.scss +++ b/apps/client/src/views/editor/Editor.module.scss @@ -1,24 +1,5 @@ -@use './EditorMixin' as editor; - $min-playback-width: 27rem; $max-playback-width: 30rem; -$panel-gap: 0.5rem; - -.mainContainer { - background-color: $ui-black; - width: 100%; - height: 100%; - color: $ui-white; - padding: 0.5rem; - - display: grid; - grid-template-columns: auto; - grid-template-rows: 3.5rem 1fr; - grid-template-areas: - 'overview' - 'main'; - gap: $panel-gap; -} .panelContainer { grid-area: main; @@ -26,15 +7,6 @@ $panel-gap: 0.5rem; display: flex; gap: $panel-gap; overflow: hidden; - - .rundown, - .playback, - .messages { - position: relative; - border-radius: var(--editor--panel__br); - background-color: $bg-container-l2; - padding: 1rem; - } } .left { @@ -45,18 +17,3 @@ $panel-gap: 0.5rem; flex-direction: column; gap: $panel-gap; } - -.messages { - flex: 1; -} - -.content { - padding-top: 1.5rem; -} - -.contentColumnLayout { - display: flex; - flex-direction: column; - gap: $section-spacing; - color: $ui-white; -} diff --git a/apps/client/src/views/editor/Editor.tsx b/apps/client/src/views/editor/Editor.tsx index e862d6590..157b00bd2 100644 --- a/apps/client/src/views/editor/Editor.tsx +++ b/apps/client/src/views/editor/Editor.tsx @@ -1,16 +1,4 @@ -import { lazy, useCallback, useEffect } from 'react'; -import { IoApps, IoClose, IoSettingsOutline } from 'react-icons/io5'; -import { useDisclosure, useHotkeys } from '@mantine/hooks'; - -import IconButton from '../../common/components/buttons/IconButton'; -import NavigationMenu from '../../common/components/navigation-menu/NavigationMenu'; -import { useElectronListener } from '../../common/hooks/useElectronEvent'; -import { useWindowTitle } from '../../common/hooks/useWindowTitle'; -import AppSettings from '../../features/app-settings/AppSettings'; -import useAppSettingsNavigation from '../../features/app-settings/useAppSettingsNavigation'; -import EditorOverview from '../../features/overview/EditorOverview'; - -import WelcomePlacement from './welcome/WelcomePlacement'; +import { lazy } from 'react'; import styles from './Editor.module.scss'; @@ -19,56 +7,13 @@ const TimerControl = lazy(() => import('../../features/control/playback/TimerCon const MessageControl = lazy(() => import('../../features/control/message/MessageControlExport')); export default function Editor() { - const { isOpen: isSettingsOpen, setLocation, close } = useAppSettingsNavigation(); - const [isOpen, handler] = useDisclosure(); - - useWindowTitle('Editor'); - - // we need to register the listener to change the editor location - useElectronListener(); - - // listen to shutdown request from electron process - useEffect(() => { - if (window.process?.type === 'renderer') { - window.ipcRenderer.on('user-request-shutdown', () => { - setLocation('shutdown'); - }); - } - }, [setLocation]); - - const toggleSettings = useCallback(() => { - if (isSettingsOpen) { - close(); - } else { - setLocation('settings'); - } - }, [close, isSettingsOpen, setLocation]); - - useHotkeys([['mod + ,', toggleSettings]]); - return ( -
- - - - - - - - {isSettingsOpen ? : } - - - {isSettingsOpen ? ( - - ) : ( -
-
- - -
- -
- )} +
+
+ + +
+
); } diff --git a/apps/client/src/views/editor/EditorMixin.scss b/apps/client/src/views/editor/EditorMixin.scss deleted file mode 100644 index 7fa1d9525..000000000 --- a/apps/client/src/views/editor/EditorMixin.scss +++ /dev/null @@ -1,17 +0,0 @@ -@use '../../theme/ontimeColours' as *; -@use '../../theme/ontimeStyles' as *; - -// declare editor specific styling constants -:root { - --editor--panel__br: 8px; -} - -@mixin panel() { - display: flex; - - position: relative; - border-radius: var(--editor--panel__br); - height: 100%; - background-color: $bg-container-l2; - padding: 1rem; -} diff --git a/apps/client/src/views/editor/ProtectedEditor.module.scss b/apps/client/src/views/editor/ProtectedEditor.module.scss new file mode 100644 index 000000000..fa0451b4b --- /dev/null +++ b/apps/client/src/views/editor/ProtectedEditor.module.scss @@ -0,0 +1,15 @@ +.mainContainer { + background-color: $ui-black; + width: 100%; + height: 100%; + color: $ui-white; + padding: 0.5rem; + + display: grid; + grid-template-columns: auto; + grid-template-rows: 3.5rem 1fr; + grid-template-areas: + 'overview' + 'main'; + gap: $panel-gap; +} diff --git a/apps/client/src/views/editor/ProtectedEditor.tsx b/apps/client/src/views/editor/ProtectedEditor.tsx index 2763a55b3..7c498ce95 100644 --- a/apps/client/src/views/editor/ProtectedEditor.tsx +++ b/apps/client/src/views/editor/ProtectedEditor.tsx @@ -1,11 +1,64 @@ -import ProtectRoute from '../../common/components/protect-route/ProtectRoute'; +import { useCallback, useEffect } from 'react'; +import { IoApps, IoClose, IoSettingsOutline } from 'react-icons/io5'; +import { useDisclosure, useHotkeys } from '@mantine/hooks'; +import IconButton from '../../common/components/buttons/IconButton'; +import NavigationMenu from '../../common/components/navigation-menu/NavigationMenu'; +import ProtectRoute from '../../common/components/protect-route/ProtectRoute'; +import { useElectronListener } from '../../common/hooks/useElectronEvent'; +import { useWindowTitle } from '../../common/hooks/useWindowTitle'; +import AppSettings from '../../features/app-settings/AppSettings'; +import useAppSettingsNavigation from '../../features/app-settings/useAppSettingsNavigation'; +import EditorOverview from '../../features/overview/EditorOverview'; + +import WelcomePlacement from './welcome/WelcomePlacement'; import Editor from './Editor'; +import styles from './ProtectedEditor.module.scss'; + export default function ProtectedEditor() { + const { isOpen: isSettingsOpen, setLocation, close } = useAppSettingsNavigation(); + const [isOpen, handler] = useDisclosure(); + + useWindowTitle('Editor'); + + // we need to register the listener to change the editor location + useElectronListener(); + + // listen to shutdown request from electron process + useEffect(() => { + if (window.process?.type === 'renderer') { + window.ipcRenderer.on('user-request-shutdown', () => { + setLocation('shutdown'); + }); + } + }, [setLocation]); + + const toggleSettings = useCallback(() => { + if (isSettingsOpen) { + close(); + } else { + setLocation('settings'); + } + }, [close, isSettingsOpen, setLocation]); + + useHotkeys([['mod + ,', toggleSettings]]); + return ( - +
+ + + + + + + + {isSettingsOpen ? : } + + + {isSettingsOpen ? : } +
); }