cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-18 21:54:09 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

refactor: review action menu

Browse Source
This commit is contained in:
Carlos Valente
2025-07-08 06:45:22 +02:00
committed by Carlos Valente
parent 9281c0b51d
commit a1ad1d47a4
9 changed files with 227 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/BlockRow.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import { IoEllipsisHorizontal } from 'react-icons/io5';
import { useSessionStorage } from '@mantine/hooks';
import { flexRender, Table } from '@tanstack/react-table';
import { EntryId, OntimeEntry } from 'ontime-types';
import { EntryId, OntimeEntry, SupportedEntry } from 'ontime-types';
import IconButton from '../../../../common/components/buttons/IconButton';
import { useCurrentBlockId } from '../../../../common/hooks/useSocket';
@@ -45,7 +45,7 @@ export default function BlockRow({ blockId, colour, hidePast, rowId, rowIndex, t
onClick={(e) => {
const rect = e.currentTarget.getBoundingClientRect();
const yPos = 8 + rect.y + rect.height / 2;
openMenu({ x: rect.x, y: yPos }, blockId, rowIndex, null);
openMenu({ x: rect.x, y: yPos }, blockId, SupportedEntry.Block, rowIndex, null);
}}
>
<IoEllipsisHorizontal />
apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/CuesheetBody.tsx
+3
View File
@@ -126,10 +126,13 @@ export default function CuesheetBody({ rowModel, selectedRef, table }: CuesheetB
return (
<MilestoneRow
key={key}
entryId={entry.id}
isPast={isPast}
parentBgColour={parentBgColour}
parentId={entry.parent}
rowBgColour={rowBgColour}
rowId={row.id}
rowIndex={index}
table={table}
/>
);
apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx
+2 -2
View File
@@ -2,7 +2,7 @@ import { MutableRefObject, useEffect, useRef } from 'react';
import { IoEllipsisHorizontal } from 'react-icons/io5';
import { useSessionStorage } from '@mantine/hooks';
import { flexRender, Table } from '@tanstack/react-table';
import { OntimeEntry, OntimeEvent, RGBColour } from 'ontime-types';
import { OntimeEntry, OntimeEvent, RGBColour, SupportedEntry } from 'ontime-types';
import { colourToHex, cssOrHexToColour } from 'ontime-utils';
import IconButton from '../../../../common/components/buttons/IconButton';
@@ -100,7 +100,7 @@ export default function EventRow({
onClick={(e) => {
const rect = e.currentTarget.getBoundingClientRect();
const yPos = 8 + rect.y + rect.height / 2;
openMenu({ x: rect.x, y: yPos }, event.id, rowIndex, event.parent);
openMenu({ x: rect.x, y: yPos }, event.id, SupportedEntry.Event, rowIndex, event.parent);
}}
>
<IoEllipsisHorizontal />
apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/MilestoneRow.tsx
+26 -3
View File
@@ -1,29 +1,43 @@
import { IoEllipsisHorizontal } from 'react-icons/io5';
import { useSessionStorage } from '@mantine/hooks';
import { flexRender, Table } from '@tanstack/react-table';
import { OntimeEntry } from 'ontime-types';
import { EntryId, OntimeEntry, SupportedEntry } from 'ontime-types';
import IconButton from '../../../../common/components/buttons/IconButton';
import { cx, enDash } from '../../../../common/utils/styleUtils';
import { AppMode, sessionKeys } from '../../../../ontimeConfig';
import { usePersistedCuesheetOptions } from '../../cuesheet.options';
import { useCuesheetTableMenu } from '../cuesheet-table-menu/useCuesheetTableMenu';
import style from './MilestoneRow.module.scss';
interface MilestoneRowProps {
entryId: EntryId;
isPast: boolean;
parentBgColour: string | null;
parentId: EntryId | null;
rowBgColour?: string;
rowId: string;
rowIndex: number;
table: Table<OntimeEntry>;
}
export default function MilestoneRow({ isPast, parentBgColour, rowBgColour, rowId, table }: MilestoneRowProps) {
export default function MilestoneRow({
entryId,
isPast,
parentBgColour,
parentId,
rowBgColour,
rowId,
rowIndex,
table,
}: MilestoneRowProps) {
const hideIndexColumn = usePersistedCuesheetOptions((state) => state.hideIndexColumn);
const [cuesheetMode] = useSessionStorage<AppMode>({
key: sessionKeys.cuesheetMode,
defaultValue: AppMode.Edit,
});
const openMenu = useCuesheetTableMenu((store) => store.openMenu);
return (
<tr
@@ -36,7 +50,16 @@ export default function MilestoneRow({ isPast, parentBgColour, rowBgColour, rowI
>
{cuesheetMode === AppMode.Edit && (
<td className={style.actionColumn} tabIndex={-1} role='cell'>
<IconButton aria-label='Options' variant='subtle-white' size='small' onClick={() => undefined}>
<IconButton
aria-label='Options'
variant='subtle-white'
size='small'
onClick={(e) => {
const rect = e.currentTarget.getBoundingClientRect();
const yPos = 8 + rect.y + rect.height / 2;
openMenu({ x: rect.x, y: yPos }, entryId, SupportedEntry.Milestone, rowIndex, parentId);
}}
>
<IoEllipsisHorizontal />
</IconButton>
</td>