UI layout adjustments and sticky bulk actions (#2074)

* sticky actions * storage changes * z indexes Co-authored-by: Andrew Snaith <asnaith@users.noreply.github.com>
ChainSafe · Apr 10, 2022 · a1e41ae · a1e41ae
1 parent 5b84894
commit a1e41ae
Show file tree

Hide file tree

Showing 10 changed files with 52 additions and 22 deletions.
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx
@@ -38,6 +38,7 @@ const useStyles = makeStyles(
       root: {
         position: "relative",
         [breakpoints.down("md")]: {
+          marginTop: constants.generalUnit * 4,
           marginLeft: constants.generalUnit * 2,
           marginRight: constants.generalUnit * 2,
           "&.bottomBanner": {
@@ -46,6 +47,7 @@ const useStyles = makeStyles(
         },
         [breakpoints.up("md")]: {
           border: "1px solid transparent",
+          marginTop: constants.generalUnit * 6,
           padding: `0 ${constants.generalUnit}px`,
           borderRadius: constants.generalUnit / 4,
           minHeight: `calc(100vh - ${Number(constants.contentTopPadding)}px)`,

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx
@@ -129,7 +129,8 @@ const useStyles = makeStyles(
           backgroundColor: palette.additional["gray"][4]
         },
         [breakpoints.up("md")]: {
-          margin: `${constants.generalUnit * 3}px 0`
+          marginTop: constants.generalUnit * 3,
+          marginBottom: 0
         },
         [breakpoints.down("md")]: {
           margin: `${constants.generalUnit * 3}px 0 0`
@@ -255,11 +256,19 @@ const useStyles = makeStyles(
       bulkOperations: {
         display: "flex",
         flexDirection: "row",
-        marginTop: constants.generalUnit * 3,
-        marginBottom: constants.generalUnit * 3,
-        minHeight: constants.generalUnit * 4.2, // reserve space for buttons for the interface not to jump when they get visible
+        position: "sticky",
+        top: "80px",
+        backgroundColor: palette.additional["gray"][1],
+        zIndex: zIndex?.layer0,
+        minHeight: constants.generalUnit * 5 + 34,
+        alignItems: "center",
         "& > *": {
           marginRight: constants.generalUnit
+        },
+        [breakpoints.up("md")]: {
+          // prevent grid shadows overflow showing
+          marginLeft: "-4px",
+          paddingLeft: "4px"
         }
       },
       confirmDeletionDialog: {
@@ -271,7 +280,6 @@ const useStyles = makeStyles(
         gridColumnGap: constants.generalUnit * 2,
         gridRowGap: constants.generalUnit * 2,
         marginBottom: constants.generalUnit * 4,
-        marginTop: constants.generalUnit * 4,
         [breakpoints.down("lg")]: {
           gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)"
         },
@@ -319,6 +327,14 @@ const useStyles = makeStyles(
       },
       checkIcon: {
         fill: palette.additional.gray[8]
+      },
+      tableHead: {
+        position: "sticky",
+        top: constants.generalUnit * 5 + 34 + 80,
+        zIndex: zIndex?.layer0,
+        [breakpoints.down("md")]: {
+          top: 50
+        }
       }
     })
   }
@@ -1053,7 +1069,7 @@ const FilesList = ({ isShared = false }: Props) => {
               testId="home"
             >
               {desktop ? (
-                <TableHead>
+                <TableHead className={classes.tableHead}>
                   <TableRow
                     type="grid"
                     className={classes.tableRow}
@@ -1102,7 +1118,7 @@ const FilesList = ({ isShared = false }: Props) => {
                   </TableRow>
                 </TableHead>
               ) : (
-                <TableHead>
+                <TableHead className={classes.tableHead}>
                   <TableRow
                     type="grid"
                     className={classes.tableRow}

diff --git a/packages/files-ui/src/Components/Modules/Settings/index.tsx b/packages/files-ui/src/Components/Modules/Settings/index.tsx
@@ -27,7 +27,7 @@ const TabPane = (props: ITabPaneProps<SettingsPath>) => TabPaneOrigin(props)
 const useStyles = makeStyles(({ constants, breakpoints, palette }: ITheme) =>
   createStyles({
     title: {
-      marginTop: constants.generalUnit,
+      marginTop: constants.generalUnit * 4,
       [breakpoints.down("md")]: {
         fontSize: 18,
         lineHeight: "22px",

diff --git a/packages/files-ui/src/Themes/Constants.ts b/packages/files-ui/src/Themes/Constants.ts
@@ -4,8 +4,8 @@ export const UI_CONSTANTS = {
   mobileButtonHeight: 44,
   headerHeight: 60,
   navWidth: 8 * 27,
-  contentPadding: 8 * 15,
-  contentTopPadding: 8 * 15,
+  contentPadding: 6 * 15,
+  contentTopPadding: 6 * 15,
   mobileHeaderHeight: 8 * 6.3,
   svgWidth: 8 * 2.5,
   topPadding: 8 * 3,

diff --git a/packages/files-ui/src/Themes/DarkTheme.ts b/packages/files-ui/src/Themes/DarkTheme.ts
@@ -436,7 +436,7 @@ export const darkTheme = createTheme<CsfColors>({
         filesTable: {
           color: "var(--gray7)",
           uploadText: "var(--gray7)",
-          gridItemShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)"
+          gridItemShadow: "1px 1px 4px rgba(0, 0, 0, 0.25)"
         },
         fileSystemItemRow: {
           icon: "var(--gray9)",

diff --git a/packages/files-ui/src/Themes/LightTheme.ts b/packages/files-ui/src/Themes/LightTheme.ts
@@ -126,7 +126,7 @@ export const lightTheme = createTheme<CsfColors>({
         filesTable: {
           color: "",
           uploadText: "var(--gray2)",
-          gridItemShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)"
+          gridItemShadow: "1px 1px 4px rgba(0, 0, 0, 0.25)"
         },
         fileSystemItemRow: {
           icon: "var(--gray8)",

diff --git a/packages/storage-ui/src/Components/Modules/FilesList/FilesList.tsx b/packages/storage-ui/src/Components/Modules/FilesList/FilesList.tsx
@@ -109,7 +109,8 @@ const useStyles = makeStyles(
           backgroundColor: palette.additional["gray"][4]
         },
         [breakpoints.up("md")]: {
-          margin: `${constants.generalUnit * 3}px 0`
+          marginTop: constants.generalUnit * 3,
+          marginBottom: 0
         },
         [breakpoints.down("md")]: {
           margin: `${constants.generalUnit * 3}px 0 0`
@@ -229,14 +230,15 @@ const useStyles = makeStyles(
         opacity: 0.2,
         transition: `opacity ${animation.transform * 3}ms`
       },
-      tableHead: {
-        marginTop: constants.generalUnit * 3
-      },
       bulkOperations: {
         display: "flex",
         flexDirection: "row",
-        marginTop: constants.generalUnit * 3,
-        minHeight: constants.generalUnit * 4.2, // reserve space for buttons for the interface not to jump when they get visible
+        position: "sticky",
+        top: "80px",
+        backgroundColor: palette.additional["gray"][1],
+        zIndex: zIndex?.layer0,
+        minHeight: constants.generalUnit * 5 + 34,
+        alignItems: "center",
         "& > *": {
           marginRight: constants.generalUnit
         }
@@ -291,6 +293,14 @@ const useStyles = makeStyles(
       },
       buttonWrap: {
         whiteSpace: "nowrap"
+      },
+      tableHead: {
+        position: "sticky",
+        top: constants.generalUnit * 5 + 34 + 80,
+        zIndex: zIndex?.layer0,
+        [breakpoints.down("md")]: {
+          top: 50
+        }
       }
     })
   }

diff --git a/packages/storage-ui/src/Components/Pages/BucketsPage.tsx b/packages/storage-ui/src/Components/Pages/BucketsPage.tsx
@@ -33,7 +33,8 @@ export const mobileGridSettings = "3fr 100px 100px 70px !important"
 const useStyles = makeStyles(({ breakpoints, animation, constants, typography }: CSSTheme) =>
   createStyles({
     root: {
-      position: "relative"
+      position: "relative",
+      marginTop: constants.generalUnit * 2
     },
     tableHead: {
       marginTop: 24

diff --git a/packages/storage-ui/src/Components/Pages/CidsPage.tsx b/packages/storage-ui/src/Components/Pages/CidsPage.tsx
@@ -19,7 +19,8 @@ export const mobileGridSettings = "2fr 3fr 180px 110px 80px 20px 70px !important
 const useStyles = makeStyles(({ animation, breakpoints, constants }: CSSTheme) =>
   createStyles({
     root: {
-      position: "relative"
+      position: "relative",
+      marginTop: constants.generalUnit * 2
     },
     header: {
       display: "flex",

diff --git a/packages/storage-ui/src/Themes/Constants.ts b/packages/storage-ui/src/Themes/Constants.ts
@@ -4,8 +4,8 @@ export const UI_CONSTANTS = {
   mobileButtonHeight: 44,
   headerHeight: 60,
   navWidth: 8 * 27,
-  contentPadding: 8 * 15,
-  contentTopPadding: 8 * 15,
+  contentPadding: 8 * 12,
+  contentTopPadding: 8 * 12,
   mobileHeaderHeight: 8 * 6.3,
   svgWidth: 8 * 2.5,
   topPadding: 8 * 3,