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: tweak table element styles

Browse Source
This commit is contained in:
Carlos Valente
2024-12-20 09:27:49 +01:00
committed by Carlos Valente
parent fb38d82855
commit ab6765b332
6 changed files with 29 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/MultiLineCell.tsx
+10 -6
View File
@@ -8,7 +8,9 @@ interface MultiLineCellProps {
handleUpdate: (newValue: string) => void;
}
const MultiLineCell = (props: MultiLineCellProps) => {
export default memo(MultiLineCell);
function MultiLineCell(props: MultiLineCellProps) {
const { initialValue, handleUpdate } = props;
const ref = useRef<HTMLInputElement | null>(null);
const submitCallback = useCallback((newValue: string) => handleUpdate(newValue), [handleUpdate]);
@@ -22,8 +24,12 @@ const MultiLineCell = (props: MultiLineCellProps) => {
inputref={ref}
rows={1}
size='sm'
padding={0}
fontSize='1rem'
style={{
minHeight: '2rem',
padding: '0',
paddingTop: '0.25rem',
fontSize: '1rem',
}}
transition='none'
variant='ontime-transparent'
value={value}
@@ -33,6 +39,4 @@ const MultiLineCell = (props: MultiLineCellProps) => {
spellCheck={false}
/>
);
};
export default memo(MultiLineCell);
}
apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/SingleLineCell.tsx
+7 -5
View File
@@ -8,7 +8,9 @@ interface SingleLineCellProps {
handleUpdate: (newValue: string) => void;
}
const SingleLineCell = (props: SingleLineCellProps) => {
export default memo(SingleLineCell);
function SingleLineCell(props: SingleLineCellProps) {
const { initialValue, handleUpdate } = props;
const ref = useRef<HTMLInputElement | null>(null);
const submitCallback = useCallback((newValue: string) => handleUpdate(newValue), [handleUpdate]);
@@ -20,8 +22,10 @@ const SingleLineCell = (props: SingleLineCellProps) => {
return (
<Input
ref={ref}
size='sx'
size='sm'
variant='ontime-transparent'
padding={0}
fontSize='md'
value={value}
onChange={onChange}
onBlur={onBlur}
@@ -30,6 +34,4 @@ const SingleLineCell = (props: SingleLineCellProps) => {
autoComplete='off'
/>
);
};
export default memo(SingleLineCell);
}
apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/cuesheetCols.tsx
+7
View File
@@ -102,6 +102,7 @@ export function makeCuesheetColumns(customFields: CustomFields): ColumnDef<Ontim
meta: { colour: customFields[key].colour },
cell: MakeCustomField,
size: 250,
minSize: 75,
}));
return [
@@ -111,6 +112,7 @@ export function makeCuesheetColumns(customFields: CustomFields): ColumnDef<Ontim
header: 'Cue',
cell: MakeSingleLineField,
size: 75,
minSize: 40,
},
{
accessorKey: 'timeStart',
@@ -118,6 +120,7 @@ export function makeCuesheetColumns(customFields: CustomFields): ColumnDef<Ontim
header: 'Start',
cell: MakeTimer,
size: 75,
minSize: 75,
},
{
accessorKey: 'timeEnd',
@@ -125,6 +128,7 @@ export function makeCuesheetColumns(customFields: CustomFields): ColumnDef<Ontim
header: 'End',
cell: MakeTimer,
size: 75,
minSize: 75,
},
{
accessorKey: 'duration',
@@ -132,6 +136,7 @@ export function makeCuesheetColumns(customFields: CustomFields): ColumnDef<Ontim
header: 'Duration',
cell: MakeDuration,
size: 75,
minSize: 75,
},
{
accessorKey: 'title',
@@ -139,6 +144,7 @@ export function makeCuesheetColumns(customFields: CustomFields): ColumnDef<Ontim
header: 'Title',
cell: MakeSingleLineField,
size: 250,
minSize: 75,
},
{
accessorKey: 'note',
@@ -146,6 +152,7 @@ export function makeCuesheetColumns(customFields: CustomFields): ColumnDef<Ontim
header: 'Note',
cell: MakeMultiLineField,
size: 250,
minSize: 75,
},
...dynamicCustomFields,
];