mirrors/object-browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added background color to selected version (#1723)

Browse Source 
Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
This commit is contained in:
Alex
2022-03-15 20:42:12 -07:00
committed by GitHub
parent ade9731773
commit 1a92c59e3f
2 changed files with 89 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/FileVersionItem.tsx
View File

@@ -35,6 +35,7 @@ interface IFileVersionItem {
fileName: string;
versionInfo: IFileInfo;
index: number;
isSelected?: boolean;
onShare: (versionInfo: IFileInfo) => void;
onDownload: (versionInfo: IFileInfo) => void;
onRestore: (versionInfo: IFileInfo) => void;
@@ -48,9 +49,18 @@ const styles = (theme: Theme) =>
mainFileVersionItem: {
borderBottom: "#E2E2E2 1px solid",
padding: "1rem 0",
margin: "0 2rem 0 3.5rem",
margin: "0 0.5rem 0 2.5rem",
cursor: "pointer",
},
intermediateLayer: {
margin: "0 1.5rem 0 1.5rem",
"&:hover, &.selected": {
backgroundColor: "#F8F8F8",
"& > div": {
borderBottomColor: "#F8F8F8",
},
},
},
versionContainer: {
fontSize: 16,
fontWeight: "bold",
@@ -97,6 +107,7 @@ const FileVersionItem = ({
classes,
fileName,
versionInfo,
isSelected,
onShare,
onDownload,
onRestore,
@@ -138,73 +149,83 @@ const FileVersionItem = ({
globalClick(versionInfo);
}}
>
<Grid item xs={12} className={classes.mainFileVersionItem}>
<Grid item xs={12} justifyContent={"space-between"}>
<Grid container>
<Grid item xs={4} className={classes.versionContainer}>
{displayFileIconName(fileName, true)} v{index.toString()}
</Grid>
<Grid item xs={8} className={classes.buttonContainer}>
{versionItemButtons.map((button, index) => {
return (
<Tooltip
title={button.tooltip}
key={`version-action-${button.tooltip}-${index.toString()}`}
>
<IconButton
size={"small"}
id={`version-action-${
<Grid
item
xs={12}
className={`${classes.intermediateLayer} ${
isSelected ? "selected" : ""
}`}
>
<Grid item xs={12} className={classes.mainFileVersionItem}>
<Grid item xs={12} justifyContent={"space-between"}>
<Grid container>
<Grid item xs={4} className={classes.versionContainer}>
{displayFileIconName(fileName, true)} v{index.toString()}
</Grid>
<Grid item xs={8} className={classes.buttonContainer}>
{versionItemButtons.map((button, index) => {
return (
<Tooltip
title={button.tooltip}
key={`version-action-${
button.tooltip
}-${index.toString()}`}
className={`${classes.spacing} ${
disableButtons ? classes.buttonDisabled : ""
}`}
disabled={disableButtons}
onClick={(e) => {
e.stopPropagation();
if (!disableButtons) {
button.action(versionInfo);
} else {
e.preventDefault();
}
}}
sx={{
backgroundColor: "#F8F8F8",
borderRadius: "100%",
width: "28px",
height: "28px",
padding: "5px",
"& .min-icon": {
width: "14px",
height: "14px",
},
}}
>
{button.icon}
</IconButton>
</Tooltip>
);
})}
<IconButton
size={"small"}
id={`version-action-${
button.tooltip
}-${index.toString()}`}
className={`${classes.spacing} ${
disableButtons ? classes.buttonDisabled : ""
}`}
disabled={disableButtons}
onClick={(e) => {
e.stopPropagation();
if (!disableButtons) {
button.action(versionInfo);
} else {
e.preventDefault();
}
}}
sx={{
backgroundColor: "#F8F8F8",
borderRadius: "100%",
width: "28px",
height: "28px",
padding: "5px",
"& .min-icon": {
width: "14px",
height: "14px",
},
}}
>
{button.icon}
</IconButton>
</Tooltip>
);
})}
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} className={classes.versionID}>
{versionInfo.version_id}
</Grid>
<Grid item xs={12}>
<span className={classes.versionData}>
<strong>Last modified:</strong>{" "}
<reactMoment.default>
{versionInfo.last_modified}
</reactMoment.default>
</span>
<span className={classes.versionData}>
<strong>Size:</strong> {niceBytes(versionInfo.size || "0")}
</span>
<span className={classes.versionData}>
<strong>Deleted:</strong>{" "}
{versionInfo.is_delete_marker ? "Yes" : "No"}
</span>
<Grid item xs={12} className={classes.versionID}>
{versionInfo.version_id}
</Grid>
<Grid item xs={12}>
<span className={classes.versionData}>
<strong>Last modified:</strong>{" "}
<reactMoment.default>
{versionInfo.last_modified}
</reactMoment.default>
</span>
<span className={classes.versionData}>
<strong>Size:</strong> {niceBytes(versionInfo.size || "0")}
</span>
<span className={classes.versionData}>
<strong>Deleted:</strong>{" "}
{versionInfo.is_delete_marker ? "Yes" : "No"}
</span>
</Grid>
</Grid>
</Grid>
</Grid>

6
portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/VersionsNavigator.tsx
View File

@@ -113,6 +113,7 @@ interface IVersionsNavigatorProps {
bucketName: string;
searchVersions: string;
loadingVersions: boolean;
selectedVersion: string;
setErrorSnackMessage: typeof setErrorSnackMessage;
setSnackBarMessage: typeof setSnackBarMessage;
setNewObject: typeof setNewObject;
@@ -143,6 +144,7 @@ const VersionsNavigator = ({
updateProgress,
searchVersions,
loadingVersions,
selectedVersion,
completeObject,
internalPaths,
bucketName,
@@ -329,6 +331,7 @@ const VersionsNavigator = ({
onShare={onShareItem}
onPreview={onPreviewItem}
globalClick={onGlobalClick}
isSelected={selectedVersion === item.version_id}
/>
);
};
@@ -441,7 +444,7 @@ const VersionsNavigator = ({
<VirtualizedList
rowRenderFunction={renderVersion}
totalItems={filteredRecords.length}
defaultHeight={110}
defaultHeight={108}
/>
)}
</Grid>
@@ -456,6 +459,7 @@ const mapStateToProps = ({ system, objectBrowser }: AppState) => ({
distributedSetup: get(system, "distributedSetup", false),
searchVersions: objectBrowser.searchVersions,
loadingVersions: objectBrowser.loadingVersions,
selectedVersion: objectBrowser.selectedVersion,
});
const mapDispatchToProps = {