diff --git a/apps/client/src/features/app-settings/panel/shutdown-panel/ShutdownPanel.tsx b/apps/client/src/features/app-settings/panel/shutdown-panel/ShutdownPanel.tsx index 788a9d5cc..61af9de6a 100644 --- a/apps/client/src/features/app-settings/panel/shutdown-panel/ShutdownPanel.tsx +++ b/apps/client/src/features/app-settings/panel/shutdown-panel/ShutdownPanel.tsx @@ -20,6 +20,7 @@ export default function ShutdownPanel() { const sendShutdown = () => { sendToElectron('shutdown', 'now'); + onClose(); }; return ( @@ -30,10 +31,10 @@ export default function ShutdownPanel() { This will shutdown the Ontime server.
The runtime state will be lost, but your project is kept for next time. - - + @@ -43,10 +44,10 @@ export default function ShutdownPanel() { This will shutdown the Ontime server.
Are you sure? - - diff --git a/apps/client/src/features/rundown/rundown-header/RundownMenu.tsx b/apps/client/src/features/rundown/rundown-header/RundownMenu.tsx index 12493d8b2..0dcdd4fe5 100644 --- a/apps/client/src/features/rundown/rundown-header/RundownMenu.tsx +++ b/apps/client/src/features/rundown/rundown-header/RundownMenu.tsx @@ -1,5 +1,14 @@ -import { useCallback } from 'react'; -import { Button } from '@chakra-ui/react'; +import { useCallback, useRef } from 'react'; +import { + AlertDialog, + AlertDialogBody, + AlertDialogContent, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogOverlay, + Button, + useDisclosure, +} from '@chakra-ui/react'; import { IoTrash } from '@react-icons/all-files/io5/IoTrash'; import { useEventAction } from '../../../common/hooks/useEventAction'; @@ -12,22 +21,48 @@ export default function RundownMenu() { const appMode = useAppMode((state) => state.mode); const { deleteAllEvents } = useEventAction(); + const { isOpen, onOpen, onClose } = useDisclosure(); + const cancelRef = useRef(null); + const deleteAll = useCallback(() => { deleteAllEvents(); clearSelectedEvents(); setCursor(null); - }, [clearSelectedEvents, deleteAllEvents, setCursor]); + onClose(); + }, [clearSelectedEvents, deleteAllEvents, onClose, setCursor]); return ( - + <> + + + + + + Clear rundown + + + You will lose all data in your rundown.
Are you sure? +
+ + + + +
+
+
+ ); } diff --git a/apps/client/src/theme/OntimeAlert.ts b/apps/client/src/theme/OntimeAlert.ts index 2fd8332bd..10433ee0e 100644 --- a/apps/client/src/theme/OntimeAlert.ts +++ b/apps/client/src/theme/OntimeAlert.ts @@ -10,3 +10,11 @@ export const ontimeAlertOnDark = { color: '#578AF4', // $blue-500 }, }; + +export const ontimeDialog = { + container: { + backgroundColor: '#1a1a1a', // $gray-1300 + color: '#e2e2e2', // $gray-200 + borderRadius: '3px', + }, +}; diff --git a/apps/client/src/theme/theme.ts b/apps/client/src/theme/theme.ts index 7681c3bdf..d0095ddca 100644 --- a/apps/client/src/theme/theme.ts +++ b/apps/client/src/theme/theme.ts @@ -1,6 +1,6 @@ import { extendTheme } from '@chakra-ui/react'; -import { ontimeAlertOnDark } from './OntimeAlert'; +import { ontimeAlertOnDark, ontimeDialog } from './OntimeAlert'; import { ontimeButtonFilled, ontimeButtonGhosted, @@ -35,6 +35,11 @@ const theme = extendTheme({ 'ontime-on-dark-info': { ...ontimeAlertOnDark }, }, }, + AlertDialog: { + variants: { + ontime: { ...ontimeDialog }, + }, + }, Button: { baseStyle: { letterSpacing: '0.3px', diff --git a/e2e/tests/000-upload-showfile.spec.ts b/e2e/tests/000-upload-showfile.spec.ts index c45f9c63a..5517b83ab 100644 --- a/e2e/tests/000-upload-showfile.spec.ts +++ b/e2e/tests/000-upload-showfile.spec.ts @@ -6,6 +6,7 @@ test('project file upload', async ({ page }) => { await page.goto('http://localhost:4001/editor'); await page.getByRole('button', { name: 'Edit' }).click(); await page.getByRole('button', { name: 'Clear rundown' }).click(); + await page.getByRole('button', { name: 'Delete all' }).click(); await page.getByRole('button', { name: 'toggle settings' }).click(); await page.getByRole('button', { name: 'Project', exact: true }).click(); diff --git a/e2e/tests/features/203-delay-block.spec.ts b/e2e/tests/features/203-delay-block.spec.ts index bfb52938d..40af8d9b9 100644 --- a/e2e/tests/features/203-delay-block.spec.ts +++ b/e2e/tests/features/203-delay-block.spec.ts @@ -6,6 +6,7 @@ test('delay blocks add time to events', async ({ page }) => { // delete all events and add a new one await page.getByRole('button', { name: 'Edit' }).click(); await page.getByRole('button', { name: 'Clear rundown' }).click(); + await page.getByRole('button', { name: 'Delete all' }).click(); await page.getByRole('button', { name: 'Create event' }).click(); // add data to new event @@ -53,6 +54,7 @@ test('delays are show correctly', async ({ page }) => { // add a test event await page.getByRole('button', { name: 'Edit' }).click(); await page.getByRole('button', { name: 'Clear rundown' }).click(); + await page.getByRole('button', { name: 'Delete all' }).click(); await page.getByRole('button', { name: 'Create Event' }).click(); await page.getByTestId('time-input-timeStart').click(); diff --git a/e2e/tests/features/204-editor-crud.spec.ts b/e2e/tests/features/204-editor-crud.spec.ts index 01c3e572f..ae2122a3c 100644 --- a/e2e/tests/features/204-editor-crud.spec.ts +++ b/e2e/tests/features/204-editor-crud.spec.ts @@ -3,9 +3,9 @@ import { test, expect } from '@playwright/test'; test('CRUD operations on the rundown', async ({ page }) => { await page.goto('http://localhost:4001/editor'); - // clear rundown await page.getByRole('button', { name: 'Edit' }).click(); await page.getByRole('button', { name: 'Clear rundown' }).click(); + await page.getByRole('button', { name: 'Delete all' }).click(); // create event from the rundown empty button await page.getByRole('button', { name: 'Create Event' }).click(); diff --git a/e2e/tests/features/205-operator.spec.ts b/e2e/tests/features/205-operator.spec.ts index d69ecd3e0..50faee184 100644 --- a/e2e/tests/features/205-operator.spec.ts +++ b/e2e/tests/features/205-operator.spec.ts @@ -5,6 +5,7 @@ test('smoke test operator', async ({ page }) => { await page.goto('http://localhost:4001/editor'); await page.getByRole('button', { name: 'Edit' }).click(); await page.getByRole('button', { name: 'Clear rundown' }).click(); + await page.getByRole('button', { name: 'Delete all' }).click(); await page.getByRole('button', { name: 'Create Event' }).click(); await page.getByTestId('time-input-timeStart').fill('1m'); diff --git a/e2e/tests/features/301-spreadsheet-import.spec.ts b/e2e/tests/features/301-spreadsheet-import.spec.ts index c87e86482..38e014c05 100644 --- a/e2e/tests/features/301-spreadsheet-import.spec.ts +++ b/e2e/tests/features/301-spreadsheet-import.spec.ts @@ -6,6 +6,7 @@ test('sheet file upload', async ({ page }) => { await page.goto('http://localhost:4001/editor'); await page.getByRole('button', { name: 'Edit' }).click(); await page.getByRole('button', { name: 'Clear rundown' }).click(); + await page.getByRole('button', { name: 'Delete all' }).click(); await page.getByRole('button', { name: 'Toggle settings' }).click(); await page.getByRole('button', { name: 'Import spreadsheet' }).click();