From 6409d36df07db3a72d56476b2cc5670105ae95cc Mon Sep 17 00:00:00 2001 From: Alex <33497058+bexsoft@users.noreply.github.com> Date: Wed, 11 May 2022 16:57:43 -0500 Subject: [PATCH] Changed styles for object browser in small screens (#1974) Signed-off-by: Benjamin Perez --- .../SummaryItems/RBIconButton.tsx | 6 +- .../Objects/ListObjects/DetailsListPanel.tsx | 14 +- .../Objects/ListObjects/ListObjects.tsx | 186 +++++++++++------- .../CheckboxWrapper/CheckboxWrapper.tsx | 4 +- .../FormComponents/common/styleLibrary.ts | 43 ++++ .../Common/ScreenTitle/ScreenTitle.tsx | 7 + .../Common/TableWrapper/TableWrapper.tsx | 5 +- .../ObjectBrowser/BrowserBreadcrumbs.tsx | 118 +++++------ 8 files changed, 248 insertions(+), 135 deletions(-) diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/RBIconButton.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/RBIconButton.tsx index 95bf59f92..0eb59b947 100644 --- 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" : "", + }, }, }, }} diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DetailsListPanel.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DetailsListPanel.tsx index 79952f657..4996fe612 100644 --- 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 ( - + diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx index 146fe0321..96ea2ee39 100644 --- 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={ - - - - } - color="primary" - variant={"outlined"} - onClick={() => { - setRewindSelect(true); - }} - disabled={ - !isVersioned || - !hasPermission(bucketName, [IAM_SCOPES.S3_PUT_OBJECT]) - } - /> - } - color="primary" - variant={"outlined"} - onClick={() => { - if (versionsMode) { - setLoadingVersions(true); - } else { - setLoadingObjectsList(true); +
+ + + } - }} - disabled={ - !hasPermission(bucketName, [IAM_SCOPES.S3_LIST_BUCKET]) || - rewindEnabled - } - /> - - - { - 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(); + /> + } + color="primary" + variant={"outlined"} + onClick={() => { + if (versionsMode) { + setLoadingVersions(true); + } else { + setLoadingObjectsList(true); + } + }} + disabled={ + !hasPermission(bucketName, [IAM_SCOPES.S3_LIST_BUCKET]) || + rewindEnabled } - closeMenu(); - }} - /> + /> + + + { + if (fileUpload && fileUpload.current) { + fileUpload.current.click(); + } + closeMenu(); + }} + uploadFolderFunction={(closeMenu) => { + if (folderUpload && folderUpload.current) { + folderUpload.current.click(); + } + closeMenu(); + }} + /> +
} /> @@ -1426,7 +1459,7 @@ const ListObjects = ({ resource={bucketName} errorProps={{ disabled: true }} > - + @@ -1482,6 +1516,7 @@ const ListObjects = ({ return ""; }} + parentClassName={classes.parentWrapper} /> @@ -1496,6 +1531,7 @@ const ListObjects = ({ closePanel={() => { onClosePanel(false); }} + className={`${versionsMode ? classes.hideListOnSmall : ""}`} > {selectedObjects.length > 0 && ( @@ -74,6 +75,7 @@ const CheckboxWrapper = ({ overrideLabelClasses = "", overrideCheckboxStyles, classes, + className, }: CheckBoxProps) => { return ( @@ -82,7 +84,7 @@ const CheckboxWrapper = ({ xs={12} className={`${classes.fieldContainer} ${ noTopMargin ? classes.noTopMargin : "" - }`} + } ${className ? className : ""}`} >
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, + } }, }; diff --git a/portal-ui/src/screens/Console/Common/ScreenTitle/ScreenTitle.tsx b/portal-ui/src/screens/Console/Common/ScreenTitle/ScreenTitle.tsx index 82cc74367..a8286557e 100644 --- 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%", + }, }, }); diff --git a/portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx b/portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx index ddd95d020..05913d595 100644 --- 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(false); const [anchorEl, setAnchorEl] = React.useState(null); @@ -552,7 +555,7 @@ const TableWrapper = ({ }; return ( - + - {createFolderOpen && ( - - )} - - - - -
- {listBreadcrumbs} -
-
{additionalOptions}
- - {!hidePathButton && ( - - - - )} -
+ + +
+ {listBreadcrumbs} +
+
{additionalOptions}
+ + {!hidePathButton && ( + + + + )} + +
{additionalOptions}
+ ); };