diff --git a/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx b/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx
index 3ef193020..482e75b86 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx
+++ b/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx
@@ -40,7 +40,7 @@ export default function CuesheetTable(props: CuesheetTableProps) {
const { updateEvent, updateTimer } = useEventAction();
const { selectedEventId } = useSelectedEventId();
- const { followSelected, hideDelays, hidePast, hideIndexColumn } = useCuesheetOptions();
+ const { followSelected, hideDelays, hidePast } = useCuesheetOptions();
const { columnVisibility, columnOrder, columnSizing, resetColumnOrder, setColumnVisibility, setColumnSizing } =
useColumnManager(columns);
@@ -115,7 +115,7 @@ export default function CuesheetTable(props: CuesheetTableProps) {
/>
-
+
{rowModel.rows.map((row, index) => {
const key = row.original.id;
@@ -168,7 +168,6 @@ export default function CuesheetTable(props: CuesheetTableProps) {
selectedRef={isSelected ? selectedRef : undefined}
skip={entry.skip}
colour={entry.colour}
- showIndexColumn={!hideIndexColumn}
>
{row.getVisibleCells().map((cell) => {
return (
diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/CuesheetHeader.tsx b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/CuesheetHeader.tsx
index 9fbea6d9b..25a497c2b 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/CuesheetHeader.tsx
+++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/CuesheetHeader.tsx
@@ -3,6 +3,7 @@ import { flexRender, HeaderGroup } from '@tanstack/react-table';
import { OntimeRundownEntry } from 'ontime-types';
import { getAccessibleColour } from '../../../../common/utils/styleUtils';
+import { useCuesheetOptions } from '../../cuesheet.options';
import { SortableCell } from './SortableCell';
@@ -10,11 +11,11 @@ import style from '../CuesheetTable.module.scss';
interface CuesheetHeaderProps {
headerGroups: HeaderGroup[];
- showIndexColumn: boolean;
}
export default function CuesheetHeader(props: CuesheetHeaderProps) {
- const { headerGroups, showIndexColumn } = props;
+ const { headerGroups } = props;
+ const { hideIndexColumn, showActionMenu } = useCuesheetOptions();
return (
@@ -23,8 +24,8 @@ export default function CuesheetHeader(props: CuesheetHeaderProps) {
return (
- |
- {showIndexColumn && '#'} |
+ {showActionMenu && | }
+ {!hideIndexColumn && # | }
{headerGroup.headers.map((header) => {
const width = header.getSize();
diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx
index 9feabf9b2..b2ebf2420 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx
+++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx
@@ -4,12 +4,12 @@ import { IoEllipsisHorizontal } from '@react-icons/all-files/io5/IoEllipsisHoriz
import Color from 'color';
import { cx, getAccessibleColour } from '../../../../common/utils/styleUtils';
+import { useCuesheetOptions } from '../../cuesheet.options';
import style from '../CuesheetTable.module.scss';
interface EventRowProps {
eventIndex: number;
- showIndexColumn: boolean;
isPast?: boolean;
selectedRef?: MutableRefObject;
skip?: boolean;
@@ -17,7 +17,8 @@ interface EventRowProps {
}
function EventRow(props: PropsWithChildren) {
- const { children, eventIndex, isPast, selectedRef, skip, colour, showIndexColumn } = props;
+ const { children, eventIndex, isPast, selectedRef, skip, colour } = props;
+ const { hideIndexColumn, showActionMenu } = useCuesheetOptions();
const ownRef = useRef(null);
const [isVisible, setIsVisible] = useState(false);
@@ -57,18 +58,22 @@ function EventRow(props: PropsWithChildren) {
style={{ opacity: `${isPast ? '0.2' : '1'}` }}
ref={selectedRef ?? ownRef}
>
-
- }
- variant='ontime-subtle'
- />
- |
-
- {showIndexColumn && eventIndex}
- |
+ {showActionMenu && (
+
+ }
+ variant='ontime-subtle'
+ />
+ |
+ )}
+ {!hideIndexColumn && (
+
+ {eventIndex}
+ |
+ )}
{isVisible ? children : null}
);
diff --git a/apps/client/src/views/cuesheet/cuesheet.options.ts b/apps/client/src/views/cuesheet/cuesheet.options.ts
index 82568c5d4..a128f16cd 100644
--- a/apps/client/src/views/cuesheet/cuesheet.options.ts
+++ b/apps/client/src/views/cuesheet/cuesheet.options.ts
@@ -10,6 +10,13 @@ import { isStringBoolean } from '../../features/viewers/common/viewUtils';
*/
export const cuesheetOptions: ViewOption[] = [
{ section: 'Table options' },
+ {
+ id: 'showActionMenu',
+ title: 'Show action menu',
+ description: 'Whether to show the action menu for every row in the table',
+ type: 'boolean',
+ defaultValue: false,
+ },
{
id: 'hideTableSeconds',
title: 'Hide seconds in table',
@@ -56,6 +63,7 @@ export const cuesheetOptions: ViewOption[] = [
];
type CuesheetOptions = {
+ showActionMenu: boolean;
hideTableSeconds: boolean;
followSelected: boolean;
hidePast: boolean;
@@ -71,6 +79,7 @@ type CuesheetOptions = {
export function getOptionsFromParams(searchParams: URLSearchParams): CuesheetOptions {
// we manually make an object that matches the key above
return {
+ showActionMenu: isStringBoolean(searchParams.get('showActionMenu')),
hideTableSeconds: isStringBoolean(searchParams.get('hideTableSeconds')),
followSelected: isStringBoolean(searchParams.get('followSelected')),
hidePast: isStringBoolean(searchParams.get('hidePast')),