Skip to content

Commit 6409d36

Browse files
bexsoftbexsoft
authored
Changed styles for object browser in small screens (#1974)
Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
1 parent 10f8aed commit 6409d36

File tree

8 files changed

+248
-135
lines changed

8 files changed

+248
-135
lines changed

‎portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/RBIconButton.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,8 +100,10 @@ const RBIconButton = (props: RBIconProps) => {
100100
"& span": {
101101
fontSize: 14,
102102
"@media (max-width: 900px)": {
103-
display: showLabelAlways ? "inline" : "none",
104-
marginRight: showLabelAlways ? "7px" : "",
103+
"&:not(.MuiBadge-root, .MuiBadge-badge)": {
104+
display: showLabelAlways ? "inline" : "none",
105+
marginRight: showLabelAlways ? "7px" : "",
106+
},
105107
},
106108
},
107109
}}

‎portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DetailsListPanel.tsx

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { ClosePanelIcon } from "../../../../../../icons";
2424
interface IDetailsListPanel {
2525
classes: any;
2626
open: boolean;
27+
className?: string;
2728
closePanel: () => void;
2829
children: React.ReactNode;
2930
}
@@ -51,6 +52,13 @@ const styles = (theme: Theme) =>
5152
borderLeftWidth: 1,
5253
opacity: 1,
5354
},
55+
"@media (max-width: 799px)": {
56+
"&.open": {
57+
width: "100%",
58+
minWidth: "100%",
59+
borderLeftWidth: 0,
60+
},
61+
},
5462
},
5563
closePanel: {
5664
position: "absolute",
@@ -66,10 +74,14 @@ const DetailsListPanel = ({
6674
classes,
6775
open,
6876
closePanel,
77+
className = "",
6978
children,
7079
}: IDetailsListPanel) => {
7180
return (
72-
<Grid item className={`${classes.detailsList} ${open ? "open" : ""}`}>
81+
<Grid
82+
item
83+
className={`${classes.detailsList} ${open ? "open" : ""} ${className}`}
84+
>
7385
<IconButton onClick={closePanel} className={classes.closePanel}>
7486
<ClosePanelIcon />
7587
</IconButton>

‎portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx

Lines changed: 111 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,9 @@ const styles = (theme: Theme) =>
142142
"&.actionsPanelOpen": {
143143
minHeight: "100%",
144144
},
145+
"@media (max-width: 800px)": {
146+
width: 800,
147+
},
145148
},
146149
"@global": {
147150
".rowLine:hover .iconFileElm": {
@@ -186,6 +189,21 @@ const styles = (theme: Theme) =>
186189
breadcrumbsContainer: {
187190
padding: "12px 14px 5px",
188191
},
192+
parentWrapper: {
193+
"@media (max-width: 800px)": {
194+
overflowX: "auto",
195+
},
196+
},
197+
fullContainer: {
198+
"@media (max-width: 799px)": {
199+
width: 0,
200+
},
201+
},
202+
hideListOnSmall: {
203+
"@media (max-width: 799px)": {
204+
visibility: "hidden",
205+
},
206+
},
189207
...objectBrowserExtras,
190208
...objectBrowserCommon,
191209
...containerForHeader(theme.spacing(4)),
@@ -454,7 +472,10 @@ const ListObjects = ({
454472
setLoadingVersioning(false);
455473
})
456474
.catch((err: ErrorResponseHandler) => {
457-
console.error("Error Getting Object Versioning Status: ", err.detailedError);
475+
console.error(
476+
"Error Getting Object Versioning Status: ",
477+
err.detailedError
478+
);
458479
setLoadingVersioning(false);
459480
});
460481
} else {
@@ -474,7 +495,10 @@ const ListObjects = ({
474495
setLoadingLocking(false);
475496
})
476497
.catch((err: ErrorResponseHandler) => {
477-
console.error("Error Getting Object Locking Status: ", err.detailedError);
498+
console.error(
499+
"Error Getting Object Locking Status: ",
500+
err.detailedError
501+
);
478502
setLoadingLocking(false);
479503
});
480504
} else {
@@ -1321,81 +1345,90 @@ const ListObjects = ({
13211345
}
13221346
actions={
13231347
<Fragment>
1324-
<RBIconButton
1325-
id={"rewind-objects-list"}
1326-
tooltip={"Rewind Bucket"}
1327-
text={"Rewind"}
1328-
icon={
1329-
<Badge
1330-
badgeContent=" "
1331-
color="secondary"
1332-
variant="dot"
1333-
invisible={!rewindEnabled}
1334-
className={classes.badgeOverlap}
1335-
sx={{ height: 12 }}
1336-
>
1337-
<HistoryIcon />
1338-
</Badge>
1339-
}
1340-
color="primary"
1341-
variant={"outlined"}
1342-
onClick={() => {
1343-
setRewindSelect(true);
1344-
}}
1345-
disabled={
1346-
!isVersioned ||
1347-
!hasPermission(bucketName, [IAM_SCOPES.S3_PUT_OBJECT])
1348-
}
1349-
/>
1350-
<RBIconButton
1351-
id={"refresh-objects-list"}
1352-
tooltip={"Reload List"}
1353-
text={"Refresh"}
1354-
icon={<RefreshIcon />}
1355-
color="primary"
1356-
variant={"outlined"}
1357-
onClick={() => {
1358-
if (versionsMode) {
1359-
setLoadingVersions(true);
1360-
} else {
1361-
setLoadingObjectsList(true);
1348+
<div className={classes.actionsSection}>
1349+
<RBIconButton
1350+
id={"rewind-objects-list"}
1351+
tooltip={"Rewind Bucket"}
1352+
text={"Rewind"}
1353+
icon={
1354+
<Badge
1355+
badgeContent=" "
1356+
color="secondary"
1357+
variant="dot"
1358+
invisible={!rewindEnabled}
1359+
className={classes.badgeOverlap}
1360+
sx={{ height: 16 }}
1361+
>
1362+
<HistoryIcon
1363+
style={{
1364+
minWidth: 16,
1365+
minHeight: 16,
1366+
width: 16,
1367+
height: 16,
1368+
}}
1369+
/>
1370+
</Badge>
13621371
}
1363-
}}
1364-
disabled={
1365-
!hasPermission(bucketName, [IAM_SCOPES.S3_LIST_BUCKET]) ||
1366-
rewindEnabled
1367-
}
1368-
/>
1369-
<input
1370-
type="file"
1371-
multiple
1372-
onChange={handleUploadButton}
1373-
style={{ display: "none" }}
1374-
ref={fileUpload}
1375-
/>
1376-
<input
1377-
type="file"
1378-
multiple
1379-
onChange={handleUploadButton}
1380-
style={{ display: "none" }}
1381-
ref={folderUpload}
1382-
/>
1383-
<UploadFilesButton
1384-
bucketName={bucketName}
1385-
uploadPath={uploadPath.join("/")}
1386-
uploadFileFunction={(closeMenu) => {
1387-
if (fileUpload && fileUpload.current) {
1388-
fileUpload.current.click();
1372+
color="primary"
1373+
variant={"outlined"}
1374+
onClick={() => {
1375+
setRewindSelect(true);
1376+
}}
1377+
disabled={
1378+
!isVersioned ||
1379+
!hasPermission(bucketName, [IAM_SCOPES.S3_PUT_OBJECT])
13891380
}
1390-
closeMenu();
1391-
}}
1392-
uploadFolderFunction={(closeMenu) => {
1393-
if (folderUpload && folderUpload.current) {
1394-
folderUpload.current.click();
1381+
/>
1382+
<RBIconButton
1383+
id={"refresh-objects-list"}
1384+
tooltip={"Reload List"}
1385+
text={"Refresh"}
1386+
icon={<RefreshIcon />}
1387+
color="primary"
1388+
variant={"outlined"}
1389+
onClick={() => {
1390+
if (versionsMode) {
1391+
setLoadingVersions(true);
1392+
} else {
1393+
setLoadingObjectsList(true);
1394+
}
1395+
}}
1396+
disabled={
1397+
!hasPermission(bucketName, [IAM_SCOPES.S3_LIST_BUCKET]) ||
1398+
rewindEnabled
13951399
}
1396-
closeMenu();
1397-
}}
1398-
/>
1400+
/>
1401+
<input
1402+
type="file"
1403+
multiple
1404+
onChange={handleUploadButton}
1405+
style={{ display: "none" }}
1406+
ref={fileUpload}
1407+
/>
1408+
<input
1409+
type="file"
1410+
multiple
1411+
onChange={handleUploadButton}
1412+
style={{ display: "none" }}
1413+
ref={folderUpload}
1414+
/>
1415+
<UploadFilesButton
1416+
bucketName={bucketName}
1417+
uploadPath={uploadPath.join("/")}
1418+
uploadFileFunction={(closeMenu) => {
1419+
if (fileUpload && fileUpload.current) {
1420+
fileUpload.current.click();
1421+
}
1422+
closeMenu();
1423+
}}
1424+
uploadFolderFunction={(closeMenu) => {
1425+
if (folderUpload && folderUpload.current) {
1426+
folderUpload.current.click();
1427+
}
1428+
closeMenu();
1429+
}}
1430+
/>
1431+
</div>
13991432
</Fragment>
14001433
}
14011434
/>
@@ -1426,7 +1459,7 @@ const ListObjects = ({
14261459
resource={bucketName}
14271460
errorProps={{ disabled: true }}
14281461
>
1429-
<Grid item xs={12}>
1462+
<Grid item xs={12} className={classes.fullContainer}>
14301463
<Grid item xs={12} className={classes.breadcrumbsContainer}>
14311464
<BrowserBreadcrumbs
14321465
bucketName={bucketName}
@@ -1443,6 +1476,7 @@ const ListObjects = ({
14431476
onChange={setDeletedAction}
14441477
checked={showDeleted}
14451478
overrideLabelClasses={classes.labelStyle}
1479+
className={classes.overrideShowDeleted}
14461480
noTopMargin
14471481
/>
14481482
</div>
@@ -1482,6 +1516,7 @@ const ListObjects = ({
14821516

14831517
return "";
14841518
}}
1519+
parentClassName={classes.parentWrapper}
14851520
/>
14861521
</Grid>
14871522
</SecureComponent>
@@ -1496,6 +1531,7 @@ const ListObjects = ({
14961531
closePanel={() => {
14971532
onClosePanel(false);
14981533
}}
1534+
className={`${versionsMode ? classes.hideListOnSmall : ""}`}
14991535
>
15001536
{selectedObjects.length > 0 && (
15011537
<ActionsListSection

‎portal-ui/src/screens/Console/Common/FormComponents/CheckboxWrapper/CheckboxWrapper.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ interface CheckBoxProps {
3939
index?: number;
4040
noTopMargin?: boolean;
4141
checked: boolean;
42+
className?: string;
4243
}
4344

4445
const styles = (theme: Theme) =>
@@ -74,6 +75,7 @@ const CheckboxWrapper = ({
7475
overrideLabelClasses = "",
7576
overrideCheckboxStyles,
7677
classes,
78+
className,
7779
}: CheckBoxProps) => {
7880
return (
7981
<React.Fragment>
@@ -82,7 +84,7 @@ const CheckboxWrapper = ({
8284
xs={12}
8385
className={`${classes.fieldContainer} ${
8486
noTopMargin ? classes.noTopMargin : ""
85-
}`}
87+
} ${className ? className : ""}`}
8688
>
8789
<div>
8890
<Checkbox

0 commit comments

Comments
 (0)