style

InseeFrLab · Oct 21, 2024 · 7f6f9cc · 7f6f9cc
1 parent e179807
commit 7f6f9cc
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 108 deletions.
diff --git a/web/src/ui/pages/dataExplorer/DataExplorer.tsx b/web/src/ui/pages/dataExplorer/DataExplorer.tsx
@@ -88,16 +88,7 @@ export default function DataExplorer(props: Props) {
         "main"
     );
 
-    const { classes, cx } = useStyles({
-        "rowsToFrom":
-            rows === undefined || rowCount !== undefined
-                ? undefined
-                : {
-                      "from": (route.params.page - 1) * route.params.rowsPerPage + 1,
-                      "to":
-                          (route.params.page - 1) * route.params.rowsPerPage + rows.length
-                  }
-    });
+    const { classes, cx } = useStyles();
 
     // Theres a bug in MUI classes.panel does not apply so have to apply the class manually
     const { childrenClassName: dataGridPanelWrapperRefClassName } =
@@ -175,8 +166,7 @@ export default function DataExplorer(props: Props) {
                                         classes.dataGridPanelWrapper
                                     ),
                                     "panelFooter": classes.dataGridPanelFooter,
-                                    "menu": classes.dataGridMenu,
-                                    "footerContainer": classes.dataGridFooterContainer
+                                    "menu": classes.dataGridMenu
                                 }}
                                 slots={{ "toolbar": SlotsDataGridToolbar }}
                                 disableVirtualization={!isVirtualizationEnabled}
@@ -237,101 +227,71 @@ export default function DataExplorer(props: Props) {
         </div>
     );
 }
