diff --git a/apps/client/src/common/components/state/EmptyPage.module.scss b/apps/client/src/common/components/state/EmptyPage.module.scss new file mode 100644 index 000000000..b3dea3ab5 --- /dev/null +++ b/apps/client/src/common/components/state/EmptyPage.module.scss @@ -0,0 +1,20 @@ +@use '../../../theme/viewerDefs' as *; + +/* share the same style as a page layout */ +.page { + margin: 0; + box-sizing: border-box; /* reset */ + overflow: hidden; + width: 100%; /* restrict the page width to viewport */ + height: 100vh; + + font-family: var(--font-family-override, $viewer-font-family); + background: var(--background-color-override, $viewer-background-color); + color: var(--color-override, $viewer-color); + padding: min(2vh, 16px) clamp(16px, 10vw, 64px); + + display: flex; + flex-direction: column; + align-items: center; + padding-top: 5rem; +} diff --git a/apps/client/src/common/components/state/EmptyPage.tsx b/apps/client/src/common/components/state/EmptyPage.tsx new file mode 100644 index 000000000..4bfc3f37e --- /dev/null +++ b/apps/client/src/common/components/state/EmptyPage.tsx @@ -0,0 +1,20 @@ +import { CSSProperties } from 'react'; + +import Empty from './Empty'; + +import style from './EmptyPage.module.scss'; + +interface EmptyPageProps { + text?: string; + style?: CSSProperties; +} + +export default function EmptyPage(props: EmptyPageProps) { + const { text, ...rest } = props; + + return ( +
+ +
+ ); +} diff --git a/apps/client/src/views/project-info/ProjectInfo.tsx b/apps/client/src/views/project-info/ProjectInfo.tsx index b31b6c3ce..5f8f9e0cd 100644 --- a/apps/client/src/views/project-info/ProjectInfo.tsx +++ b/apps/client/src/views/project-info/ProjectInfo.tsx @@ -1,6 +1,7 @@ import { ProjectData } from 'ontime-types'; import Empty from '../../common/components/state/Empty'; +import EmptyPage from '../../common/components/state/EmptyPage'; import ViewLogo from '../../common/components/view-logo/ViewLogo'; import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor'; import { useWindowTitle } from '../../common/hooks/useWindowTitle'; @@ -16,7 +17,7 @@ interface ProjectInfoProps { isMirrored: boolean; } -export default function ProjectInfoProps(props: ProjectInfoProps) { +export default function ProjectInfo(props: ProjectInfoProps) { const { general, isMirrored } = props; useWindowTitle('Project info'); @@ -25,6 +26,25 @@ export default function ProjectInfoProps(props: ProjectInfoProps) { return ; } + if (!general) { + return ( + <> + + return ; + + ); + } + + const isEmpty = Object.values(general).every((value) => !value); + if (isEmpty) { + return ( + <> + + ; + + ); + } + return (