chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add first widget button with popup menu

Browse Source
This commit is contained in:
Daniel S. Hansen
2025-08-11 11:31:15 -07:00
parent f2fe8b5fb2
commit 28a59ab366
2 changed files with 65 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Canvas/CanvasComponents/FirstWidgetButton.jsx
+62 -22
View File
@@ -1,28 +1,68 @@
import { Box, Heading } from '@chakra-ui/react'
import { Box, Heading, Center, Menu, Portal, Flex } from '@chakra-ui/react'
// import AddWidgetMenu from './AddWidgetMenu';
export default function FirstWidgetButton() {
return (
<Box
p={6}
m={4}
borderRadius="md"
boxShadow="md"
border="2px dashed"
borderColor="gray.300"
bg="gray.50"
textAlign="center"
cursor="pointer"
_hover = {{
bg: "gray.100",
borderColor: "gray.400",
boxShadow: "lg",
}}
transition="all 0.2s ease-in-out"
>
<Heading fontWeight="bold" fontSize="xl" color="gray.700">
Add First Widget
</Heading>
</Box>
<Menu.Root positioning={{ placement: "right-start" }} >
<Menu.Trigger asChild>
<Box
p={6}
m="auto"
mt={6}
align="center"
textAlign="center"
justify="center"
width="400px"
borderRadius="md"
boxShadow="md"
border="2px dashed"
borderColor="gray.300"
bg="gray.50"
cursor="pointer"
_hover = {{
bg: "gray.100",
borderColor: "gray.400",
boxShadow: "lg",
}}
>
Add First Widget
</Box>
</Menu.Trigger>
<Portal>
<Menu.Positioner>
<Menu.Content>
<Menu.Item value="alert level">Alert Level</Menu.Item>
<Menu.Item value="co2">CO2</Menu.Item>
<Menu.Item value="ivans">IVANS</Menu.Item>
<Menu.Item value="plume heights">Plume Heights</Menu.Item>
<Menu.Item value="alert level changes">Alert Level Changes</Menu.Item>
</Menu.Content>
</Menu.Positioner>
</Portal>
</Menu.Root>
// <Box
// p={6}
// m={4}
// borderRadius="md"
// boxShadow="md"
// border="2px dashed"
// borderColor="gray.300"
// bg="gray.50"
// textAlign="center"
// cursor="pointer"
// _hover = {{
// bg: "gray.100",
// borderColor: "gray.400",
// boxShadow: "lg",
// }}
// transition="all 0.2s ease-in-out"
// >
// {/* <AddWidgetMenu /> */}
// <Heading fontWeight="bold" fontSize="xl" color="gray.700">
// Add First Widget
// </Heading>
// </Box>
);
}
client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx
+3 -5
View File
@@ -25,13 +25,13 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
});
};
// Show large 'Add Widget' button when dashboard is empty
if ( !widgetArray.length ) {
return (
<Flex
key="first-widget"
align="center"
justify="center"
height="300px"
h="100%"
w="100%"
bg="gray.150"
borderRadius="md"
@@ -41,6 +41,7 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
);
}
// Show responsive grid of widgets
return (
<chakra.div width="100%">
<ResponsiveGridLayout
@@ -58,7 +59,6 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
position="relative"
resizeHandle={<CustomResizeHandle isVisable={isEditable} />}
>
{ merged.map((item) => {
const Widget = item.widget;
return (
@@ -68,8 +68,6 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
);
})
}
</ResponsiveGridLayout>
</chakra.div>
);