UI / UX improvements (#1044)

* perf: hover effect on dialog buttons * chore: put title filter first * chore: remove overhead code in games filters * perf: simplify GamesFilters * chore: fine tune Games Filters css rules * perf: reduce css overhead in /backlog * perf: simplify /planning
jy95 · Nov 27, 2024 · a3462e5 · a3462e5
1 parent 82f8952
commit a3462e5
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 123 deletions.
diff --git a/src/app/[locale]/backlog/page.tsx b/src/app/[locale]/backlog/page.tsx
@@ -9,7 +9,7 @@ import { useGetBacklogQuery } from "@/redux/services/backlogAPI";
 
 // Material UI
 import { DataGrid, GridToolbar } from '@mui/x-data-grid';
-import type { GridRenderCellParams, GridColDef } from '@mui/x-data-grid';
+import type { GridColDef } from '@mui/x-data-grid';
 
 // Others
 import Tooltip from '@mui/material/Tooltip';
@@ -28,75 +28,64 @@ export default function BacklogViewer() {
 
     const columns : GridColDef[] = [
         {
-            field: "title", 
+            field: "title",
             headerName: t("columns.title"),
             headerAlign: 'center',
-            renderCell: (params : GridRenderCellParams) => (
-                <Tooltip title={params.value} aria-label={params.value}>
-                    <div>
-                        {params.value}
-                    </div>
-                </Tooltip>
+            renderCell: ({ value }) => (
+              <Tooltip title={value} aria-label={value}>
+                <div>{value}</div>
+              </Tooltip>
             ),
             width: 270
-        },
-        {
+          },
+          {
             field: "platform",
             headerName: t("columns.platform"),
             ...PlatformColumn
-        },
-        {
-            field: "notes", 
+          },
+          {
+            field: "notes",
             headerName: t("columns.notes"),
             headerAlign: 'center',
-            renderCell: (params : GridRenderCellParams) => (
-                <Tooltip title={params.value || ""} aria-label={params.value || ""}>
-                    <div>
-                        {params.value || ""}
-                    </div>
-                </Tooltip>
+            renderCell: ({ value }) => (
+              <Tooltip title={value || ""} aria-label={value || ""}>
+                <div>{value || ""}</div>
+              </Tooltip>
             ),
             width: 270
-        },
+          },
     ];
 
     return (
-        <div style={{ height: 450, width: '100%' }}>
-            <div style={{ display: 'flex', height: '100%' }}>
-                <div style={{ flexGrow: 1 }}>
-                    <DataGrid 
-                        rows={data} 
-                        columns={columns} 
-                        disableRowSelectionOnClick 
-                        //disableExtendRowFullWidth // No needed for now
-                        //disableColumnFilter // or filterable: false in each column
-                        autoHeight  
-                        localeText={customLocaleText}
-                        slots={{
-                            toolbar: GridToolbar
-                        }}
-                        slotProps={{
-                            loadingOverlay: {
-                                variant: 'linear-progress',
-                                noRowsVariant: 'skeleton',
-                            }
-                        }}
-                        loading={isLoading}
-                        sortingOrder={['asc', 'desc']}
-                        initialState={{
-                            sorting: {
-                              sortModel: [{ field: 'title', sort: 'asc' }],
-                            },
-                            columns: {
-                                columnVisibilityModel: {
-                                    // Hide columns notes, the other columns will remain visible
-                                    notes: false
-                                }
-                            }
-                        }}
-                    />
-                </div>
-            </div>
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <DataGrid 
+              rows={data} 
+              columns={columns} 
+              disableRowSelectionOnClick 
+              localeText={customLocaleText}
+              slots={{
+                  toolbar: GridToolbar
+              }}
+              slotProps={{
+                  loadingOverlay: {
+                      variant: 'linear-progress',
+                      noRowsVariant: 'skeleton',
+                  }
+              }}
+              loading={isLoading}
+              sortingOrder={['asc', 'desc']}
+              initialState={{
+                  sorting: {
+                      sortModel: [{ field: 'title', sort: 'asc' }],
+                  },
+                  columns: {
+                      columnVisibilityModel: {
+                          // Hide columns notes, the other columns will remain visible
+                          notes: false
+                      }
+                  }
+              }}
+          />
         </div>
     )
 

diff --git a/src/app/[locale]/games/_client/GamesFilters.tsx b/src/app/[locale]/games/_client/GamesFilters.tsx
@@ -1,6 +1,5 @@
 // MUI
 import Grid from "@mui/material/Grid";
-import useMediaQuery from '@mui/material/useMediaQuery';
 
 // Custom
 import GenresSelect from "@/components/GamesView/GenresSelect";
@@ -9,28 +8,17 @@ import TitleFilter from "@/components/GamesView/TitleFilter";
 
 export default function GamesFilters() {
 
-    // Tweak display of filters according screen size
-    const onSmallScreen = useMediaQuery( (theme : any) => theme.breakpoints.down('md'));
-
     return (
-        <Grid
-            container
-            sx={{
-                display: "flex",
-                flexDirection: (onSmallScreen) ? "column" : "row",
-                rowGap: (onSmallScreen) ? "8px" : undefined,
-                justifyContent: (onSmallScreen) ? "flex-end" : undefined
-            }}
-        >
+        <Grid container spacing={1}>
+            <Grid item xs={12} md={5}>
+                <TitleFilter />
+            </Grid>
             <Grid item xs={12} md={3}>
                 <PlatformSelect />
             </Grid>
-            <Grid item xs={12} md={5}>
-                <GenresSelect />
-            </Grid>
             <Grid item xs={12} md={4}>
-                <TitleFilter />
+                <GenresSelect />
             </Grid>
-        </Grid>
+      </Grid>
     )
 }
diff --git a/src/app/[locale]/planning/page.tsx b/src/app/[locale]/planning/page.tsx
@@ -9,7 +9,7 @@ import { useGetPlanningQuery } from "@/redux/services/planningAPI";
 
 // Material UI
 import { DataGrid, GridToolbar } from '@mui/x-data-grid';
-import type { GridRenderCellParams, GridColDef } from '@mui/x-data-grid';
+import type { GridColDef } from '@mui/x-data-grid';
 
 // Icons
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
@@ -40,10 +40,10 @@ export default function PlanningViewer() {
             field: "title", 
             headerName: t("columns.title"),
             headerAlign: 'center',
-            renderCell: (params : GridRenderCellParams) => (
-                <Tooltip title={params.value} aria-label={params.value}>
+            renderCell: ({value}) => (
+                <Tooltip title={value} aria-label={value}>
                     <div>
-                        {params.value}
+                        {value}
                     </div>
                 </Tooltip>
             ),
@@ -92,10 +92,10 @@ export default function PlanningViewer() {
                     )
                 }
             ] satisfies { value: GameStatus; label: JSX.Element }[],
-            renderCell: (params : GridRenderCellParams) => (
-                <Tooltip title={t(`states.${params.value as GameStatus}`as const)} aria-label={params.value}>
+            renderCell: ({value}) => (
+                <Tooltip title={t(`states.${value as GameStatus}`as const)} aria-label={value}>
                     { 
-                        (params.value === "RECORDED") ? <CheckCircleIcon /> : <HourglassEmptyIcon />
+                        (value === "RECORDED") ? <CheckCircleIcon /> : <HourglassEmptyIcon />
                     }
                 </Tooltip>
             ),
@@ -104,42 +104,35 @@ export default function PlanningViewer() {
     ];
 
     return (
-            <div style={{ height: 450, width: '100%' }}>
-                <div style={{ display: 'flex', height: '100%' }}>
-                    <div style={{ flexGrow: 1 }}>
-                        <DataGrid 
-                            rows={data} 
-                            columns={columns} 
-                            disableRowSelectionOnClick 
-                            //disableExtendRowFullWidth // No needed for now
-                            //disableColumnFilter // or filterable: false in each column
-                            autoHeight  
-                            localeText={customLocaleText}
-                            slots={{
-                                toolbar: GridToolbar
-                            }}
-                            slotProps={{
-                                loadingOverlay: {
-                                    variant: 'linear-progress',
-                                    noRowsVariant: 'skeleton',
-                                }
-                            }}
-                            loading={isLoading}
-                            sortingOrder={['asc', 'desc']}
-                            initialState={{
-                                sorting: {
-                                  sortModel: [{ field: 'releaseDate', sort: 'asc' }],
-                                },
-                                columns: {
-                                    columnVisibilityModel: {
-                                        // Hide columns endDate, the other columns will remain visible
-                                        endDate: false
-                                    }
-                                }
-                            }}
-                        />
-                    </div>
-                </div>
-            </div>
-        )
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+            <DataGrid 
+                rows={data} 
+                columns={columns} 
+                disableRowSelectionOnClick 
+                localeText={customLocaleText}
+                slots={{
+                    toolbar: GridToolbar
+                }}
+                slotProps={{
+                    loadingOverlay: {
+                        variant: 'linear-progress',
+                        noRowsVariant: 'skeleton',
+                    }
+                }}
+                loading={isLoading}
+                sortingOrder={['asc', 'desc']}
+                initialState={{
+                    sorting: {
+                        sortModel: [{ field: 'releaseDate', sort: 'asc' }],
+                    },
+                    columns: {
+                        columnVisibilityModel: {
+                            // Hide columns endDate, the other columns will remain visible
+                            endDate: false
+                        }
+                    }
+                }}
+            />
+        </div>
+    )
 }
diff --git a/src/components/GamesView/CardDialog.tsx b/src/components/GamesView/CardDialog.tsx
@@ -21,6 +21,7 @@ const DialogTitle = lazy(() => import("@mui/material/DialogTitle"));
 // For a custom contextMenu (nice for UI)
 const List = lazy(() => import("@mui/material/List"));
 const ListItem = lazy(() => import("@mui/material/ListItem"));
+const ListItemButton = lazy(() => import("@mui/material/ListItemButton"));
 const ListItemIcon = lazy(() => import("@mui/material/ListItemIcon"));
 const ListItemText = lazy(() => import("@mui/material/ListItemText"));
 const Button = lazy(() => import("@mui/material/Button"));
@@ -152,10 +153,12 @@ function CardDialog(props : {
                                 divider={option.divider || false}
                                 key={option.key}
                             >
-                                <ListItemIcon>
-                                    {option.icon}
-                                </ListItemIcon>
-                                <ListItemText primary={option.text} />
+                                <ListItemButton>
+                                    <ListItemIcon>
+                                        {option.icon}
+                                    </ListItemIcon>
+                                    <ListItemText primary={option.text} />
+                                </ListItemButton>
                             </ListItem>
                         )  
                     }