cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-07-26 10:38:55 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

fix: merge virtuoso and rundown styles

Browse Source
This commit is contained in:
Carlos Valente
2025-09-04 17:32:02 +02:00
committed by Alex Christoffer Rasmussen
parent 3ae73be562
commit d00d7677bc
5 changed files with 36 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx
+7 -2
View File
@@ -167,7 +167,7 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
/>
);
},
TableRow: ({ item: _item, ...virtuosoProps }) => {
TableRow: ({ item: _item, style: injectedStyles, ...virtuosoProps }) => {
// eslint-disable-next-line react/destructuring-assignment
const rowIndex = virtuosoProps['data-index'];
const row = rows[rowIndex];
@@ -183,13 +183,16 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
rowId={row.id}
rowIndex={row.index}
table={table}
injectedStyles={injectedStyles}
{...virtuosoProps}
/>
);
}
if (isOntimeDelay(entry)) {
return <DelayRow key={key} duration={entry.duration} {...virtuosoProps} />;
return (
<DelayRow key={key} duration={entry.duration} injectedStyles={injectedStyles} {...virtuosoProps} />
);
}
if (isOntimeMilestone(entry)) {
@@ -204,6 +207,7 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
rowId={row.id}
rowIndex={rowIndex}
table={table}
injectedStyles={injectedStyles}
{...virtuosoProps}
/>
);
@@ -225,6 +229,7 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
rowId={row.id}
rowIndex={rowIndex}
table={table}
injectedStyles={injectedStyles}
{...virtuosoProps}
/>
);
apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/DelayRow.tsx
+4 -3
View File
@@ -1,4 +1,4 @@
import { memo } from 'react';
import { CSSProperties, memo } from 'react';
import { millisToDelayString } from '../../../../common/utils/dateConfig';
import { usePersistedCuesheetOptions } from '../../cuesheet.options';
@@ -7,9 +7,10 @@ import style from './DelayRow.module.scss';
interface DelayRowProps {
duration: number;
injectedStyles?: CSSProperties;
}
function DelayRow({ duration, ...virtuosoProps }: DelayRowProps) {
function DelayRow({ duration, injectedStyles, ...virtuosoProps }: DelayRowProps) {
const hideDelays = usePersistedCuesheetOptions((state) => state.hideDelays);
if (hideDelays || duration === 0) {
@@ -19,7 +20,7 @@ function DelayRow({ duration, ...virtuosoProps }: DelayRowProps) {
const delayTime = millisToDelayString(duration, 'expanded');
return (
<tr className={style.delayRow} data-testid='cuesheet-delay' {...virtuosoProps}>
<tr className={style.delayRow} data-testid='cuesheet-delay' style={injectedStyles} {...virtuosoProps}>
<td tabIndex={0}>{delayTime}</td>
</tr>
);
apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx
+4 -1
View File
@@ -1,4 +1,4 @@
import { useMemo } from 'react';
import { CSSProperties, useMemo } from 'react';
import { IoEllipsisHorizontal } from 'react-icons/io5';
import { flexRender, Table } from '@tanstack/react-table';
import { EntryId, OntimeEntry, RGBColour, SupportedEntry } from 'ontime-types';
@@ -26,6 +26,7 @@ interface EventRowProps {
parent: EntryId | null;
rowIndex: number;
table: Table<ExtendedEntry<OntimeEntry>>;
injectedStyles?: CSSProperties;
}
export default function EventRow({
@@ -42,6 +43,7 @@ export default function EventRow({
parent,
rowIndex,
table,
injectedStyles,
...virtuosoProps
}: EventRowProps) {
const { cuesheetMode, hideIndexColumn } = table.options.meta?.options ?? {
@@ -81,6 +83,7 @@ export default function EventRow({
parent && style.hasParent,
])}
style={{
...injectedStyles,
opacity: `${isPast ? '0.2' : '1'}`,
'--user-bg': groupColour ?? 'transparent',
}}
apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/GroupRow.tsx
+17 -2
View File
@@ -1,3 +1,4 @@
import { CSSProperties } from 'react';
import { IoEllipsisHorizontal } from 'react-icons/io5';
import { flexRender, Table } from '@tanstack/react-table';
import { EntryId, SupportedEntry } from 'ontime-types';
@@ -15,9 +16,18 @@ interface GroupRowProps {
rowId: string;
rowIndex: number;
table: Table<ExtendedEntry>;
injectedStyles?: CSSProperties;
}
export default function GroupRow({ groupId, colour, rowId, rowIndex, table, ...virtuosoProps }: GroupRowProps) {
export default function GroupRow({
groupId,
colour,
rowId,
rowIndex,
table,
injectedStyles,
...virtuosoProps
}: GroupRowProps) {
const { cuesheetMode, hideIndexColumn } = table.options.meta?.options ?? {
cuesheetMode: AppMode.Edit,
hideIndexColumn: false,
@@ -26,7 +36,12 @@ export default function GroupRow({ groupId, colour, rowId, rowIndex, table, ...v
const openMenu = useCuesheetTableMenu((store) => store.openMenu);
return (
<tr className={style.groupRow} style={{ '--user-bg': colour }} data-testid='cuesheet-group' {...virtuosoProps}>
<tr
className={style.groupRow}
style={{ ...injectedStyles, '--user-bg': colour }}
data-testid='cuesheet-group'
{...virtuosoProps}
>
{cuesheetMode === AppMode.Edit && (
<td className={style.actionColumn} tabIndex={-1} role='cell'>
<IconButton
apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/MilestoneRow.tsx
+4
View File
@@ -1,3 +1,4 @@
import { CSSProperties } from 'react';
import { IoEllipsisHorizontal } from 'react-icons/io5';
import { flexRender, Table } from '@tanstack/react-table';
import { EntryId, SupportedEntry } from 'ontime-types';
@@ -20,6 +21,7 @@ interface MilestoneRowProps {
rowId: string;
rowIndex: number;
table: Table<ExtendedEntry>;
injectedStyles?: CSSProperties;
}
export default function MilestoneRow({
@@ -31,6 +33,7 @@ export default function MilestoneRow({
rowId,
rowIndex,
table,
injectedStyles,
...virtuosoProps
}: MilestoneRowProps) {
const { cuesheetMode, hideIndexColumn } = table.options.meta?.options ?? {
@@ -56,6 +59,7 @@ export default function MilestoneRow({
<tr
className={cx([style.milestoneRow, Boolean(parentBgColour) && style.hasParent])}
style={{
...injectedStyles,
opacity: `${isPast ? '0.2' : '1'}`,
'--user-bg': parentBgColour ?? 'transparent',
}}