Skip to content

Commit 6485718

Browse files
authored
Changed Share modal styles (#1942)
Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
1 parent 00bcb54 commit 6485718

File tree

7 files changed

+177
-79
lines changed

7 files changed

+177
-79
lines changed

portal-ui/src/icons/LinkIcon.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
// This file is part of MinIO Console Server
2+
// Copyright (c) 2021 MinIO, Inc.
3+
//
4+
// This program is free software: you can redistribute it and/or modify
5+
// it under the terms of the GNU Affero General Public License as published by
6+
// the Free Software Foundation, either version 3 of the License, or
7+
// (at your option) any later version.
8+
//
9+
// This program is distributed in the hope that it will be useful,
10+
// but WITHOUT ANY WARRANTY; without even the implied warranty of
11+
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12+
// GNU Affero General Public License for more details.
13+
//
14+
// You should have received a copy of the GNU Affero General Public License
15+
// along with this program. If not, see <http://www.gnu.org/licenses/>.
16+
17+
import * as React from "react";
18+
import { SVGProps } from "react";
19+
20+
const LinkIcon = (props: SVGProps<SVGSVGElement>) => (
21+
<svg
22+
xmlns="http://www.w3.org/2000/svg"
23+
className={`min-icon`}
24+
fill={"currentcolor"}
25+
viewBox="0 0 256 256"
26+
{...props}
27+
>
28+
<path
29+
d="M230.01,21.29c-27.36-27.35-71.33-28.49-100.07-2.6h0l-36.83,36.7c-6.45,6.46-11.62,14.09-15.24,22.48-7.22,3.1-13.89,7.37-19.73,12.62h0L21.29,127.17c-28.39,28.39-28.39,74.42,0,102.81,28.39,28.39,74.42,28.39,102.81,0l36.77-36.77h0c5.25-5.85,9.52-12.51,12.62-19.73,8.39-3.62,16.01-8.79,22.48-15.24l36.77-36.77h0c25.9-28.73,24.76-72.72-2.6-100.07l-.12-.12ZM99.3,203.86h0c-14.33,14.33-37.55,14.33-51.88,0-14.33-14.33-14.33-37.55,0-51.88h0l26.81-26.81c6.56,25.45,26.43,45.32,51.88,51.88l-26.81,26.81Zm19.92-71.8c-6.28-6.28-10.05-14.63-10.62-23.49,18.38,1.16,33.02,15.81,34.17,34.19-8.86-.57-17.21-4.34-23.49-10.62l-.06-.08Zm86.94-35.05l-2.25,2.25h0l-26.81,26.81c-6.56-25.45-26.43-45.32-51.88-51.88l26.81-26.81h0l2.25-2.25h0c15.54-13,38.67-10.94,51.68,4.59,11.4,13.62,11.4,33.46,0,47.08v.1l.21,.1Z"
30+
/>
31+
</svg>
32+
);
33+
34+
export default LinkIcon;

portal-ui/src/icons/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -189,3 +189,4 @@ export { default as NetworkPutIcon } from "./NetworkPutIcon";
189189
export { default as RemoveAllIcon } from "./RemoveAllIcon";
190190
export { default as CancelledIcon } from "./CancelledIcon";
191191
export { default as EditTagIcon } from "./EditTagIcon";
192+
export { default as LinkIcon } from "./LinkIcon";

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

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ import createStyles from "@mui/styles/createStyles";
2222
import withStyles from "@mui/styles/withStyles";
2323
import CopyToClipboard from "react-copy-to-clipboard";
2424
import Grid from "@mui/material/Grid";
25-
import Button from "@mui/material/Button";
2625
import LinearProgress from "@mui/material/LinearProgress";
2726
import {
2827
formFieldStyles,
@@ -41,13 +40,15 @@ import ModalWrapper from "../../../../Common/ModalWrapper/ModalWrapper";
4140
import PredefinedList from "../../../../Common/FormComponents/PredefinedList/PredefinedList";
4241
import DaysSelector from "../../../../Common/FormComponents/DaysSelector/DaysSelector";
4342
import { encodeFileName } from "../../../../../../common/utils";
43+
import { ShareIcon } from "../../../../../../icons";
44+
import BoxIconButton from "../../../../Common/BoxIconButton/BoxIconButton";
4445

4546
const CopyIcon = React.lazy(() => import("../../../../../../icons/CopyIcon"));
4647

4748
const styles = (theme: Theme) =>
4849
createStyles({
4950
shareLinkInfo: {
50-
fontSize: 13,
51+
fontSize: 14,
5152
fontWeight: 400,
5253
},
5354
copyShareLink: {
@@ -208,7 +209,8 @@ const ShareFile = ({
208209
return (
209210
<React.Fragment>
210211
<ModalWrapper
211-
title="Share Object"
212+
title="Share File"
213+
titleIcon={<ShareIcon style={{ fill: "#4CCB92" }} />}
212214
modalOpen={open}
213215
onClose={() => {
214216
closeModalAndRefresh();
@@ -225,8 +227,10 @@ const ShareFile = ({
225227
This is a temporary URL with integrated access credentials for
226228
sharing objects valid for up to 7 days.
227229
<br />
230+
<br />
228231
The temporary URL expires after the configured time limit.
229232
</Grid>
233+
<br />
230234
<Grid item xs={12} className={classes.dateContainer}>
231235
<DaysSelector
232236
initialDate={initialDate}
@@ -242,24 +246,29 @@ const ShareFile = ({
242246
xs={12}
243247
className={`${classes.copyShareLink} ${classes.formFieldRow} `}
244248
>
245-
<Grid item xs={10} className={classes.copyShareLinkInput}>
246-
<PredefinedList content={shareURL} />
247-
</Grid>
248-
249-
<Grid item xs={2} className={classes.copyShareLinkBtn}>
250-
<CopyToClipboard text={shareURL}>
251-
<Button
252-
variant="contained"
253-
color="primary"
254-
endIcon={<CopyIcon />}
255-
onClick={() => {
256-
setModalSnackMessage("Share URL Copied to clipboard");
257-
}}
258-
disabled={shareURL === "" || isLoadingFile}
259-
>
260-
Copy
261-
</Button>
262-
</CopyToClipboard>
249+
<Grid item xs={12} className={classes.copyShareLinkInput}>
250+
<PredefinedList
251+
content={shareURL}
252+
actionButton={
253+
<CopyToClipboard text={shareURL}>
254+
<BoxIconButton
255+
variant="outlined"
256+
onClick={() => {
257+
setModalSnackMessage("Share URL Copied to clipboard");
258+
}}
259+
disabled={shareURL === "" || isLoadingFile}
260+
sx={{
261+
marginRight: "5px",
262+
width: "28px",
263+
height: "28px",
264+
padding: "0px",
265+
}}
266+
>
267+
<CopyIcon />
268+
</BoxIconButton>
269+
</CopyToClipboard>
270+
}
271+
/>
263272
</Grid>
264273
</Grid>
265274
</Fragment>

portal-ui/src/screens/Console/Common/FormComponents/DaysSelector/DaysSelector.tsx

Lines changed: 83 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import createStyles from "@mui/styles/createStyles";
2323
import withStyles from "@mui/styles/withStyles";
2424
import { fieldBasic, tooltipHelper } from "../common/styleLibrary";
2525
import InputBoxWrapper from "../InputBoxWrapper/InputBoxWrapper";
26+
import { LinkIcon } from "../../../../../icons";
2627

2728
interface IDaysSelector {
2829
classes: any;
@@ -58,30 +59,49 @@ const styles = (theme: Theme) =>
5859
durationInputs: {
5960
display: "flex",
6061
alignItems: "center",
61-
justifyContent: "center",
62+
justifyContent: "flex-start",
6263
},
6364

6465
validityIndicator: {
6566
display: "flex",
6667
alignItems: "center",
67-
justifyContent: "center",
68+
justifyContent: "flex-start",
69+
marginTop: 25,
70+
marginLeft: 10,
6871
},
6972
invalidDurationText: {
7073
marginTop: 15,
7174
display: "flex",
7275
color: "red",
7376
fontSize: 11,
7477
},
78+
reverseInput: {
79+
flexFlow: "row-reverse",
80+
"& > label": {
81+
fontWeight: 400,
82+
marginLeft: 15,
83+
marginRight: 25,
84+
},
85+
},
7586
validityText: {
7687
fontSize: 14,
77-
fontWeight: 600,
7888
marginTop: 15,
7989
display: "flex",
8090
alignItems: "center",
8191
justifyContent: "center",
8292
"@media (max-width: 900px)": {
8393
flexFlow: "column",
8494
},
95+
"& > .min-icon": {
96+
color: "#5E5E5E",
97+
width: 15,
98+
height: 15,
99+
marginRight: 10,
100+
},
101+
},
102+
validTill: {
103+
fontWeight: "bold",
104+
marginLeft: 15,
85105
},
86106
});
87107

@@ -181,61 +201,66 @@ const DaysSelector = ({
181201
return (
182202
<Fragment>
183203
<Grid container className={classes.fieldContainer}>
184-
<Grid item xs={12} alignItems={"center"} justifyContent={"center"}>
185-
<Grid item xs={12} className={classes.labelContainer}>
186-
<InputLabel htmlFor={id} className={classes.inputLabel}>
187-
<span>{label}</span>
188-
</InputLabel>
204+
<Grid item xs={12} className={classes.labelContainer}>
205+
<InputLabel
206+
htmlFor={id}
207+
className={classes.inputLabel}
208+
sx={{ marginLeft: "10px" }}
209+
>
210+
<span>{label}</span>
211+
</InputLabel>
212+
</Grid>
213+
<Grid item xs={12} className={classes.durationInputs}>
214+
<Grid item className={classes.dateInputContainer}>
215+
<InputBoxWrapper
216+
id={id}
217+
className={classes.reverseInput}
218+
type="number"
219+
min="0"
220+
max={maxDays ? maxDays.toString() : "999"}
221+
label="Days"
222+
name={id}
223+
onChange={(e) => {
224+
setSelectedDays(parseInt(e.target.value));
225+
}}
226+
value={selectedDays.toString()}
227+
extraInputProps={extraInputProps}
228+
noLabelMinWidth
229+
/>
230+
</Grid>
231+
<Grid item className={classes.dateInputContainer}>
232+
<InputBoxWrapper
233+
id={id}
234+
className={classes.reverseInput}
235+
type="number"
236+
min="0"
237+
max="23"
238+
label="Hours"
239+
name={id}
240+
onChange={(e) => {
241+
setSelectedHours(parseInt(e.target.value));
242+
}}
243+
value={selectedHours.toString()}
244+
extraInputProps={extraInputProps}
245+
noLabelMinWidth
246+
/>
189247
</Grid>
190-
<Grid item xs={12} className={classes.durationInputs}>
191-
<Grid item className={classes.dateInputContainer}>
192-
<InputBoxWrapper
193-
id={id}
194-
type="number"
195-
min="0"
196-
max={maxDays ? maxDays.toString() : "999"}
197-
label="Days"
198-
name={id}
199-
onChange={(e) => {
200-
setSelectedDays(parseInt(e.target.value));
201-
}}
202-
value={selectedDays.toString()}
203-
extraInputProps={extraInputProps}
204-
noLabelMinWidth
205-
/>
206-
</Grid>
207-
<Grid item className={classes.dateInputContainer}>
208-
<InputBoxWrapper
209-
id={id}
210-
type="number"
211-
min="0"
212-
max="23"
213-
label="Hours"
214-
name={id}
215-
onChange={(e) => {
216-
setSelectedHours(parseInt(e.target.value));
217-
}}
218-
value={selectedHours.toString()}
219-
extraInputProps={extraInputProps}
220-
noLabelMinWidth
221-
/>
222-
</Grid>
223-
<Grid item className={classes.dateInputContainer}>
224-
<InputBoxWrapper
225-
id={id}
226-
type="number"
227-
min="0"
228-
max="59"
229-
label="Minutes"
230-
name={id}
231-
onChange={(e) => {
232-
setSelectedMinutes(parseInt(e.target.value));
233-
}}
234-
value={selectedMinutes.toString()}
235-
extraInputProps={extraInputProps}
236-
noLabelMinWidth
237-
/>
238-
</Grid>
248+
<Grid item className={classes.dateInputContainer}>
249+
<InputBoxWrapper
250+
id={id}
251+
className={classes.reverseInput}
252+
type="number"
253+
min="0"
254+
max="59"
255+
label="Minutes"
256+
name={id}
257+
onChange={(e) => {
258+
setSelectedMinutes(parseInt(e.target.value));
259+
}}
260+
value={selectedMinutes.toString()}
261+
extraInputProps={extraInputProps}
262+
noLabelMinWidth
263+
/>
239264
</Grid>
240265
</Grid>
241266
<Grid
@@ -245,6 +270,7 @@ const DaysSelector = ({
245270
>
246271
{validDate ? (
247272
<div className={classes.validityText}>
273+
<LinkIcon />
248274
<div className={classes.validityLabel}>
249275
{entity} will be available until:
250276
</div>{" "}

portal-ui/src/screens/Console/Common/FormComponents/PredefinedList/PredefinedList.tsx

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ interface IPredefinedList {
1010
label?: string;
1111
content: any;
1212
multiLine?: boolean;
13+
actionButton?: React.ReactNode;
1314
}
1415

1516
const styles = (theme: Theme) =>
@@ -22,6 +23,7 @@ const PredefinedList = ({
2223
label = "",
2324
content,
2425
multiLine = false,
26+
actionButton,
2527
}: IPredefinedList) => {
2628
return (
2729
<Fragment>
@@ -31,7 +33,13 @@ const PredefinedList = ({
3133
{label}
3234
</Grid>
3335
)}
34-
<Grid item xs={12} className={classes.predefinedList}>
36+
<Grid
37+
item
38+
xs={12}
39+
className={`${classes.predefinedList} ${
40+
actionButton ? classes.includesActionButton : ""
41+
}`}
42+
>
3543
<Grid
3644
item
3745
xs={12}
@@ -41,6 +49,9 @@ const PredefinedList = ({
4149
>
4250
{content}
4351
</Grid>
52+
{actionButton && (
53+
<div className={classes.overlayShareOption}>{actionButton}</div>
54+
)}
4455
</Grid>
4556
</Grid>
4657
</Fragment>

portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -342,6 +342,17 @@ export const predefinedList = {
342342
display: "none",
343343
},
344344
},
345+
includesActionButton: {
346+
paddingRight: 45,
347+
position: "relative" as const,
348+
},
349+
overlayShareOption: {
350+
position: "absolute" as const,
351+
width: 45,
352+
right: 0,
353+
top: "50%",
354+
transform: "translate(0, -50%)",
355+
}
345356
};
346357

347358
export const objectBrowserCommon = {

portal-ui/src/screens/Console/Common/IconsScreen.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -667,6 +667,12 @@ const IconsScreen = ({ classes }: IIconsScreenSimple) => {
667667
LifecycleConfigIcon
668668
</Grid>
669669

670+
<Grid item xs={3} sm={2} md={1}>
671+
<cicons.LinkIcon />
672+
<br />
673+
LinkIcon
674+
</Grid>
675+
670676
<Grid item xs={3} sm={2} md={1}>
671677
<cicons.LockIcon />
672678
<br />

0 commit comments

Comments
 (0)