From 8adca908b38c02f09f8dc13287c8727732266f4c Mon Sep 17 00:00:00 2001 From: Carlos Valente Date: Thu, 27 Feb 2025 21:14:16 +0100 Subject: [PATCH] refactor: improve links inside editor --- .../RedirectClientModal.module.scss | 7 ----- .../client-modal/RedirectClientModal.tsx | 5 ++-- .../link/app-link/AppLink.module.scss | 16 +++++----- .../components/link/app-link/AppLink.tsx | 29 +++++++++---------- .../playback-timer/PlaybackTimer.module.scss | 7 ----- .../playback/playback-timer/PlaybackTimer.tsx | 7 ++--- .../rundown/event-editor/EventEditor.tsx | 14 ++------- 7 files changed, 27 insertions(+), 58 deletions(-) diff --git a/apps/client/src/common/components/client-modal/RedirectClientModal.module.scss b/apps/client/src/common/components/client-modal/RedirectClientModal.module.scss index 048b7c2f0..a8896858c 100644 --- a/apps/client/src/common/components/client-modal/RedirectClientModal.module.scss +++ b/apps/client/src/common/components/client-modal/RedirectClientModal.module.scss @@ -22,10 +22,3 @@ .label { color: $label-gray; } - -.link { - color: $label-gray; - font-size: $text-body-size; - text-decoration: underline; - text-underline-offset: 2px; -} diff --git a/apps/client/src/common/components/client-modal/RedirectClientModal.tsx b/apps/client/src/common/components/client-modal/RedirectClientModal.tsx index da9abaa40..6d19736a8 100644 --- a/apps/client/src/common/components/client-modal/RedirectClientModal.tsx +++ b/apps/client/src/common/components/client-modal/RedirectClientModal.tsx @@ -16,6 +16,7 @@ import { navigatorConstants } from '../../../viewerConfig'; import { setClientRemote } from '../../hooks/useSocket'; import useUrlPresets from '../../hooks-query/useUrlPresets'; import Info from '../info/Info'; +import AppLink from '../link/app-link/AppLink'; import style from './RedirectClientModal.module.scss'; @@ -58,9 +59,7 @@ export function RedirectClientModal(props: RedirectClientModalProps) { Either by selecting a URL Preset or entering a custom path.

- - Manage URL Presets - + Manage URL Presets
Select View or URL Preset diff --git a/apps/client/src/common/components/link/app-link/AppLink.module.scss b/apps/client/src/common/components/link/app-link/AppLink.module.scss index 453f39722..36a8f13a2 100644 --- a/apps/client/src/common/components/link/app-link/AppLink.module.scss +++ b/apps/client/src/common/components/link/app-link/AppLink.module.scss @@ -1,12 +1,10 @@ -@use "../../../../theme/mixins" as *; - .link { - @include action-link; - font-size: $inner-section-text-size; -} + color: $label-gray; + font-size: $text-body-size; + text-decoration: underline; + text-underline-offset: 2px; -.linkIcon { - margin-left: $element-inner-spacing; - display: inline-block; - @include rotate-fourty-five; + &:hover { + color: $blue-400; + } } diff --git a/apps/client/src/common/components/link/app-link/AppLink.tsx b/apps/client/src/common/components/link/app-link/AppLink.tsx index da4535840..7135aff27 100644 --- a/apps/client/src/common/components/link/app-link/AppLink.tsx +++ b/apps/client/src/common/components/link/app-link/AppLink.tsx @@ -1,26 +1,25 @@ -import { MouseEvent, ReactNode } from 'react'; -import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp'; - -import { openLink } from '../../../utils/linkUtils'; +import { type PropsWithChildren } from 'react'; +import { useNavigate } from 'react-router-dom'; import style from './AppLink.module.scss'; interface AppLinkProps { - href: string; - children: ReactNode; + search: string; } -export default function AppLink(props: AppLinkProps) { - const { href, children } = props; +/** + * Component used to navigate to an editor link inside the same window + * Handles the path to respect Ontime Clouds base URL + */ +export default function AppLink(props: PropsWithChildren) { + const { search, children } = props; + const navigate = useNavigate(); - const handleClick = (event: MouseEvent) => { - event.preventDefault(); - openLink(href); - }; + const handleClick = () => navigate({ search }); return ( - - {children} - + ); } diff --git a/apps/client/src/features/control/playback/playback-timer/PlaybackTimer.module.scss b/apps/client/src/features/control/playback/playback-timer/PlaybackTimer.module.scss index 18f826bf2..1fd3fdbdb 100644 --- a/apps/client/src/features/control/playback/playback-timer/PlaybackTimer.module.scss +++ b/apps/client/src/features/control/playback/playback-timer/PlaybackTimer.module.scss @@ -76,10 +76,3 @@ color: $ontime-roll; font-size: $text-body-size; } - -.reportLink { - color: $label-gray; - font-size: $text-body-size; - text-decoration: underline; - text-underline-offset: 2px; -} diff --git a/apps/client/src/features/control/playback/playback-timer/PlaybackTimer.tsx b/apps/client/src/features/control/playback/playback-timer/PlaybackTimer.tsx index b2996c8f3..eb1a541a6 100644 --- a/apps/client/src/features/control/playback/playback-timer/PlaybackTimer.tsx +++ b/apps/client/src/features/control/playback/playback-timer/PlaybackTimer.tsx @@ -3,6 +3,7 @@ import { Tooltip } from '@chakra-ui/react'; import { MaybeNumber, Playback, TimerPhase } from 'ontime-types'; import { dayInMs, millisToString } from 'ontime-utils'; +import AppLink from '../../../../common/components/link/app-link/AppLink'; import { useTimer } from '../../../../common/hooks/useSocket'; import useReport from '../../../../common/hooks-query/useReport'; import { formatDuration } from '../../../../common/utils/time'; @@ -98,11 +99,7 @@ function StoppedStatus() { const hasReport = Object.keys(data).length > 0; if (hasReport) { - return ( - - Go to report management - - ); + return Go to report management; } return null; diff --git a/apps/client/src/features/rundown/event-editor/EventEditor.tsx b/apps/client/src/features/rundown/event-editor/EventEditor.tsx index 5649e8d75..4e4a3558e 100644 --- a/apps/client/src/features/rundown/event-editor/EventEditor.tsx +++ b/apps/client/src/features/rundown/event-editor/EventEditor.tsx @@ -1,8 +1,7 @@ import { CSSProperties, useCallback } from 'react'; -import { useSearchParams } from 'react-router-dom'; -import { Button } from '@chakra-ui/react'; import { CustomFieldLabel, OntimeEvent } from 'ontime-types'; +import AppLink from '../../../common/components/link/app-link/AppLink'; import { useEventAction } from '../../../common/hooks/useEventAction'; import useCustomFields from '../../../common/hooks-query/useCustomFields'; import { getAccessibleColour } from '../../../common/utils/styleUtils'; @@ -29,7 +28,6 @@ export default function EventEditor(props: EventEditorProps) { const { event } = props; const { data: customFields } = useCustomFields(); const { updateEvent } = useEventAction(); - const [_searchParams, setSearchParams] = useSearchParams(); const isEditor = window.location.pathname.includes('editor'); @@ -45,10 +43,6 @@ export default function EventEditor(props: EventEditorProps) { [event?.id, updateEvent], ); - const handleOpenCustomManager = () => { - setSearchParams({ settings: 'feature_settings__custom' }); - }; - if (!event) { return ; } @@ -83,11 +77,7 @@ export default function EventEditor(props: EventEditorProps) {
Custom Fields - {isEditor && ( - - )} + {isEditor && Manage} {Object.keys(customFields).map((fieldKey) => {