Merge branch 'canvas/doing-stuff' into 'main'

a few more changes

See merge request vkuchenik/website-framework!52

client/src/components/Canvas/CanvasComponents/AlertLevelWidget.jsx

@@ -15,9 +15,9 @@ export default function AlertLevel({id, isEditable, isDelete, DeleteWidget}) {
         height="100%"
         p={2}
       >
-        <Field.Root orientation="horizontal" align>
-            <HStack spacing={4} align="center" width="100%">
-              <Field.Label whiteSpace="nowrap" width="100%">Country Name</Field.Label>
+        <Field.Root orientation="horizontal" >
+            <HStack display="flex" spacing={4} align="center" width="100%">
+              <Field.Label display="flex" whiteSpace="nowrap">Country Name</Field.Label>
               <Input {...register("countryname")} placeholder="Enter country name"/>
             </HStack>
         </Field.Root>

client/src/components/Canvas/CanvasComponents/CustomResizeHandle.jsx

@@ -0,0 +1,27 @@
+import { RiExpandDiagonal2Line } from "react-icons/ri";
+import React from "react";
+
+const CustomResizeHandle = React.forwardRef((props, ref) => {
+  const { handleAxis, isVisable, ...restProps } = props;
+  if (!isVisable) return null;
+  return (
+    <div
+      ref={ref}
+      {...restProps}
+      className={`resize-hande-${handleAxis}`}
+      style={{
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+        cursor: "pointer",
+        width: "20px",
+        height: "20px",
+        zIndex: "1",
+      }}
+    >
+      <RiExpandDiagonal2Line />
+    </div>
+  );
+});
+
+export default CustomResizeHandle;

client/src/components/Canvas/CanvasComponents/Widget.jsx

@@ -1,4 +1,5 @@
-import { useSlotRecipe, chakra, Flex, CloseButton, Text } from "@chakra-ui/react"
+import { useSlotRecipe, chakra, Flex, CloseButton, Text, IconButton } from "@chakra-ui/react"
+import { FaEllipsisH } from "react-icons/fa";
 
 export default function Widget({ id, title, isEditable, isDelete, DeleteWidget, children }) {
   const recipe = useSlotRecipe({ key: "widget" });
@@ -16,11 +17,14 @@ export default function Widget({ id, title, isEditable, isDelete, DeleteWidget,
           </>
         ):(
           <>
-            <Text  display="flex" alignItems="center" height="32px" className="widget-handle" fontWeight="bold">{title}</Text>
+            <Flex flexDirection="row" justifyContent="space-between" alignItems="center">
+              <Text className="widget-handle" w="100%" display="flex" alignItems="center" height="32px" fontWeight="bold">{title}</Text>
+              <IconButton size="xs" bg="base300" cursor="pointer"><FaEllipsisH fill="text"/></IconButton>
+            </Flex>
           </>
         )}
       </chakra.div>
-      <chakra.div height="100%">
+      <chakra.div height="100%" mb="3">
         {children}
       </chakra.div>
     </>

client/src/components/Canvas/views/Home.jsx

@@ -12,7 +12,7 @@ import DeleteAllButton from "../CanvasComponents/DeleteAllButton";
 
 export default function Home({...props}) {
   // deconstructing props
-  const { width, height, view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView, onCancel, 
+  const { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView, onCancel, 
     isDelete, setIsDelete, isEditable, setIsEditable, widgetArray, setWidgetArray } = props;
 
   const onAddWidget = (ID) => {
@@ -22,9 +22,12 @@ export default function Home({...props}) {
         i: ID,
         x: (prev.length * 3) % 12,
         y: Infinity,
-        w: 3, 
-        h: 3,
-        static: false
+        w: 2, 
+        h: 5,
+        minW: 2,
+        minH: 5,
+        static: false,
+        resizeHandles: ['se']
       }
     ]);
     onEditWidgets();

client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx

@@ -1,5 +1,6 @@
 import GridLayout, { WidthProvider } from 'react-grid-layout';
 import { useSlotRecipe, chakra, Flex } from '@chakra-ui/react';
+import CustomResizeHandle from '../../CanvasComponents/CustomResizeHandle';
 
 export default function MyDashboard({layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray}) {
   console.log("rendering MyDashboard");
@@ -36,11 +37,14 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
         draggableHandle=".widget-handle" // Make only the header draggable
         onDragStart={handleDragStart}
         onDragStop={handleDragStop}
+        position="relative"
+        resizeHandle={<CustomResizeHandle isVisable={isEditable} />}
+        isResizable={isEditable}
       >
         {merged.map((item) => {
           const Widget = item.widget;
           return (
-            <Flex key={item.i} css={styles.root} boxShadow={isEditable ? "md":undefined} height="100%" >
+            <Flex key={item.i} css={styles.root} boxShadow="md" height="100%" >
               <Widget id={item.i} isEditable={isEditable} isDelete={isDelete} DeleteWidget={DeleteWidget}/>
             </Flex>
           )