diff --git a/apps/client/src/common/components/app-link/AppLink.module.scss b/apps/client/src/common/components/app-link/AppLink.module.scss new file mode 100644 index 000000000..839093ed3 --- /dev/null +++ b/apps/client/src/common/components/app-link/AppLink.module.scss @@ -0,0 +1,13 @@ +@use "../../../theme/v2Styles" as *; +@use "../../../theme/mixins" as *; + +.link { + @include action-link; + font-size: $inner-section-text-size; +} + +.linkIcon { + margin-left: $element-inner-spacing; + display: inline-block; + transform: rotate(45deg); +} diff --git a/apps/client/src/common/components/app-link/AppLink.tsx b/apps/client/src/common/components/app-link/AppLink.tsx new file mode 100644 index 000000000..3137d0774 --- /dev/null +++ b/apps/client/src/common/components/app-link/AppLink.tsx @@ -0,0 +1,26 @@ +import { MouseEvent, ReactNode } from 'react'; +import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp'; + +import { openLink } from '../../utils/linkUtils'; + +import style from './AppLink.module.scss'; + +interface AppLinkProps { + href: string; + children: ReactNode; +} + +export default function AppLink(props: AppLinkProps) { + const { href, children } = props; + + const handleClick = (event: MouseEvent) => { + event.preventDefault(); + openLink(href); + }; + + return ( + + {children} + + ); +} diff --git a/apps/client/src/common/components/external-link/ExternalLink.tsx b/apps/client/src/common/components/external-link/ExternalLink.tsx index 25e4b0e21..9e7f42a59 100644 --- a/apps/client/src/common/components/external-link/ExternalLink.tsx +++ b/apps/client/src/common/components/external-link/ExternalLink.tsx @@ -12,7 +12,7 @@ interface ExternalLinkProps { inline?: boolean; } -export default function ModalLink(props: ExternalLinkProps) { +export default function ExternalLink(props: ExternalLinkProps) { const { href, inline, children } = props; const classes = cx([style.link, inline ? style.inline : null]); diff --git a/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss b/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss index 323ace84e..c00bf858e 100644 --- a/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss +++ b/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss @@ -71,7 +71,6 @@ $button-size: 48px; @include action-link; justify-content: space-between; padding: 0.5rem 1rem; - cursor: pointer; &:hover { background-color: $menu-hover-bg; diff --git a/apps/client/src/common/stores/editorSettings.ts b/apps/client/src/common/stores/editorSettings.ts index c4922303a..79d151184 100644 --- a/apps/client/src/common/stores/editorSettings.ts +++ b/apps/client/src/common/stores/editorSettings.ts @@ -6,7 +6,6 @@ type EditorSettings = { showQuickEntry: boolean; startTimeIsLastEnd: boolean; defaultPublic: boolean; - showNif: boolean; }; type EditorSettingsStore = { @@ -15,14 +14,12 @@ type EditorSettingsStore = { setShowQuickEntry: (showQuickEntry: boolean) => void; setStartTimeIsLastEnd: (startTimeIsLastEnd: boolean) => void; setDefaultPublic: (defaultPublic: boolean) => void; - setShowNif: (showNif: boolean) => void; }; enum EditorSettingsKeys { ShowQuickEntry = 'ontime-show-quick-entry', StartTimeIsLastEnd = 'ontime-start-is-last-end', DefaultPublic = 'ontime-default-public', - ShowNif = 'ontime-show-nif', } export const useEditorSettings = create((set) => ({ @@ -30,7 +27,6 @@ export const useEditorSettings = create((set) => ({ showQuickEntry: booleanFromLocalStorage(EditorSettingsKeys.ShowQuickEntry, false), startTimeIsLastEnd: booleanFromLocalStorage(EditorSettingsKeys.ShowQuickEntry, true), defaultPublic: booleanFromLocalStorage(EditorSettingsKeys.ShowQuickEntry, true), - showNif: booleanFromLocalStorage(EditorSettingsKeys.ShowNif, true), }, setLocalEventSettings: (value) => @@ -58,10 +54,4 @@ export const useEditorSettings = create((set) => ({ localStorage.setItem(EditorSettingsKeys.DefaultPublic, String(defaultPublic)); return { eventSettings: { ...state.eventSettings, defaultPublic } }; }), - - setShowNif: (showNif) => - set((state) => { - localStorage.setItem(EditorSettingsKeys.ShowNif, String(showNif)); - return { eventSettings: { ...state.eventSettings, showNif } }; - }), })); diff --git a/apps/client/src/features/app-settings/AppSettings.tsx b/apps/client/src/features/app-settings/AppSettings.tsx index 65d2b36bc..7cedf7999 100644 --- a/apps/client/src/features/app-settings/AppSettings.tsx +++ b/apps/client/src/features/app-settings/AppSettings.tsx @@ -3,6 +3,7 @@ import { ErrorBoundary } from '@sentry/react'; import { useKeyDown } from '../../common/hooks/useKeyDown'; import AboutPanel from './panel/about-panel/AboutPanel'; +import LogPanel from './panel/log-panel/LogPanel'; import ProjectPanel from './panel/project-panel/ProjectPanel'; import PanelContent from './panel-content/PanelContent'; import PanelList from './panel-list/PanelList'; @@ -26,6 +27,7 @@ export default function AppSettings() { {selectedPanel === 'project' && } {selectedPanel === 'about' && } + {selectedPanel === 'log' && } diff --git a/apps/client/src/features/info/InfoLogger.module.scss b/apps/client/src/features/app-settings/panel/log-panel/Log.module.scss similarity index 64% rename from apps/client/src/features/info/InfoLogger.module.scss rename to apps/client/src/features/app-settings/panel/log-panel/Log.module.scss index 916bc3015..37d30ddb9 100644 --- a/apps/client/src/features/info/InfoLogger.module.scss +++ b/apps/client/src/features/app-settings/panel/log-panel/Log.module.scss @@ -1,20 +1,19 @@ -@use '../../theme/v2Styles' as *; -@use '../../theme/mixins' as *; +@use '../../../../theme/ontimeColours' as *; +@use '../../../../theme/v2Styles' as *; $info-gray: $secondary-text-gray; $info-hover: $section-white; .log { - flex: 1; - height: 100%; - overflow-y: scroll; - font-size: 0.8em; + font-size: $inner-section-text-size; + overflow-y: auto; user-select: text; + min-height: 10vh; + max-height: 40vh; } .logEntry { display: flex; - margin-bottom: 2px; &.INFO { color: $info-gray; @@ -33,7 +32,7 @@ $info-hover: $section-white; } .time { - width: 4.5em + width: 4.5em; } .origin { @@ -48,7 +47,7 @@ $info-hover: $section-white; .buttonBar { display: flex; flex-wrap: wrap; - gap: 8px; + gap: 0.5rem; justify-content: flex-start; - margin-bottom: 8px; + padding-bottom: 0.5rem; } diff --git a/apps/client/src/features/info/InfoLogger.tsx b/apps/client/src/features/app-settings/panel/log-panel/Log.tsx similarity index 91% rename from apps/client/src/features/info/InfoLogger.tsx rename to apps/client/src/features/app-settings/panel/log-panel/Log.tsx index 285717c5c..d6f014c86 100644 --- a/apps/client/src/features/info/InfoLogger.tsx +++ b/apps/client/src/features/app-settings/panel/log-panel/Log.tsx @@ -2,11 +2,11 @@ import { useCallback, useState } from 'react'; import { Button } from '@chakra-ui/react'; import { LogOrigin } from 'ontime-types'; -import { clearLogs, useLogData } from '../../common/stores/logger'; +import { clearLogs, useLogData } from '../../../../common/stores/logger'; -import style from './InfoLogger.module.scss'; +import style from './Log.module.scss'; -export default function InfoLogger() { +export default function Log() { const { logs: logData } = useLogData(); const [showClient, setShowClient] = useState(true); @@ -52,7 +52,7 @@ export default function InfoLogger() {
-
diff --git a/apps/client/src/features/app-settings/panel/log-panel/LogPanel.tsx b/apps/client/src/features/app-settings/panel/log-panel/LogPanel.tsx new file mode 100644 index 000000000..0f53582da --- /dev/null +++ b/apps/client/src/features/app-settings/panel/log-panel/LogPanel.tsx @@ -0,0 +1,26 @@ +import * as Panel from '../PanelUtils'; + +import Log from './Log'; +import InfoNif from './NetworkInterfaces'; + +export default function LogPanel() { + return ( + <> + Application log + + Available networks + + Ontime is streaming on the following network interfaces + + + + + + Network log + + + + + + ); +} diff --git a/apps/client/src/features/app-settings/panel/log-panel/NetworkInterfaces.module.scss b/apps/client/src/features/app-settings/panel/log-panel/NetworkInterfaces.module.scss new file mode 100644 index 000000000..ff4e8f88c --- /dev/null +++ b/apps/client/src/features/app-settings/panel/log-panel/NetworkInterfaces.module.scss @@ -0,0 +1,8 @@ +@use '../../../../theme/v2Styles' as *; + +.interfaces { + display: flex; + flex-wrap: wrap; + gap: $section-spacing; + row-gap: $element-inner-spacing; +} diff --git a/apps/client/src/features/app-settings/panel/log-panel/NetworkInterfaces.tsx b/apps/client/src/features/app-settings/panel/log-panel/NetworkInterfaces.tsx new file mode 100644 index 000000000..1ecbdd576 --- /dev/null +++ b/apps/client/src/features/app-settings/panel/log-panel/NetworkInterfaces.tsx @@ -0,0 +1,19 @@ +import { serverPort } from '../../../../common/api/apiConstants'; +import AppLink from '../../../../common/components/app-link/AppLink'; +import useInfo from '../../../../common/hooks-query/useInfo'; + +import style from './NetworkInterfaces.module.scss'; + +export default function InfoNif() { + const { data } = useInfo(); + + return ( +
+ {data?.networkInterfaces?.map((nif) => ( + + {`${nif.name} - ${nif.address}`} + + ))} +
+ ); +} diff --git a/apps/client/src/features/info/Info.module.scss b/apps/client/src/features/info/Info.module.scss index b64b5b141..ff5dead02 100644 --- a/apps/client/src/features/info/Info.module.scss +++ b/apps/client/src/features/info/Info.module.scss @@ -43,23 +43,3 @@ margin-left: $element-inner-spacing; font-size: $text-body-size; } - -.interfaceList { - display: flex; - flex-wrap: wrap; - gap: $section-spacing; - row-gap: $element-inner-spacing; - - .interface { - @include action-link; - font-size: $inner-section-text-size; - white-space: nowrap; - } - - .linkIcon { - margin-left: $element-inner-spacing; - display: inline-block; - transform: rotate(45deg); - } -} - diff --git a/apps/client/src/features/info/Info.tsx b/apps/client/src/features/info/Info.tsx index 313a95e05..164b38487 100644 --- a/apps/client/src/features/info/Info.tsx +++ b/apps/client/src/features/info/Info.tsx @@ -1,14 +1,10 @@ import { useInfoPanel } from '../../common/hooks/useSocket'; -import { useEditorSettings } from '../../common/stores/editorSettings'; import CollapsableInfo from './CollapsableInfo'; -import InfoLogger from './InfoLogger'; -import InfoNif from './InfoNif'; import InfoTitles from './InfoTitles'; export default function Info() { const data = useInfoPanel(); - const showNif = useEditorSettings((state) => state.eventSettings.showNif); const titlesNow = { title: data.eventNow?.title || '', @@ -26,20 +22,12 @@ export default function Info() { return ( <> - {showNif && ( - - - - )} - - - ); } diff --git a/apps/client/src/features/info/InfoNif.tsx b/apps/client/src/features/info/InfoNif.tsx deleted file mode 100644 index 1d0f8b9f7..000000000 --- a/apps/client/src/features/info/InfoNif.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp'; - -import { serverPort } from '../../common/api/apiConstants'; -import useInfo from '../../common/hooks-query/useInfo'; -import { openLink } from '../../common/utils/linkUtils'; - -import style from './Info.module.scss'; - -export default function InfoNif() { - const { data } = useInfo(); - - const handleClick = (address: string) => { - const baseURL = `http://__IP__:${serverPort}`; - openLink(baseURL.replace('__IP__', address)); - }; - - return ( -
- {data?.networkInterfaces?.map((nif) => ( - handleClick(nif.address)} className={style.interface}> - {`${nif.name} - ${nif.address}`} - - - ))} -
- ); -} diff --git a/apps/client/src/features/modals/settings-modal/EditorSettings.tsx b/apps/client/src/features/modals/settings-modal/EditorSettings.tsx index 100fc291d..096e31898 100644 --- a/apps/client/src/features/modals/settings-modal/EditorSettings.tsx +++ b/apps/client/src/features/modals/settings-modal/EditorSettings.tsx @@ -10,7 +10,6 @@ export default function EditorSettings() { const setShowQuickEntry = useEditorSettings((state) => state.setShowQuickEntry); const setStartTimeIsLastEnd = useEditorSettings((state) => state.setStartTimeIsLastEnd); const setDefaultPublic = useEditorSettings((state) => state.setDefaultPublic); - const setShowNif = useEditorSettings((state) => state.setShowNif); return (
@@ -40,18 +39,6 @@ export default function EditorSettings() { onChange={(event) => setDefaultPublic(event.target.checked)} /> - Info settings - - setShowNif(event.target.checked)} - /> -
); } diff --git a/apps/client/src/theme/_mixins.scss b/apps/client/src/theme/_mixins.scss index ef3481175..8b12fb0e7 100644 --- a/apps/client/src/theme/_mixins.scss +++ b/apps/client/src/theme/_mixins.scss @@ -9,8 +9,9 @@ cursor: pointer; transition-property: color; transition-duration: $transition-time-action; + white-space: nowrap; &:hover { color: $ontime-color; } -} \ No newline at end of file +}