Skip to content

Commit 6501a4b

Browse files
bexsoftBenjamin Perez
bexsoft
and
Benjamin Perez
authored
First set of Modal style changes (#322)
Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>
1 parent 2f51621 commit 6501a4b

File tree

17 files changed

+477
-204
lines changed

17 files changed

+477
-204
lines changed

‎portal-ui/bindata_assetfs.go

Lines changed: 117 additions & 117 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import {
3838
} from "../actions";
3939
import { useDebounce } from "use-debounce";
4040
import { MakeBucketRequest } from "../types";
41+
import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
4142

4243
const styles = (theme: Theme) =>
4344
createStyles({
@@ -52,7 +53,12 @@ const styles = (theme: Theme) =>
5253
alignItems: "center" as const,
5354
justifyContent: "flex-start" as const,
5455
},
56+
quotaSizeContainer: {
57+
flexGrow: 1,
58+
},
5559
sizeFactorContainer: {
60+
flexGrow: 0,
61+
maxWidth: 80,
5662
marginLeft: 8,
5763
alignSelf: "flex-start" as const,
5864
},
@@ -182,7 +188,7 @@ const AddBucket = ({
182188
/>
183189
</Grid>
184190
<Grid item xs={12}>
185-
<CheckboxWrapper
191+
<FormSwitchWrapper
186192
value="versioned"
187193
id="versioned"
188194
name="versioned"
@@ -194,7 +200,7 @@ const AddBucket = ({
194200
/>
195201
</Grid>
196202
<Grid item xs={12}>
197-
<CheckboxWrapper
203+
<FormSwitchWrapper
198204
value="bucket_quota"
199205
id="bucket_quota"
200206
name="bucket_quota"
@@ -224,23 +230,23 @@ const AddBucket = ({
224230
</Grid>
225231
<Grid item xs={12}>
226232
<div className={classes.multiContainer}>
227-
<div>
233+
<div className={classes.quotaSizeContainer}>
228234
<InputBoxWrapper
229235
type="number"
230236
id="quota_size"
231237
name="quota_size"
232238
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
233239
addBucketQuotaSize(e.target.value);
234240
}}
235-
label="Size"
241+
label="Quota"
236242
value={quotaSize}
237243
required
238244
min="1"
239245
/>
240246
</div>
241247
<div className={classes.sizeFactorContainer}>
242248
<SelectWrapper
243-
label=""
249+
label="&nbsp;"
244250
id="quota_unit"
245251
name="quota_unit"
246252
value={quotaUnit}

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

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
// This file is part of MinIO Console Server
2+
// Copyright (c) 2020 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 React, { useEffect, useState } from "react";
18+
import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
19+
import { InputLabel, Switch, Tooltip } from "@material-ui/core";
20+
import Grid from "@material-ui/core/Grid";
21+
import { actionsTray, fieldBasic } from "../common/styleLibrary";
22+
import HelpIcon from "@material-ui/icons/Help";
23+
24+
interface IFormSwitch {
25+
label: string;
26+
classes: any;
27+
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
28+
value: string | boolean;
29+
id: string;
30+
name: string;
31+
disabled?: boolean;
32+
tooltip?: string;
33+
index?: number;
34+
checked: boolean;
35+
}
36+
37+
const styles = (theme: Theme) =>
38+
createStyles({
39+
seeMore: {
40+
marginTop: theme.spacing(3),
41+
},
42+
paper: {
43+
display: "flex",
44+
overflow: "auto",
45+
flexDirection: "column",
46+
paddingTop: 15,
47+
boxShadow: "none",
48+
},
49+
addSideBar: {
50+
width: "320px",
51+
padding: "20px",
52+
},
53+
errorBlock: {
54+
color: "red",
55+
},
56+
tableToolbar: {
57+
paddingLeft: theme.spacing(2),
58+
paddingRight: theme.spacing(0),
59+
},
60+
wrapCell: {
61+
maxWidth: "200px",
62+
whiteSpace: "normal",
63+
wordWrap: "break-word",
64+
},
65+
minTableHeader: {
66+
color: "#393939",
67+
"& tr": {
68+
"& th": {
69+
fontWeight: "bold",
70+
},
71+
},
72+
},
73+
noFound: {
74+
textAlign: "center",
75+
padding: "10px 0",
76+
},
77+
tableContainer: {
78+
maxHeight: 200,
79+
},
80+
stickyHeader: {
81+
backgroundColor: "#fff",
82+
},
83+
actionsTitle: {
84+
fontWeight: 600,
85+
color: "#000",
86+
fontSize: 16,
87+
alignSelf: "center",
88+
},
89+
tableBlock: {
90+
marginTop: 15,
91+
},
92+
filterField: {
93+
width: 375,
94+
fontWeight: 600,
95+
"& .input": {
96+
"&::placeholder": {
97+
fontWeight: 600,
98+
color: "#000",
99+
},
100+
},
101+
},
102+
wrapperContainer: {
103+
display: "flex",
104+
justifyContent: "space-between",
105+
alignItems: "center",
106+
borderBottom: "#9c9c9c 1px solid",
107+
paddingBottom: 14,
108+
marginBottom: 20,
109+
},
110+
...actionsTray,
111+
...fieldBasic,
112+
});
113+
114+
const StyledSwitch = withStyles({
115+
root: {
116+
alignItems: "flex-start",
117+
height: 18,
118+
padding: "0 12px",
119+
display: "flex",
120+
position: "relative",
121+
},
122+
switchBase: {
123+
color: "#fff",
124+
padding: 0,
125+
top: "initial",
126+
"&$checked": {
127+
color: "#fff",
128+
},
129+
"&$checked + $track": {
130+
backgroundColor: "#000",
131+
opacity: 1,
132+
height: 15,
133+
},
134+
},
135+
checked: {},
136+
track: {
137+
height: 15,
138+
backgroundColor: "#000",
139+
opacity: 1,
140+
padding: 0,
141+
marginTop: 1.5,
142+
},
143+
thumb: {
144+
backgroundColor: "#fff",
145+
border: "#000 1px solid",
146+
boxShadow: "none",
147+
width: 18,
148+
height: 18,
149+
padding: 0,
150+
marginLeft: 10,
151+
},
152+
})(Switch);
153+
154+
const FormSwitchWrapper = ({
155+
label,
156+
onChange,
157+
value,
158+
id,
159+
name,
160+
checked = false,
161+
disabled = false,
162+
tooltip = "",
163+
classes,
164+
}: IFormSwitch) => {
165+
return (
166+
<React.Fragment>
167+
<Grid item xs={12} className={`${classes.wrapperContainer}`}>
168+
{label !== "" && (
169+
<InputLabel htmlFor={id} className={classes.inputLabel}>
170+
<span>{label}</span>
171+
{tooltip !== "" && (
172+
<div className={classes.tooltipContainer}>
173+
<Tooltip title={tooltip} placement="top-start">
174+
<HelpIcon className={classes.tooltip} />
175+
</Tooltip>
176+
</div>
177+
)}
178+
</InputLabel>
179+
)}
180+
181+
<div className={classes.textBoxContainer}>
182+
<StyledSwitch
183+
checked={checked}
184+
onChange={onChange}
185+
color="primary"
186+
name={name}
187+
inputProps={{ "aria-label": "primary checkbox" }}
188+
disabled={disabled}
189+
disableRipple
190+
disableFocusRipple
191+
disableTouchRipple
192+
value={value}
193+
/>
194+
</div>
195+
</Grid>
196+
</React.Fragment>
197+
);
198+
};
199+
200+
export default withStyles(styles)(FormSwitchWrapper);

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -71,13 +71,16 @@ const styles = (theme: Theme) =>
7171
const inputStyles = makeStyles((theme: Theme) =>
7272
createStyles({
7373
root: {
74-
borderColor: "#393939",
7574
borderRadius: 0,
75+
"&::before": {
76+
borderColor: "#9c9c9c",
77+
},
7678
},
7779
input: {
78-
padding: "11px 20px",
80+
padding: "15px 5px 10px",
7981
color: "#393939",
80-
fontSize: 14,
82+
fontSize: 13,
83+
fontWeight: 600,
8184
},
8285
error: {
8386
color: "#b53b4b",
@@ -160,7 +163,6 @@ const InputBoxWrapper = ({
160163
<InputField
161164
id={id}
162165
name={name}
163-
variant="outlined"
164166
fullWidth
165167
value={value}
166168
disabled={disabled}
@@ -172,6 +174,10 @@ const InputBoxWrapper = ({
172174
error={error !== ""}
173175
helperText={error}
174176
placeholder={placeholder}
177+
InputLabelProps={{
178+
shrink: true,
179+
}}
180+
className={classes.inputRebase}
175181
/>
176182
</div>
177183
</Grid>

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

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -50,26 +50,25 @@ const styles = (theme: Theme) =>
5050
createStyles({
5151
...fieldBasic,
5252
...tooltipHelper,
53-
inputLabel: {
54-
...fieldBasic.inputLabel,
55-
width: 215,
56-
},
5753
});
5854

5955
const SelectStyled = withStyles((theme: Theme) =>
6056
createStyles({
6157
root: {
58+
lineHeight: 1,
6259
"label + &": {
6360
marginTop: theme.spacing(3),
6461
},
6562
},
6663
input: {
67-
borderRadius: 0,
6864
position: "relative",
6965
color: "#393939",
70-
fontSize: 14,
71-
padding: "11px 20px",
72-
border: "1px solid #c4c4c4",
66+
fontSize: 13,
67+
fontWeight: 600,
68+
padding: "15px 20px 10px 10px",
69+
borderBottom: "1px solid #9c9c9c",
70+
display: "flex",
71+
alignItems: "center",
7372
"&:hover": {
7473
borderColor: "#393939",
7574
},
@@ -106,7 +105,7 @@ const SelectWrapper = ({
106105
)}
107106
</InputLabel>
108107
)}
109-
<FormControl variant="outlined" fullWidth>
108+
<FormControl fullWidth>
110109
<Select
111110
id={id}
112111
name={name}

0 commit comments

Comments
 (0)