mirrors/oneuptime
1
0
Fork 0
mirror of https://github.com/OneUptime/oneuptime synced 2024-11-21 06:40:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add minimum width and height properties to dashboard components for better layout control

Browse Source
This commit is contained in:
Simon Larsen 2024-11-14 12:47:48 +00:00
parent eded26d92c
commit b826a78700
No known key found for this signature in database
GPG Key ID: 96C5DCA24769DBCA
6 changed files with 50 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Common/Types/Dashboard/DashboardComponents/DashboardBaseComponent.ts
View File

@ -8,4 +8,6 @@ export default interface DashboardBaseComponent {
leftInDashboardUnits: number;
widthInDashboardUnits: number;
heightInDashboardUnits: number;
minWidthInDashboardUnits: number;
minHeightInDashboardUnits: number;
}

2
Common/Utils/Dashboard/Components/DashboardChartComponent.ts
View File

@ -14,6 +14,8 @@ export default class DashboardChartComponentUtil extends DashboardBaseComponentU
leftInDashboardUnits: 0,
componentId: ObjectID.generate(),
chartType: DashboardChartType.Line,
minHeightInDashboardUnits: 3,
minWidthInDashboardUnits: 6
};
}
}

2
Common/Utils/Dashboard/Components/DashboardTextComponent.ts
View File

@ -16,6 +16,8 @@ export default class DashboardTextComponentUtil extends DashboardBaseComponentUt
isBold: false,
isItalic: false,
isUnderline: false,
minHeightInDashboardUnits: 1,
minWidthInDashboardUnits: 3
};
}
}

2
Common/Utils/Dashboard/Components/DashboardValueComponent.ts
View File

@ -12,6 +12,8 @@ export default class DashboardValueComponentUtil extends DashboardBaseComponentU
topInDashboardUnits: 0,
leftInDashboardUnits: 0,
componentId: ObjectID.generate(),
minHeightInDashboardUnits: 1,
minWidthInDashboardUnits: 1
};
}
}

54
Dashboard/src/Components/Dashboard/Components/DashboardBaseComponent.tsx
View File

@ -193,12 +193,18 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
}
// get this in dashboard units.,
const widthInDashboardUnits: number =
let widthInDashboardUnits: number =
GetDashboardComponentWidthInDashboardUnits(
props.totalCurrentDashboardWidthInPx,
newDashboardComponentwidthInPx,
);
// if this width is less than the min width then set it to min width
if (widthInDashboardUnits < component.minWidthInDashboardUnits) {
widthInDashboardUnits = component.minWidthInDashboardUnits;
}
// update the component
const newComponentProps: DashboardBaseComponent = {
...component,
@ -228,12 +234,18 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
}
// get this in dashboard units
const heightInDashboardUnits: number =
let heightInDashboardUnits: number =
GetDashboardComponentHeightInDashboardUnits(
props.totalCurrentDashboardWidthInPx,
newDashboardComponentHeightInPx,
);
// if this height is less tan the min height then set it to min height
if (heightInDashboardUnits < component.minHeightInDashboardUnits) {
heightInDashboardUnits = component.minHeightInDashboardUnits;
}
// update the component
const newComponentProps: DashboardBaseComponent = {
...component,
@ -255,6 +267,14 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
return <></>;
}
let resizeCursorIcon: string = "cursor-ew-resize";
// if already at min width then change icon to e-resize
if (component.widthInDashboardUnits <= component.minWidthInDashboardUnits) {
resizeCursorIcon = "cursor-e-resize";
}
return (
<div
style={{
@ -266,7 +286,7 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
window.addEventListener("mousemove", resizeWidth);
window.addEventListener("mouseup", stopResizeAndMove);
}}
className="resize-width-element cursor-ew-resize absolute right-0 w-2 h-12 bg-blue-300 hover:bg-blue-400 rounded-full cursor-pointer"
className={`resize-width-element ${resizeCursorIcon} absolute right-0 w-2 h-12 bg-blue-300 hover:bg-blue-400 rounded-full cursor-pointer`}
></div>
);
};
@ -295,8 +315,8 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
stopResizeAndMove();
}}
className="move-element cursor-move absolute w-4 h-4 bg-blue-300 hover:bg-blue-400 rounded-full cursor-pointer"
onDragStart={(_event: React.DragEvent<HTMLDivElement>) => {}}
onDragEnd={(_event: React.DragEvent<HTMLDivElement>) => {}}
onDragStart={(_event: React.DragEvent<HTMLDivElement>) => { }}
onDragEnd={(_event: React.DragEvent<HTMLDivElement>) => { }}
></div>
);
};
@ -306,6 +326,14 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
return <></>;
}
let resizeCursorIcon: string = "cursor-ns-resize";
// if already at min height then change icon to s-resize
if (component.heightInDashboardUnits <= component.minHeightInDashboardUnits) {
resizeCursorIcon = "cursor-s-resize";
}
return (
<div
style={{
@ -317,7 +345,7 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
window.addEventListener("mousemove", resizeHeight);
window.addEventListener("mouseup", stopResizeAndMove);
}}
className="resize-height-element cursor-ns-resize absolute bottom-0 left-0 w-12 h-2 bg-blue-300 hover:bg-blue-400 rounded-full cursor-pointer"
className={`resize-height-element ${resizeCursorIcon} absolute bottom-0 left-0 w-12 h-2 bg-blue-300 hover:bg-blue-400 rounded-full cursor-pointer`}
></div>
);
};
@ -357,16 +385,14 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
}}
style={{
margin: `${MarginForEachUnitInPx}px`,
height: `${
GetDashboardUnitHeightInPx(props.totalCurrentDashboardWidthInPx) *
heightOfComponent +
height: `${GetDashboardUnitHeightInPx(props.totalCurrentDashboardWidthInPx) *
heightOfComponent +
SpaceBetweenUnitsInPx * (heightOfComponent - 1)
}px`,
width: `${
GetDashboardUnitWidthInPx(props.totalCurrentDashboardWidthInPx) *
widthOfComponent +
}px`,
width: `${GetDashboardUnitWidthInPx(props.totalCurrentDashboardWidthInPx) *
widthOfComponent +
(SpaceBetweenUnitsInPx - 2) * (widthOfComponent - 1)
}px`,
}px`,
}}
ref={dashboardComponentRef}
>

4
Dashboard/src/Components/NavBar/NavBar.tsx
View File

@ -118,14 +118,14 @@ const DashboardNavbar: FunctionComponent<ComponentProps> = (
)}
></NavBarItem>
{/* <NavBarItem
<NavBarItem
title="Dashboards"
activeRoute={RouteMap[PageMap.DASHBOARDS]}
icon={IconProp.Window}
route={RouteUtil.populateRouteParams(
RouteMap[PageMap.DASHBOARDS] as Route,
)}
></NavBarItem> */}
></NavBarItem>
<NavBarItem
title="More"