diff --git a/apps/client/src/theme/_ontimeStyles.scss b/apps/client/src/theme/_ontimeStyles.scss index 5877af8490..6af795b748 100644 --- a/apps/client/src/theme/_ontimeStyles.scss +++ b/apps/client/src/theme/_ontimeStyles.scss @@ -57,6 +57,7 @@ $text-body-size: calc(1rem - 1px); // media queries $min-tablet: 500px; +$small-screen: 800px; .blink { animation: blink 1s step-start infinite; diff --git a/apps/client/src/views/cuesheet/cuesheet-table-settings/CuesheetTableSettings.module.scss b/apps/client/src/views/cuesheet/cuesheet-table-settings/CuesheetTableSettings.module.scss index 1946fd5a4f..4afcee79e0 100644 --- a/apps/client/src/views/cuesheet/cuesheet-table-settings/CuesheetTableSettings.module.scss +++ b/apps/client/src/views/cuesheet/cuesheet-table-settings/CuesheetTableSettings.module.scss @@ -1,24 +1,20 @@ .tableSettings { grid-area: settings; - padding: 1rem; - background-color: $ui-black; + padding: 0.5rem 1rem; display: flex; + gap: 5rem; font-size: $inner-section-text-size; -} -.leftPanel { - display: flex; - flex-direction: column; - width: 100%; - gap: 0.5rem; + @media (max-width: $small-screen) { + gap: 1rem; + } } .sectionTitle { - color: $gray-700; text-transform: uppercase; } -.options { +.row { display: flex; flex-wrap: wrap; column-gap: 1rem; @@ -30,12 +26,4 @@ display: flex; align-items: center; gap: 0.5rem; -} - -.rightPanel { - display: flex; - flex-direction: column; - gap: 0.5rem; - - padding-left: 2rem; -} +} \ No newline at end of file diff --git a/apps/client/src/views/cuesheet/cuesheet-table-settings/CuesheetTableSettings.tsx b/apps/client/src/views/cuesheet/cuesheet-table-settings/CuesheetTableSettings.tsx index 290512c198..fd7c044247 100644 --- a/apps/client/src/views/cuesheet/cuesheet-table-settings/CuesheetTableSettings.tsx +++ b/apps/client/src/views/cuesheet/cuesheet-table-settings/CuesheetTableSettings.tsx @@ -1,15 +1,15 @@ import { memo, ReactNode } from 'react'; -import { Button, Checkbox, Switch } from '@chakra-ui/react'; +import { Button, Checkbox } from '@chakra-ui/react'; import { Column } from '@tanstack/react-table'; import { OntimeRundownEntry } from 'ontime-types'; -import { useCuesheetSettings } from '../store/cuesheetSettingsStore'; +import * as Editor from '../../../features/editors/editor-utils/EditorUtils'; import style from './CuesheetTableSettings.module.scss'; // reusable button styles const buttonProps = { - size: 'sm', + size: 'xs', variant: 'ontime-subtle', }; @@ -22,26 +22,12 @@ interface CuesheetTableSettingsProps { function CuesheetTableSettings(props: CuesheetTableSettingsProps) { const { columns, handleResetResizing, handleResetReordering, handleClearToggles } = props; - const { - followSelected, - showIndexColumn, - toggleFollow, - showPrevious, - togglePreviousVisibility, - showDelayBlock, - hideSeconds, - showDelayedTimes, - toggleIndexColumn, - toggleDelayedTimes, - toggleDelayVisibility, - toggleSecondsVisibility, - } = useCuesheetSettings(); return (
-
-
Toggle column visibility
-
+
+ Toggle column visibility +
{columns.map((column) => { const columnHeader = column.columnDef.header; const visible = column.getIsVisible(); @@ -57,47 +43,20 @@ function CuesheetTableSettings(props: CuesheetTableSettingsProps) { ); })}
-
Table Options
-
- - - -
-
Delay Flow
-
- - - -
-
- - - +
+ Reset Options +
+ + + +
);