-
-
-
+
+
+
+
+ {showSettings ? (
+
+ ) : (
+
+
+
+
+
+
+ )}
+
+
+ {
+ // TODO: the information about the event
+ }
-
-
-
-
diff --git a/apps/client/src/features/event-editor/EventEditor.module.scss b/apps/client/src/features/event-editor/EventEditor.module.scss
index 9ea11948b..82a7295b8 100644
--- a/apps/client/src/features/event-editor/EventEditor.module.scss
+++ b/apps/client/src/features/event-editor/EventEditor.module.scss
@@ -1,5 +1,36 @@
+@use '../../theme/ontimeColours' as *;
@use '../../theme/v2Styles' as *;
+.eventEditorContainer {
+ border-radius: 8px 8px 0 0;
+ background-color: $bg-container-l2;
+ box-shadow: $large-bottom-drawer-shadow;
+ border-top: 1px solid $white-20;
+ position: absolute;
+ bottom: 0;
+ width: 100vw;
+ left: 0;
+ z-index: 10;
+ color: white;
+ transition: bottom $transition-time-feedback;
+
+ &.noEvent {
+ bottom: -500px;
+ transition: bottom 0.7s;
+ }
+
+ .eventEditorLayout {
+ display: flex;
+ }
+
+ .header {
+ background-color: $gray-1250;
+ padding: 0.5rem;
+ border-left: 1px solid $white-10;
+ border-radius: 0 8px 0 0;
+ }
+}
+
.eventEditor {
padding: 1rem 2rem 2rem 2rem;
width: 100%;
diff --git a/apps/client/src/features/event-editor/EventEditorExport.tsx b/apps/client/src/features/event-editor/EventEditorExport.tsx
index 757117c4c..a845c342a 100644
--- a/apps/client/src/features/event-editor/EventEditorExport.tsx
+++ b/apps/client/src/features/event-editor/EventEditorExport.tsx
@@ -8,21 +8,13 @@ import { cx } from '../../common/utils/styleUtils';
import EventEditor from './EventEditor';
-import style from '../editors/Editor.module.scss';
-
-/* Styling for action buttons */
-const closeBtnStyle = {
- size: 'md',
- variant: 'ghost',
- colorScheme: 'white',
- _hover: { bg: '#ebedf0', color: '#333' },
-};
+import style from './EventEditor.module.scss';
const EventEditorExport = () => {
const editId = useAppMode((state) => state.editId);
const setEditId = useAppMode((state) => state.setEditId);
- const editorStyle = cx([style.eventEditor, !editId ? style.noEvent : null]);
+ const editorStyle = cx([style.eventEditorContainer, !editId ? style.noEvent : null]);
const removeOpenEvent = () => setEditId(null);
return (
@@ -31,7 +23,12 @@ const EventEditorExport = () => {
- } onClick={removeOpenEvent} {...closeBtnStyle} />
+ }
+ onClick={removeOpenEvent}
+ variant='ontime-ghosted-white'
+ />
diff --git a/apps/client/src/features/menu/MenuBar.module.scss b/apps/client/src/features/menu/MenuBar.module.scss
index 197f8df2c..b1841a2d6 100644
--- a/apps/client/src/features/menu/MenuBar.module.scss
+++ b/apps/client/src/features/menu/MenuBar.module.scss
@@ -1,9 +1,17 @@
@use '../../theme/ontimeColours' as *;
+.menu {
+ grid-area: menu;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.5em;
+}
+
.gap {
height: 1em;
}
.open {
background: $blue-700;
-}
\ No newline at end of file
+}
diff --git a/apps/client/src/features/menu/MenuBar.tsx b/apps/client/src/features/menu/MenuBar.tsx
index 5281bc24d..91cbc1779 100644
--- a/apps/client/src/features/menu/MenuBar.tsx
+++ b/apps/client/src/features/menu/MenuBar.tsx
@@ -1,5 +1,4 @@
import { memo, useCallback, useEffect, useState } from 'react';
-import { VStack } from '@chakra-ui/react';
import { IoColorWand } from '@react-icons/all-files/io5/IoColorWand';
import { IoExtensionPuzzle } from '@react-icons/all-files/io5/IoExtensionPuzzle';
import { IoExtensionPuzzleOutline } from '@react-icons/all-files/io5/IoExtensionPuzzleOutline';
@@ -20,7 +19,7 @@ import ExportModal, { ExportType } from '../modals/export-modal/ExportModal';
import style from './MenuBar.module.scss';
interface MenuBarProps {
- isSettingsOpen: boolean;
+ isOldSettingsOpen: boolean;
onSettingsOpen: () => void;
onSettingsClose: () => void;
isUploadOpen: boolean;
@@ -31,6 +30,8 @@ interface MenuBarProps {
onAboutOpen: () => void;
isQuickStartOpen: boolean;
onQuickStartOpen: () => void;
+ openSettings: (newTab?: string) => void;
+ isSettingsOpen: boolean;
}
const buttonStyle = {
@@ -47,7 +48,7 @@ const buttonStyle = {
const MenuBar = (props: MenuBarProps) => {
const {
- isSettingsOpen,
+ isOldSettingsOpen,
onSettingsOpen,
onSettingsClose,
isUploadOpen,
@@ -58,6 +59,8 @@ const MenuBar = (props: MenuBarProps) => {
onAboutOpen,
isQuickStartOpen,
onQuickStartOpen,
+ openSettings,
+ isSettingsOpen,
} = props;
const { isElectron, sendToElectron } = useElectronEvent();
@@ -118,7 +121,7 @@ const MenuBar = (props: MenuBarProps) => {
};
return (
-
+
@@ -188,7 +191,7 @@ const MenuBar = (props: MenuBarProps) => {
{...buttonStyle}
isDisabled={appMode === AppMode.Run}
icon={
}
- className={isSettingsOpen ? style.open : ''}
+ className={isOldSettingsOpen ? style.open : ''}
clickHandler={onSettingsOpen}
tooltip='Settings'
aria-label='Settings'
@@ -204,7 +207,17 @@ const MenuBar = (props: MenuBarProps) => {
aria-label='About'
size='sm'
/>
-
+
+
}
+ clickHandler={() => openSettings()}
+ tooltip='About'
+ aria-label='About'
+ size='sm'
+ />
+
);
};
diff --git a/apps/client/src/theme/ontimeButton.ts b/apps/client/src/theme/ontimeButton.ts
index 50442c6a8..3ed4dc33e 100644
--- a/apps/client/src/theme/ontimeButton.ts
+++ b/apps/client/src/theme/ontimeButton.ts
@@ -47,6 +47,14 @@ export const ontimeButtonSubtle = {
},
};
+// TODO: revise colours
+export const ontimeButtonGhostedWhite = {
+ ...ontimeButtonSubtle,
+ backgroundColor: 'transparent',
+ color: 'white',
+ _hover: { background: '#ebedf0', color: '#333' },
+};
+
export const ontimeButtonGhosted = {
...ontimeButtonSubtle,
backgroundColor: 'transparent',
diff --git a/apps/client/src/theme/theme.ts b/apps/client/src/theme/theme.ts
index 2378a270e..0515b96f9 100644
--- a/apps/client/src/theme/theme.ts
+++ b/apps/client/src/theme/theme.ts
@@ -4,6 +4,7 @@ import { ontimeAlertOnLight } from './OntimeAlert';
import {
ontimeButtonFilled,
ontimeButtonGhosted,
+ ontimeButtonGhostedWhite,
ontimeButtonOutlined,
ontimeButtonSubtle,
ontimeButtonSubtleOnLight,
@@ -46,6 +47,7 @@ const theme = extendTheme({
'ontime-outlined': { ...ontimeButtonOutlined },
'ontime-subtle': { ...ontimeButtonSubtle },
'ontime-ghosted': { ...ontimeButtonGhosted },
+ 'ontime-ghosted-white': { ...ontimeButtonGhostedWhite },
'ontime-subtle-white': { ...ontimeButtonSubtleWhite },
'ontime-subtle-on-light': { ...ontimeButtonSubtleOnLight },
'ontime-ghost-on-light': { ...ontimeGhostOnLight },
diff --git a/apps/test-db/db.json b/apps/test-db/db.json
index 6bbc1d0ea..acc0c718b 100644
--- a/apps/test-db/db.json
+++ b/apps/test-db/db.json
@@ -413,7 +413,7 @@
},
"settings": {
"app": "ontime",
- "version": "2.0.0",
+ "version": "3.0.0-alpha",
"serverPort": 4001,
"editorKey": null,
"operatorKey": null,
diff --git a/e2e/tests/000-smoke-tests.spec.ts b/e2e/tests/000-smoke-tests.spec.ts
index 3901cf8af..c75cd006b 100644
--- a/e2e/tests/000-smoke-tests.spec.ts
+++ b/e2e/tests/000-smoke-tests.spec.ts
@@ -8,7 +8,7 @@ test.describe('pages routes are available', () => {
await page.goto('http://localhost:4001/editor');
await expect(page).toHaveTitle(/ontime/);
- await expect(page.getByTestId('event-editor')).toBeVisible();
+ await expect(page.getByTestId('editor-container')).toBeVisible();
await expect(page.getByTestId('panel-rundown')).toBeVisible();
await expect(page.getByTestId('panel-timer-control')).toBeVisible();
await expect(page.getByTestId('panel-messages-control')).toBeVisible();