-const useStyles = tss
-    .withName({ DataExplorer })
-    .withParams<{
-        rowsToFrom:
-            | {
-                  from: number;
-                  to: number;
-              }
-            | undefined;
-    }>()
-    .create(({ theme, rowsToFrom }) => ({
-        "root": {
-            "height": "100%",
-            "display": "flex",
-            "flexDirection": "column"
-        },
-        "pageHeaderHelpMiddle": {
-            "& > h5": {
-                "marginBottom": theme.spacing(2)
-            }
-        },
-        "initializing": {
-            "display": "flex",
-            "justifyContent": "center",
-            "alignItems": "center",
-            "height": "100%"
-        },
-        "urlInput": {
-            "marginBottom": theme.spacing(4)
-        },
-        "errorAlert": {
-            "marginTop": theme.spacing(4),
-            "maxWidth": 950
-        },
-        "mainArea": {
-            "flex": 1,
-            "overflow": "hidden"
-        },
-        "dataGridWrapper": {
-            "width": "100%",
-            "height": "100%",
-            "overflowY": "hidden",
-            "overflowX": "auto"
-        },
-        "dataGridPanel": {
-            "overflow": "hidden",
-            "borderRadius": 8,
-            "boxShadow": theme.shadows[1],
+const useStyles = tss.withName({ DataExplorer }).create(({ theme }) => ({
+    "root": {
+        "height": "100%",
+        "display": "flex",
+        "flexDirection": "column"
+    },
+    "pageHeaderHelpMiddle": {
+        "& > h5": {
+            "marginBottom": theme.spacing(2)
+        }
+    },
+    "initializing": {
+        "display": "flex",
+        "justifyContent": "center",
+        "alignItems": "center",
+        "height": "100%"
+    },
+    "urlInput": {
+        "marginBottom": theme.spacing(4)
+    },
+    "errorAlert": {
+        "marginTop": theme.spacing(4),
+        "maxWidth": 950
+    },
+    "mainArea": {
+        "flex": 1,
+        "overflow": "hidden"
+    },
+    "dataGridWrapper": {
+        "width": "100%",
+        "height": "100%",
+        "overflowY": "hidden",
+        "overflowX": "auto"
+    },
+    "dataGridPanel": {
+        "overflow": "hidden",
+        "borderRadius": 8,
+        "boxShadow": theme.shadows[1],
+        "&:hover": {
+            "boxShadow": theme.shadows[6]
+        }
+    },
+    "dataGridPanelWrapper": {
+        "backgroundColor": theme.colors.useCases.surfaces.surface1,
+        "padding": theme.spacing(2)
+    },
+    "dataGridPanelFooter": {
+        "& .MuiButton-root": {
+            "textTransform": "unset"
+        }
+    },
+    "dataGridMenu": {
+        "& .MuiMenuItem-root": {
+            "&.Mui-selected": {
+                "backgroundColor": theme.colors.useCases.surfaces.surface2
+            },
+            "& svg": {
+                "color": theme.colors.useCases.typography.textPrimary
+            },
             "&:hover": {
-                "boxShadow": theme.shadows[6]
-            }
-        },
-        "dataGridPanelWrapper": {
-            "backgroundColor": theme.colors.useCases.surfaces.surface1,
-            "padding": theme.spacing(2)
-        },
-        "dataGridPanelFooter": {
-            "& .MuiButton-root": {
-                "textTransform": "unset"
+                "backgroundColor": theme.colors.palette.focus.light
             }
-        },
-        "dataGridMenu": {
-            "& .MuiMenuItem-root": {
-                "&.Mui-selected": {
-                    "backgroundColor": theme.colors.useCases.surfaces.surface2
-                },
-                "& svg": {
-                    "color": theme.colors.useCases.typography.textPrimary
-                },
-                "&:hover": {
-                    "backgroundColor": theme.colors.palette.focus.light
-                }
-            }
-        },
-        "dataGridFooterContainer": {
-            "& .MuiTablePagination-displayedRows":
-                rowsToFrom === undefined
-                    ? {}
-                    : {
-                          "&": {
-                              "fontSize": 0,
-                              "width": 50,
-                              "position": "relative"
-                          },
-                          "&::after": {
-                              "content": `"${rowsToFrom.from}-${rowsToFrom.to}"`,
-                              "fontSize": theme.typography.rootFontSizePx * 0.85,
-                              "color": theme.colors.useCases.typography.textPrimary,
-                              "position": "absolute",
-                              "right": 0,
-                              "top": 0
-                          }
-                      }
         }
-    }));
+    }
+}));
 
 const { i18n } = declareComponentKeys<
     | "page header title"

diff --git a/web/src/ui/pages/myFiles/Explorer/ExplorerItems/ExplorerItem.tsx b/web/src/ui/pages/myFiles/Explorer/ExplorerItems/ExplorerItem.tsx
@@ -62,6 +62,7 @@ export const ExplorerItem = memo((props: ExplorerItemProps) => {
 
         if (e.key === "Enter" || e.key === " ") {
             onClick();
+            e.preventDefault();
             return;
         }
     };
@@ -71,7 +72,7 @@ export const ExplorerItem = memo((props: ExplorerItemProps) => {
             <div
                 className={cx(classes.root, className)}
                 tabIndex={0}
-                role="button"
+                role="option"
                 aria-selected={isSelected}
                 onDoubleClick={onDoubleClick}
                 onClick={onClick}
@@ -130,7 +131,7 @@ const useStyles = tss
         "root": {
             "borderRadius": "16px",
             "backgroundColor": isSelected
-                ? theme.colors.useCases.surfaces.surface2
+                ? theme.colors.useCases.surfaces.surface1
                 : "rgba(0, 0, 0, 0.05)",
             "cursor": "pointer",
             "display": "flex",

diff --git a/web/src/ui/pages/myFiles/Explorer/ExplorerItems/ExplorerItems.tsx b/web/src/ui/pages/myFiles/Explorer/ExplorerItems/ExplorerItems.tsx
@@ -98,7 +98,7 @@ export const ExplorerItems = memo((props: ExplorerItemsProps) => {
     }, [isNavigating]);
 
     return (
-        <div className={cx(classes.root, className)}>
+        <div className={cx(classes.root, className)} role="listbox">
             {isEmpty ? (
                 <Text typo="body 1">{t("empty directory")}</Text>
             ) : (

diff --git a/web/src/ui/pages/myFiles/Explorer/ListExplorer/ListExplorerItems.tsx b/web/src/ui/pages/myFiles/Explorer/ListExplorer/ListExplorerItems.tsx
@@ -217,7 +217,7 @@ const useStyles = tss.withName({ ListExplorerItems }).create(({ theme }) => ({
     "root": {
         "borderRadius": theme.spacing(1),
         "boxShadow": theme.shadows[1],
-        "overflow": "hidden"
+        "height": "100%"
     },
     "nameIcon": {
         "width": "30px",