Changed styles for object browser in small screens (#1974)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
2022-05-11 16:57:43 -05:00
parent 10f8aed021
commit 6409d36df0
8 changed files with 248 additions and 135 deletions
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/RBIconButton.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/RBIconButton.tsx
@@ -100,8 +100,10 @@ const RBIconButton = (props: RBIconProps) => {
        "& span": {
          fontSize: 14,
          "@media (max-width: 900px)": {
-            display: showLabelAlways ? "inline" : "none",
-            marginRight: showLabelAlways ? "7px" : "",
+            "&:not(.MuiBadge-root, .MuiBadge-badge)": {
+              display: showLabelAlways ? "inline" : "none",
+              marginRight: showLabelAlways ? "7px" : "",
+            },
          },
        },
      }}
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DetailsListPanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DetailsListPanel.tsx
@@ -24,6 +24,7 @@ import { ClosePanelIcon } from "../../../../../../icons";
 interface IDetailsListPanel {
  classes: any;
  open: boolean;
+  className?: string;
  closePanel: () => void;
  children: React.ReactNode;
 }
@@ -51,6 +52,13 @@ const styles = (theme: Theme) =>
        borderLeftWidth: 1,
        opacity: 1,
      },
+      "@media (max-width: 799px)": {
+        "&.open": {
+          width: "100%",
+          minWidth: "100%",
+          borderLeftWidth: 0,
+        },
+      },
    },
    closePanel: {
      position: "absolute",
@@ -66,10 +74,14 @@ const DetailsListPanel = ({
  classes,
  open,
  closePanel,
+  className = "",
  children,
 }: IDetailsListPanel) => {
  return (
-    <Grid item className={`${classes.detailsList} ${open ? "open" : ""}`}>
+    <Grid
+      item
+      className={`${classes.detailsList} ${open ? "open" : ""} ${className}`}
+    >
      <IconButton onClick={closePanel} className={classes.closePanel}>
        <ClosePanelIcon />
      </IconButton>
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
@@ -142,6 +142,9 @@ const styles = (theme: Theme) =>
      "&.actionsPanelOpen": {
        minHeight: "100%",
      },
+      "@media (max-width: 800px)": {
+        width: 800,
+      },
    },
    "@global": {
      ".rowLine:hover  .iconFileElm": {
@@ -186,6 +189,21 @@ const styles = (theme: Theme) =>
    breadcrumbsContainer: {
      padding: "12px 14px 5px",
    },
+    parentWrapper: {
+      "@media (max-width: 800px)": {
+        overflowX: "auto",
+      },
+    },
+    fullContainer: {
+      "@media (max-width: 799px)": {
+        width: 0,
+      },
+    },
+    hideListOnSmall: {
+      "@media (max-width: 799px)": {
+        visibility: "hidden",
+      },
+    },
    ...objectBrowserExtras,
    ...objectBrowserCommon,
    ...containerForHeader(theme.spacing(4)),
@@ -454,7 +472,10 @@ const ListObjects = ({
            setLoadingVersioning(false);
          })
          .catch((err: ErrorResponseHandler) => {
-            console.error("Error Getting Object Versioning Status: ", err.detailedError);
+            console.error(
+              "Error Getting Object Versioning Status: ",
+              err.detailedError
+            );
            setLoadingVersioning(false);
          });
      } else {
@@ -474,7 +495,10 @@ const ListObjects = ({
            setLoadingLocking(false);
          })
          .catch((err: ErrorResponseHandler) => {
-            console.error("Error Getting Object Locking Status: ", err.detailedError);
+            console.error(
+              "Error Getting Object Locking Status: ",
+              err.detailedError
+            );
            setLoadingLocking(false);
          });
      } else {
@@ -1321,81 +1345,90 @@ const ListObjects = ({
            }
            actions={
              <Fragment>
-                <RBIconButton
-                  id={"rewind-objects-list"}
-                  tooltip={"Rewind Bucket"}
-                  text={"Rewind"}
-                  icon={
-                    <Badge
-                      badgeContent=" "
-                      color="secondary"
-                      variant="dot"
-                      invisible={!rewindEnabled}
-                      className={classes.badgeOverlap}
-                      sx={{ height: 12 }}
-                    >
-                      <HistoryIcon />
-                    </Badge>
-                  }
-                  color="primary"
-                  variant={"outlined"}
-                  onClick={() => {
-                    setRewindSelect(true);
-                  }}
-                  disabled={
-                    !isVersioned ||
-                    !hasPermission(bucketName, [IAM_SCOPES.S3_PUT_OBJECT])
-                  }
-                />
-                <RBIconButton
-                  id={"refresh-objects-list"}
-                  tooltip={"Reload List"}
-                  text={"Refresh"}
-                  icon={<RefreshIcon />}
-                  color="primary"
-                  variant={"outlined"}
-                  onClick={() => {
-                    if (versionsMode) {
-                      setLoadingVersions(true);
-                    } else {
-                      setLoadingObjectsList(true);
+                <div className={classes.actionsSection}>
+                  <RBIconButton
+                    id={"rewind-objects-list"}
+                    tooltip={"Rewind Bucket"}
+                    text={"Rewind"}
+                    icon={
+                      <Badge
+                        badgeContent=" "
+                        color="secondary"
+                        variant="dot"
+                        invisible={!rewindEnabled}
+                        className={classes.badgeOverlap}
+                        sx={{ height: 16 }}
+                      >
+                        <HistoryIcon
+                          style={{
+                            minWidth: 16,
+                            minHeight: 16,
+                            width: 16,
+                            height: 16,
+                          }}
+                        />
+                      </Badge>
                    }
-                  }}
-                  disabled={
-                    !hasPermission(bucketName, [IAM_SCOPES.S3_LIST_BUCKET]) ||
-                    rewindEnabled
-                  }
-                />
-                <input
-                  type="file"
-                  multiple
-                  onChange={handleUploadButton}
-                  style={{ display: "none" }}
-                  ref={fileUpload}
-                />
-                <input
-                  type="file"
-                  multiple
-                  onChange={handleUploadButton}
-                  style={{ display: "none" }}
-                  ref={folderUpload}
-                />
-                <UploadFilesButton
-                  bucketName={bucketName}
-                  uploadPath={uploadPath.join("/")}
-                  uploadFileFunction={(closeMenu) => {
-                    if (fileUpload && fileUpload.current) {
-                      fileUpload.current.click();
+                    color="primary"
+                    variant={"outlined"}
+                    onClick={() => {
+                      setRewindSelect(true);
+                    }}
+                    disabled={
+                      !isVersioned ||
+                      !hasPermission(bucketName, [IAM_SCOPES.S3_PUT_OBJECT])
                    }
-                    closeMenu();
-                  }}
-                  uploadFolderFunction={(closeMenu) => {
-                    if (folderUpload && folderUpload.current) {
-                      folderUpload.current.click();
+                  />
+                  <RBIconButton
+                    id={"refresh-objects-list"}
+                    tooltip={"Reload List"}
+                    text={"Refresh"}
+                    icon={<RefreshIcon />}
+                    color="primary"
+                    variant={"outlined"}
+                    onClick={() => {
+                      if (versionsMode) {
+                        setLoadingVersions(true);
+                      } else {
+                        setLoadingObjectsList(true);
+                      }
+                    }}
+                    disabled={
+                      !hasPermission(bucketName, [IAM_SCOPES.S3_LIST_BUCKET]) ||
+                      rewindEnabled
                    }
-                    closeMenu();
-                  }}
-                />
+                  />
+                  <input
+                    type="file"
+                    multiple
+                    onChange={handleUploadButton}
+                    style={{ display: "none" }}
+                    ref={fileUpload}
+                  />
+                  <input
+                    type="file"
+                    multiple
+                    onChange={handleUploadButton}
+                    style={{ display: "none" }}
+                    ref={folderUpload}
+                  />
+                  <UploadFilesButton
+                    bucketName={bucketName}
+                    uploadPath={uploadPath.join("/")}
+                    uploadFileFunction={(closeMenu) => {
+                      if (fileUpload && fileUpload.current) {
+                        fileUpload.current.click();
+                      }
+                      closeMenu();
+                    }}
+                    uploadFolderFunction={(closeMenu) => {
+                      if (folderUpload && folderUpload.current) {
+                        folderUpload.current.click();
+                      }
+                      closeMenu();
+                    }}
+                  />
+                </div>
              </Fragment>
            }
          />
@@ -1426,7 +1459,7 @@ const ListObjects = ({
                resource={bucketName}
                errorProps={{ disabled: true }}
              >
-                <Grid item xs={12}>
+                <Grid item xs={12} className={classes.fullContainer}>
                  <Grid item xs={12} className={classes.breadcrumbsContainer}>
                    <BrowserBreadcrumbs
                      bucketName={bucketName}
@@ -1443,6 +1476,7 @@ const ListObjects = ({
                              onChange={setDeletedAction}
                              checked={showDeleted}
                              overrideLabelClasses={classes.labelStyle}
+                              className={classes.overrideShowDeleted}
                              noTopMargin
                            />
                          </div>
@@ -1482,6 +1516,7 @@ const ListObjects = ({

                      return "";
                    }}
+                    parentClassName={classes.parentWrapper}
                  />
                </Grid>
              </SecureComponent>
@@ -1496,6 +1531,7 @@ const ListObjects = ({
                closePanel={() => {
                  onClosePanel(false);
                }}
+                className={`${versionsMode ? classes.hideListOnSmall : ""}`}
              >
                {selectedObjects.length > 0 && (
                  <ActionsListSection
--- a/portal-ui/src/screens/Console/Common/FormComponents/CheckboxWrapper/CheckboxWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/CheckboxWrapper/CheckboxWrapper.tsx
@@ -39,6 +39,7 @@ interface CheckBoxProps {
  index?: number;
  noTopMargin?: boolean;
  checked: boolean;
+  className?: string;
 }

 const styles = (theme: Theme) =>
@@ -74,6 +75,7 @@ const CheckboxWrapper = ({
  overrideLabelClasses = "",
  overrideCheckboxStyles,
  classes,
+  className,
 }: CheckBoxProps) => {
  return (
    <React.Fragment>
@@ -82,7 +84,7 @@ const CheckboxWrapper = ({
        xs={12}
        className={`${classes.fieldContainer} ${
          noTopMargin ? classes.noTopMargin : ""
-        }`}
+        } ${className ? className : ""}`}
      >
        <div>
          <Checkbox
--- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
+++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
@@ -398,6 +398,9 @@ export const objectBrowserCommon = {
    paddingRight: "10px",
    display: "flex",
    alignItems: "center",
+    "@media (max-width: 1060px)": {
+      display: "none",
+    },
  },
  smallLabel: {
    color: "#9C9C9C",
@@ -407,9 +410,20 @@ export const objectBrowserCommon = {
    marginLeft: 10,
    fontSize: 14,
    color: "#969FA8",
+    "@media (max-width: 600px)": {
+      marginLeft: 0,
+      "& span": {
+        marginBottom: 10,
+        display: "flex",
+        flexDirection: "column"
+      }
+    },
  },
  detailsSpacer: {
    marginRight: 18,
+    "@media (max-width: 600px)": {
+      marginRight: 0
+    }
  },
  breadcrumbsList: {
    textOverflow: "ellipsis" as const,
@@ -422,6 +436,32 @@ export const objectBrowserCommon = {
    marginRight: 10,
    width: 0, // WA to avoid overflow if child elements in flexbox list.**
  },
+  breadcrumbsSecond: {
+    display: "none" as const,
+    marginTop: 15,
+    marginBottom: 5,
+    justifyContent: "flex-start" as const,
+    "& > div": {
+      fontSize: 12,
+      fontWeight: "normal",
+      flexDirection: "row" as const,
+      flexWrap: "nowrap" as const,
+    },
+    "@media (max-width: 1060px)": {
+      display: "flex" as const,
+    },
+  },
+  overrideShowDeleted: {
+    "@media (max-width: 600px)": {
+      flexDirection: "row" as const,
+    },
+  },
+  actionsSection: {
+    display: "flex",
+    justifyContent: "space-between",
+    width: "100%",
+    marginTop: 15,
+  },
 };

 // ** According to W3 spec, default minimum values for flex width flex-grow is "auto" (https://drafts.csswg.org/css-flexbox/#min-size-auto). So in this case we need to enforce the use of an absolute width.
@@ -1391,6 +1431,9 @@ export const objectBrowserExtras = {
  },
  titleSpacer: {
    marginLeft: 10,
+    "@media (max-width: 600px)": {
+      marginLeft: 0,
+    }
  },
 };

--- a/portal-ui/src/screens/Console/Common/ScreenTitle/ScreenTitle.tsx
+++ b/portal-ui/src/screens/Console/Common/ScreenTitle/ScreenTitle.tsx
@@ -39,6 +39,9 @@ const styles = (theme: Theme) =>
        width: 44,
        height: 44,
      },
+      "@media (max-width: 600px)": {
+        display: "none"
+      },
    },
    headerBarSubheader: {
      color: "grey",
@@ -72,11 +75,15 @@ const styles = (theme: Theme) =>
      alignItems: "center",
      "@media (max-width: 600px)": {
        flexFlow: "column",
+        width: "100%",
      },
    },
    rightItems: {
      display: "flex",
      alignItems: "center",
+      "@media (max-width: 600px)": {
+        width: "100%",
+      },
    },
  });

--- a/portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx
@@ -80,6 +80,7 @@ interface ISortConfig {
  currentSort: string;
  currentDirection: "ASC" | "DESC" | undefined;
 }
+
 interface TableWrapperProps {
  itemActions?: ItemActions[] | null;
  columns: IColumns[];
@@ -109,6 +110,7 @@ interface TableWrapperProps {
  }: {
    index: number;
  }) => "deleted" | "" | React.CSSProperties;
+  parentClassName?: string;
 }

 const borderColor = "#9c9c9c80";
@@ -462,6 +464,7 @@ const TableWrapper = ({
  disabled = false,
  onSelectAll,
  rowStyle,
+  parentClassName = "",
 }: TableWrapperProps) => {
  const [columnSelectorOpen, setColumnSelectorOpen] = useState<boolean>(false);
  const [anchorEl, setAnchorEl] = React.useState<any>(null);
@@ -552,7 +555,7 @@ const TableWrapper = ({
  };

  return (
-    <Grid item xs={12}>
+    <Grid item xs={12} className={parentClassName}>
      <Paper
        className={`${classes.paper} ${noBackground ? classes.noBackground : ""}
        ${disabled ? classes.disabled : ""} 
--- a/portal-ui/src/screens/Console/ObjectBrowser/BrowserBreadcrumbs.tsx
+++ b/portal-ui/src/screens/Console/ObjectBrowser/BrowserBreadcrumbs.tsx
@@ -158,64 +158,72 @@ const BrowserBreadcrumbs = ({
  };

  return (
-    <div className={classes.breadcrumbsMain}>
-      {createFolderOpen && (
-        <CreatePathModal
-          modalOpen={createFolderOpen}
-          bucketName={bucketName}
-          folderName={internalPaths}
-          onClose={closeAddFolderModal}
-          existingFiles={existingFiles}
-        />
-      )}
-      <Grid item xs={12} className={`${classes.breadcrumbs}`}>
-        <IconButton
-          onClick={goBackFunction}
-          sx={{
-            border: "#EAEDEE 1px solid",
-            backgroundColor: "#fff",
-            borderLeft: 0,
-            borderRadius: 0,
-            width: 38,
-            height: 38,
-            marginRight: "10px",
-          }}
-        >
-          <BackCaretIcon />
-        </IconButton>
-        <div className={classes.breadcrumbsList} dir="rtl">
-          {listBreadcrumbs}
-        </div>
-        <div className={classes.additionalOptions}>{additionalOptions}</div>
-      </Grid>
-      {!hidePathButton && (
-        <Tooltip title={"Choose or create a new path"}>
-          <Button
-            id={"new-path"}
-            onClick={() => {
-              setCreateFolderOpen(true);
-            }}
-            disabled={
-              rewindEnabled ||
-              !hasPermission(bucketName, [IAM_SCOPES.S3_PUT_OBJECT])
-            }
-            endIcon={<NewPathIcon />}
-            disableTouchRipple
-            disableRipple
-            focusRipple={false}
+    <Fragment>
+      <div className={classes.breadcrumbsMain}>
+        {createFolderOpen && (
+          <CreatePathModal
+            modalOpen={createFolderOpen}
+            bucketName={bucketName}
+            folderName={internalPaths}
+            onClose={closeAddFolderModal}
+            existingFiles={existingFiles}
+          />
+        )}
+        <Grid item xs={12} className={`${classes.breadcrumbs}`}>
+          <IconButton
+            onClick={goBackFunction}
            sx={{
-              color: "#969FA8",
-              border: "#969FA8 1px solid",
-              whiteSpace: "nowrap",
-              minWidth: "160px",
+              border: "#EAEDEE 1px solid",
+              backgroundColor: "#fff",
+              borderLeft: 0,
+              borderRadius: 0,
+              width: 38,
+              height: 38,
+              marginRight: "10px",
            }}
-            variant={"outlined"}
          >
-            Create new path
-          </Button>
-        </Tooltip>
-      )}
-    </div>
+            <BackCaretIcon />
+          </IconButton>
+          <div className={classes.breadcrumbsList} dir="rtl">
+            {listBreadcrumbs}
+          </div>
+          <div className={classes.additionalOptions}>{additionalOptions}</div>
+        </Grid>
+        {!hidePathButton && (
+          <Tooltip title={"Choose or create a new path"}>
+            <Button
+              id={"new-path"}
+              onClick={() => {
+                setCreateFolderOpen(true);
+              }}
+              disabled={
+                rewindEnabled ||
+                !hasPermission(bucketName, [IAM_SCOPES.S3_PUT_OBJECT])
+              }
+              endIcon={<NewPathIcon />}
+              disableTouchRipple
+              disableRipple
+              focusRipple={false}
+              sx={{
+                color: "#969FA8",
+                border: "#969FA8 1px solid",
+                whiteSpace: "nowrap",
+                minWidth: "160px",
+                "@media (max-width: 1060px)": {
+                  fontSize: 0,
+                  minWidth: 40,
+                  padding: "0 10px 0 0",
+                },
+              }}
+              variant={"outlined"}
+            >
+              Create new path
+            </Button>
+          </Tooltip>
+        )}
+      </div>
+      <div className={classes.breadcrumbsSecond}>{additionalOptions}</div>
+    </Fragment>
  );
 };