watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-04 04:37:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Add panel size constraints and size properties to board types.

Browse source 
- Add MIN_ROW_HEIGHT, MAX_ROW_HEIGHT, MIN_COLUMN_WIDTH, BUTTON_ROW_HEIGHT constants
- Apply minSize/maxSize constraints to row and column panels
- Add size property to BoardColumn and BoardRow types for future persistence
- Add optional chaining for safer property access

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Mike Cao 2026-01-19 00:28:42 -08:00
parent 30c3ba77cc
commit 30e48e3aaa
2 changed files with 14 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/app/(main)/boards/[boardId]/BoardBody.tsx
View file

@ -14,7 +14,10 @@ const CATALOG = {
}, },
}; };
const MIN_HEIGHT = 300; const MIN_ROW_HEIGHT = 300;
const MAX_ROW_HEIGHT = 600;
const MIN_COLUMN_WIDTH = 300;
const BUTTON_ROW_HEIGHT = 60;
const MAX_COLUMNS = 4; const MAX_COLUMNS = 4;
export function BoardBody() { export function BoardBody() {
@ -76,27 +79,27 @@ export function BoardBody() {
}; };
const rows = board?.parameters?.rows ?? []; const rows = board?.parameters?.rows ?? [];
const minHeight = (rows.length + 1) * MIN_HEIGHT; const minHeight = (rows?.length || 1) * MAX_ROW_HEIGHT + BUTTON_ROW_HEIGHT;
return ( return (
<Group orientation="vertical" style={{ minHeight }}> <Group orientation="vertical" style={{ minHeight }}>
{rows.map((row, index) => ( {rows.map((row, index) => (
<Fragment key={row.id}> <Fragment key={row.id}>
<Panel minSize={MIN_HEIGHT}> <Panel minSize={MIN_ROW_HEIGHT} maxSize={MAX_ROW_HEIGHT}>
<BoardRow <BoardRow
{...row} {...row}
rowId={row.id} rowId={row.id}
rowIndex={index} rowIndex={index}
rowCount={rows.length} rowCount={rows?.length}
onRemove={handleRemoveRow} onRemove={handleRemoveRow}
onMoveUp={handleMoveRowUp} onMoveUp={handleMoveRowUp}
onMoveDown={handleMoveRowDown} onMoveDown={handleMoveRowDown}
/> />
</Panel> </Panel>
{index < rows.length - 1 && <Separator />} {index < rows?.length - 1 && <Separator />}
</Fragment> </Fragment>
))} ))}
<Panel> <Panel minSize={BUTTON_ROW_HEIGHT}>
<Row padding="3"> <Row padding="3">
<TooltipTrigger delay={0}> <TooltipTrigger delay={0}>
<Button variant="outline" onPress={handleAddRow}> <Button variant="outline" onPress={handleAddRow}>
@ -160,10 +163,10 @@ function BoardRow({
<Group style={{ height: '100%' }}> <Group style={{ height: '100%' }}>
{columns?.map((column, index) => ( {columns?.map((column, index) => (
<Fragment key={column.id}> <Fragment key={column.id}>
<Panel minSize={MIN_HEIGHT}> <Panel minSize={MIN_COLUMN_WIDTH}>
<BoardColumn {...column} onRemove={handleRemoveColumn} /> <BoardColumn {...column} onRemove={handleRemoveColumn} />
</Panel> </Panel>
{index < columns.length - 1 && <Separator />} {index < columns?.length - 1 && <Separator />}
</Fragment> </Fragment>
))} ))}
<Column alignSelf="center" padding="3" gap="1"> <Column alignSelf="center" padding="3" gap="1">
@ -179,7 +182,7 @@ function BoardRow({
<Button <Button
variant="outline" variant="outline"
onPress={handleAddColumn} onPress={handleAddColumn}
isDisabled={columns.length >= MAX_COLUMNS} isDisabled={columns?.length >= MAX_COLUMNS}
> >
<Icon> <Icon>
<Plus /> <Plus />

2
src/lib/types.ts
View file

@ -153,11 +153,13 @@ export interface BoardComponent {
export interface BoardColumn { export interface BoardColumn {
id: string; id: string;
component?: ReactElement; component?: ReactElement;
size?: number;
} }
export interface BoardRow { export interface BoardRow {
id: string; id: string;
columns: BoardColumn[]; columns: BoardColumn[];
size?: number;
} }
export interface BoardParameters { export interface BoardParameters {