cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-09 17:33:55 +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/theme/ontimeTextInputs.ts
+2 -2
View File
@@ -43,7 +43,7 @@ export const ontimeInputTransparent = {
...commonStyles,
backgroundColor: 'transparent',
_hover: {
backgroundColor: 'rgba(255, 255, 255, 0.10)', // $white-10
backgroundColor: '#2d2d2d', // $gray-1100
},
},
};
@@ -56,6 +56,6 @@ export const ontimeTextAreaTransparent = {
...commonStyles,
backgroundColor: 'transparent',
_hover: {
backgroundColor: 'rgba(255, 255, 255, 0.10)', // $white-10
backgroundColor: '#2d2d2d', // $gray-1100
},
};
apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.module.scss
+1 -1
View File
@@ -48,7 +48,7 @@ $table-header-font-size: calc(1rem - 2px);
}
.actionColumn {
width: calc(1.5rem + 0.5rem); // sm button size (--chakra-sizes-6) + 2 * padding
width: calc(2rem + 0.5rem); // sm button size (--chakra-sizes-8) + 2 * padding
}
}
apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx
+2 -2
View File
@@ -150,10 +150,10 @@ export default function CuesheetTable(props: CuesheetTableProps) {
<td>
<MenuButton
as={IconButton}
size='xs'
size='sm'
aria-label='Options'
icon={<IoEllipsisHorizontal />}
variant='ontime-ghosted'
variant='ontime-subtle'
/>
</td>
{row.getVisibleCells().map((cell) => {
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,
];