Skip to content

Commit 1a92c59

Browse files
bexsoftbexsoft
authored
Added background color to selected version (#1723)
Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
1 parent ade9731 commit 1a92c59

File tree

2 files changed

+89
-64
lines changed

2 files changed

+89
-64
lines changed

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

Lines changed: 84 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ interface IFileVersionItem {
3535
fileName: string;
3636
versionInfo: IFileInfo;
3737
index: number;
38+
isSelected?: boolean;
3839
onShare: (versionInfo: IFileInfo) => void;
3940
onDownload: (versionInfo: IFileInfo) => void;
4041
onRestore: (versionInfo: IFileInfo) => void;
@@ -48,9 +49,18 @@ const styles = (theme: Theme) =>
4849
mainFileVersionItem: {
4950
borderBottom: "#E2E2E2 1px solid",
5051
padding: "1rem 0",
51-
margin: "0 2rem 0 3.5rem",
52+
margin: "0 0.5rem 0 2.5rem",
5253
cursor: "pointer",
5354
},
55+
intermediateLayer: {
56+
margin: "0 1.5rem 0 1.5rem",
57+
"&:hover, &.selected": {
58+
backgroundColor: "#F8F8F8",
59+
"& > div": {
60+
borderBottomColor: "#F8F8F8",
61+
},
62+
},
63+
},
5464
versionContainer: {
5565
fontSize: 16,
5666
fontWeight: "bold",
@@ -97,6 +107,7 @@ const FileVersionItem = ({
97107
classes,
98108
fileName,
99109
versionInfo,
110+
isSelected,
100111
onShare,
101112
onDownload,
102113
onRestore,
@@ -138,73 +149,83 @@ const FileVersionItem = ({
138149
globalClick(versionInfo);
139150
}}
140151
>
141-
<Grid item xs={12} className={classes.mainFileVersionItem}>
142-
<Grid item xs={12} justifyContent={"space-between"}>
143-
<Grid container>
144-
<Grid item xs={4} className={classes.versionContainer}>
145-
{displayFileIconName(fileName, true)} v{index.toString()}
146-
</Grid>
147-
<Grid item xs={8} className={classes.buttonContainer}>
148-
{versionItemButtons.map((button, index) => {
149-
return (
150-
<Tooltip
151-
title={button.tooltip}
152-
key={`version-action-${button.tooltip}-${index.toString()}`}
153-
>
154-
<IconButton
155-
size={"small"}
156-
id={`version-action-${
152+
<Grid
153+
item
154+
xs={12}
155+
className={`${classes.intermediateLayer} ${
156+
isSelected ? "selected" : ""
157+
}`}
158+
>
159+
<Grid item xs={12} className={classes.mainFileVersionItem}>
160+
<Grid item xs={12} justifyContent={"space-between"}>
161+
<Grid container>
162+
<Grid item xs={4} className={classes.versionContainer}>
163+
{displayFileIconName(fileName, true)} v{index.toString()}
164+
</Grid>
165+
<Grid item xs={8} className={classes.buttonContainer}>
166+
{versionItemButtons.map((button, index) => {
167+
return (
168+
<Tooltip
169+
title={button.tooltip}
170+
key={`version-action-${
157171
button.tooltip
158172
}-${index.toString()}`}
159-
className={`${classes.spacing} ${
160-
disableButtons ? classes.buttonDisabled : ""
161-
}`}
162-
disabled={disableButtons}
163-
onClick={(e) => {
164-
e.stopPropagation();
165-
if (!disableButtons) {
166-
button.action(versionInfo);
167-
} else {
168-
e.preventDefault();
169-
}
170-
}}
171-
sx={{
172-
backgroundColor: "#F8F8F8",
173-
borderRadius: "100%",
174-
width: "28px",
175-
height: "28px",
176-
padding: "5px",
177-
"& .min-icon": {
178-
width: "14px",
179-
height: "14px",
180-
},
181-
}}
182173
>
183-
{button.icon}
184-
</IconButton>
185-
</Tooltip>
186-
);
187-
})}
174+
<IconButton
175+
size={"small"}
176+
id={`version-action-${
177+
button.tooltip
178+
}-${index.toString()}`}
179+
className={`${classes.spacing} ${
180+
disableButtons ? classes.buttonDisabled : ""
181+
}`}
182+
disabled={disableButtons}
183+
onClick={(e) => {
184+
e.stopPropagation();
185+
if (!disableButtons) {
186+
button.action(versionInfo);
187+
} else {
188+
e.preventDefault();
189+
}
190+
}}
191+
sx={{
192+
backgroundColor: "#F8F8F8",
193+
borderRadius: "100%",
194+
width: "28px",
195+
height: "28px",
196+
padding: "5px",
197+
"& .min-icon": {
198+
width: "14px",
199+
height: "14px",
200+
},
201+
}}
202+
>
203+
{button.icon}
204+
</IconButton>
205+
</Tooltip>
206+
);
207+
})}
208+
</Grid>
188209
</Grid>
189210
</Grid>
190-
</Grid>
191-
<Grid item xs={12} className={classes.versionID}>
192-
{versionInfo.version_id}
193-
</Grid>
194-
<Grid item xs={12}>
195-
<span className={classes.versionData}>
196-
<strong>Last modified:</strong>{" "}
197-
<reactMoment.default>
198-
{versionInfo.last_modified}
199-
</reactMoment.default>
200-
</span>
201-
<span className={classes.versionData}>
202-
<strong>Size:</strong> {niceBytes(versionInfo.size || "0")}
203-
</span>
204-
<span className={classes.versionData}>
205-
<strong>Deleted:</strong>{" "}
206-
{versionInfo.is_delete_marker ? "Yes" : "No"}
207-
</span>
211+
<Grid item xs={12} className={classes.versionID}>
212+
{versionInfo.version_id}
213+
</Grid>
214+
<Grid item xs={12}>
215+
<span className={classes.versionData}>
216+
<strong>Last modified:</strong>{" "}
217+
<reactMoment.default>
218+
{versionInfo.last_modified}
219+
</reactMoment.default>
220+
</span>
221+
<span className={classes.versionData}>
222+
<strong>Size:</strong> {niceBytes(versionInfo.size || "0")}
223+
</span>
224+
<span className={classes.versionData}>
225+
<strong>Deleted:</strong>{" "}
226+
{versionInfo.is_delete_marker ? "Yes" : "No"}
227+
</span>
228+
</Grid>
208229
</Grid>
209230
</Grid>
210231
</Grid>

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ interface IVersionsNavigatorProps {
113113
bucketName: string;
114114
searchVersions: string;
115115
loadingVersions: boolean;
116+
selectedVersion: string;
116117
setErrorSnackMessage: typeof setErrorSnackMessage;
117118
setSnackBarMessage: typeof setSnackBarMessage;
118119
setNewObject: typeof setNewObject;
@@ -143,6 +144,7 @@ const VersionsNavigator = ({
143144
updateProgress,
144145
searchVersions,
145146
loadingVersions,
147+
selectedVersion,
146148
completeObject,
147149
internalPaths,
148150
bucketName,
@@ -329,6 +331,7 @@ const VersionsNavigator = ({
329331
onShare={onShareItem}
330332
onPreview={onPreviewItem}
331333
globalClick={onGlobalClick}
334+
isSelected={selectedVersion === item.version_id}
332335
/>
333336
);
334337
};
@@ -441,7 +444,7 @@ const VersionsNavigator = ({
441444
<VirtualizedList
442445
rowRenderFunction={renderVersion}
443446
totalItems={filteredRecords.length}
444-
defaultHeight={110}
447+
defaultHeight={108}
445448
/>
446449
)}
447450
</Grid>
@@ -456,6 +459,7 @@ const mapStateToProps = ({ system, objectBrowser }: AppState) => ({
456459
distributedSetup: get(system, "distributedSetup", false),
457460
searchVersions: objectBrowser.searchVersions,
458461
loadingVersions: objectBrowser.loadingVersions,
462+
selectedVersion: objectBrowser.selectedVersion,
459463
});
460464

461465
const mapDispatchToProps = {

0 commit comments

Comments
 (0)