Merge pull request #272 from Ferlab-Ste-Justine/fix/SKFP-664/improve-…

…grid fix(resizablegrid): SKFP-664 fix drag handle and menu behavior
Ferlab-Ste-Justine · Apr 25, 2023 · 8fad492 · 8fad492
2 parents 913df6a + 780fb44
commit 8fad492
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 6 deletions.
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ferlab/ui",
-    "version": "6.1.1",
+    "version": "6.1.2",
     "description": "Core components for scientific research data portals",
     "publishConfig": {
         "access": "public"

diff --git a/packages/ui/src/layout/ResizableGridLayout/ResizableItemSelector/index.module.scss b/packages/ui/src/layout/ResizableGridLayout/ResizableItemSelector/index.module.scss
@@ -1,4 +1,3 @@
-
 .popover {
   div[class$="-inner-content"] {
     padding: 12px;

diff --git a/packages/ui/src/layout/ResizableGridLayout/ResizableItemSelector/index.tsx b/packages/ui/src/layout/ResizableGridLayout/ResizableItemSelector/index.tsx
@@ -12,14 +12,21 @@ type TResizableItem = {
 
 type TResizableItemSelector = {
     items: TResizableItem[];
+    defaultItems: TResizableItem[];
     onReset: () => void;
     onChange: (id: string, checkbox: boolean) => void;
     dictionary?: {
         [p: string]: any;
     };
 };
 
-const ResizableItemSelector = ({ dictionary, items, onChange, onReset }: TResizableItemSelector): JSX.Element => (
+const ResizableItemSelector = ({
+    defaultItems,
+    dictionary,
+    items,
+    onChange,
+    onReset,
+}: TResizableItemSelector): JSX.Element => (
     <Popover
         align={{ offset: [-9, 0] }}
         content={
@@ -39,7 +46,13 @@ const ResizableItemSelector = ({ dictionary, items, onChange, onReset }: TResiza
                         ))}
                     </Space>
                     <div className={styles.resetWrapper}>
-                        <Button className={styles.reset} onClick={onReset} size="small" type="link">
+                        <Button
+                            className={styles.reset}
+                            disabled={JSON.stringify(items) === JSON.stringify(defaultItems)}
+                            onClick={onReset}
+                            size="small"
+                            type="link"
+                        >
                             {dictionary?.columnSelector?.reset || 'Reset'}
                         </Button>
                     </div>
@@ -50,7 +63,7 @@ const ResizableItemSelector = ({ dictionary, items, onChange, onReset }: TResiza
         placement="bottomLeft"
         trigger="click"
     >
-        <Tooltip title={dictionary?.columnSelector?.tooltips?.columns || 'Columns'}>
+        <Tooltip title={dictionary?.chartsSelector?.tooltips?.charts || 'Charts'}>
             <Button icon={<SettingOutlined />} size="small" type="text"></Button>
         </Tooltip>
     </Popover>

diff --git a/packages/ui/src/layout/ResizableGridLayout/index.module.scss b/packages/ui/src/layout/ResizableGridLayout/index.module.scss
@@ -1,3 +1,5 @@
+@import "theme.template";
+
 .wrapper {
   width: 100%;
 
@@ -12,4 +14,15 @@
     width: 100%;
     height: 100%;
   }
+}
+
+:global(.react-grid-item > .react-resizable-handle ) {
+  width: 16px;
+  height: 16px;
+
+  &::after {
+    border-color: $grid-layout-resize-color;
+    width: 8px;
+    height: 8px;
+  }
 }
diff --git a/packages/ui/src/layout/ResizableGridLayout/index.tsx b/packages/ui/src/layout/ResizableGridLayout/index.tsx
@@ -172,11 +172,17 @@ const ResizableGridLayout = ({
         label: title,
         value: hidden === undefined ? true : !hidden,
     }));
+    const defaultResizableItemsList = defaultLayouts.map(({ hidden, id, title }) => ({
+        id,
+        label: title,
+        value: hidden === undefined ? true : !hidden,
+    }));
 
     return (
         <Space className={styles.wrapper} direction="vertical">
             <div className={styles.graphSelector}>
                 <ResizableItemSelector
+                    defaultItems={defaultResizableItemsList}
                     items={resizableItemsList}
                     onChange={(targetId, checked) => {
                         onConfigUpdate(serialize(updateConfig(configs, targetId, 'hidden', !checked)));
@@ -192,6 +198,7 @@ const ResizableGridLayout = ({
                         className="layout"
                         cols={{ lg: 16, md: 12, sm: 10, xs: 6, xxs: 4 }}
                         containerPadding={[0, 0]}
+                        draggableHandle=".ant-card-head"
                         layouts={responsiveDefaultLayouts}
                         margin={[12, 12]}
                         maxRows={10}

diff --git a/packages/ui/src/view/v2/GridCard/Gridcard.module.scss b/packages/ui/src/view/v2/GridCard/Gridcard.module.scss
@@ -41,6 +41,7 @@ $padding-side-and-bottom: 24px;
       padding: 0;
 
       div[class$="-head"] {
+        cursor: move;
         div[class$="-head-title"] {
           padding: 2px 0;
         }

diff --git a/packages/ui/themes/default/_colors.scss b/packages/ui/themes/default/_colors.scss
@@ -90,4 +90,6 @@ $processing-color: $blue-6;
 $error-color: $red-8;
 $highlight-color: $magenta-6;
 $normal-color: $gray-5;
-$border-color-split: $gray-4;
+$border-color-split: $gray-4;
+
+$grid-layout-resize-color: $gray-7;