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

First set of Modal style changes (#322)

Browse Source 
Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>
This commit is contained in:
Alex
2020-10-09 14:01:24 -05:00
committed by GitHub
parent 2f51621e69
commit 6501a4b13f
17 changed files with 477 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

234
portal-ui/bindata_assetfs.go
View File

File diff suppressed because one or more lines are too long

16
portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
View File

@@ -38,6 +38,7 @@ import {
} from "../actions";
import { useDebounce } from "use-debounce";
import { MakeBucketRequest } from "../types";
import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
const styles = (theme: Theme) =>
createStyles({
@@ -52,7 +53,12 @@ const styles = (theme: Theme) =>
alignItems: "center" as const,
justifyContent: "flex-start" as const,
},
quotaSizeContainer: {
flexGrow: 1,
},
sizeFactorContainer: {
flexGrow: 0,
maxWidth: 80,
marginLeft: 8,
alignSelf: "flex-start" as const,
},
@@ -182,7 +188,7 @@ const AddBucket = ({
/>
</Grid>
<Grid item xs={12}>
<CheckboxWrapper
<FormSwitchWrapper
value="versioned"
id="versioned"
name="versioned"
@@ -194,7 +200,7 @@ const AddBucket = ({
/>
</Grid>
<Grid item xs={12}>
<CheckboxWrapper
<FormSwitchWrapper
value="bucket_quota"
id="bucket_quota"
name="bucket_quota"
@@ -224,7 +230,7 @@ const AddBucket = ({
</Grid>
<Grid item xs={12}>
<div className={classes.multiContainer}>
<div>
<div className={classes.quotaSizeContainer}>
<InputBoxWrapper
type="number"
id="quota_size"
@@ -232,7 +238,7 @@ const AddBucket = ({
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
addBucketQuotaSize(e.target.value);
}}
label="Size"
label="Quota"
value={quotaSize}
required
min="1"
@@ -240,7 +246,7 @@ const AddBucket = ({
</div>
<div className={classes.sizeFactorContainer}>
<SelectWrapper
label=""
label="&nbsp;"
id="quota_unit"
name="quota_unit"
value={quotaUnit}

200
portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx Normal file
View File

@@ -0,0 +1,200 @@
// This file is part of MinIO Console Server
// Copyright (c) 2020 MinIO, Inc.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { useEffect, useState } from "react";
import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import { InputLabel, Switch, Tooltip } from "@material-ui/core";
import Grid from "@material-ui/core/Grid";
import { actionsTray, fieldBasic } from "../common/styleLibrary";
import HelpIcon from "@material-ui/icons/Help";
interface IFormSwitch {
label: string;
classes: any;
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
value: string | boolean;
id: string;
name: string;
disabled?: boolean;
tooltip?: string;
index?: number;
checked: boolean;
}
const styles = (theme: Theme) =>
createStyles({
seeMore: {
marginTop: theme.spacing(3),
},
paper: {
display: "flex",
overflow: "auto",
flexDirection: "column",
paddingTop: 15,
boxShadow: "none",
},
addSideBar: {
width: "320px",
padding: "20px",
},
errorBlock: {
color: "red",
},
tableToolbar: {
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(0),
},
wrapCell: {
maxWidth: "200px",
whiteSpace: "normal",
wordWrap: "break-word",
},
minTableHeader: {
color: "#393939",
"& tr": {
"& th": {
fontWeight: "bold",
},
},
},
noFound: {
textAlign: "center",
padding: "10px 0",
},
tableContainer: {
maxHeight: 200,
},
stickyHeader: {
backgroundColor: "#fff",
},
actionsTitle: {
fontWeight: 600,
color: "#000",
fontSize: 16,
alignSelf: "center",
},
tableBlock: {
marginTop: 15,
},
filterField: {
width: 375,
fontWeight: 600,
"& .input": {
"&::placeholder": {
fontWeight: 600,
color: "#000",
},
},
},
wrapperContainer: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
borderBottom: "#9c9c9c 1px solid",
paddingBottom: 14,
marginBottom: 20,
},
...actionsTray,
...fieldBasic,
});
const StyledSwitch = withStyles({
root: {
alignItems: "flex-start",
height: 18,
padding: "0 12px",
display: "flex",
position: "relative",
},
switchBase: {
color: "#fff",
padding: 0,
top: "initial",
"&$checked": {
color: "#fff",
},
"&$checked + $track": {
backgroundColor: "#000",
opacity: 1,
height: 15,
},
},
checked: {},
track: {
height: 15,
backgroundColor: "#000",
opacity: 1,
padding: 0,
marginTop: 1.5,
},
thumb: {
backgroundColor: "#fff",
border: "#000 1px solid",
boxShadow: "none",
width: 18,
height: 18,
padding: 0,
marginLeft: 10,
},
})(Switch);
const FormSwitchWrapper = ({
label,
onChange,
value,
id,
name,
checked = false,
disabled = false,
tooltip = "",
classes,
}: IFormSwitch) => {
return (
<React.Fragment>
<Grid item xs={12} className={`${classes.wrapperContainer}`}>
{label !== "" && (
<InputLabel htmlFor={id} className={classes.inputLabel}>
<span>{label}</span>
{tooltip !== "" && (
<div className={classes.tooltipContainer}>
<Tooltip title={tooltip} placement="top-start">
<HelpIcon className={classes.tooltip} />
</Tooltip>
</div>
)}
</InputLabel>
)}
<div className={classes.textBoxContainer}>
<StyledSwitch
checked={checked}
onChange={onChange}
color="primary"
name={name}
inputProps={{ "aria-label": "primary checkbox" }}
disabled={disabled}
disableRipple
disableFocusRipple
disableTouchRipple
value={value}
/>
</div>
</Grid>
</React.Fragment>
);
};
export default withStyles(styles)(FormSwitchWrapper);

14
portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx
View File

@@ -71,13 +71,16 @@ const styles = (theme: Theme) =>
const inputStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
borderColor: "#393939",
borderRadius: 0,
"&::before": {
borderColor: "#9c9c9c",
},
},
input: {
padding: "11px 20px",
padding: "15px 5px 10px",
color: "#393939",
fontSize: 14,
fontSize: 13,
fontWeight: 600,
},
error: {
color: "#b53b4b",
@@ -160,7 +163,6 @@ const InputBoxWrapper = ({
<InputField
id={id}
name={name}
variant="outlined"
fullWidth
value={value}
disabled={disabled}
@@ -172,6 +174,10 @@ const InputBoxWrapper = ({
error={error !== ""}
helperText={error}
placeholder={placeholder}
InputLabelProps={{
shrink: true,
}}
className={classes.inputRebase}
/>
</div>
</Grid>

17
portal-ui/src/screens/Console/Common/FormComponents/SelectWrapper/SelectWrapper.tsx
View File

@@ -50,26 +50,25 @@ const styles = (theme: Theme) =>
createStyles({
...fieldBasic,
...tooltipHelper,
inputLabel: {
...fieldBasic.inputLabel,
width: 215,
},
});
const SelectStyled = withStyles((theme: Theme) =>
createStyles({
root: {
lineHeight: 1,
"label + &": {
marginTop: theme.spacing(3),
},
},
input: {
borderRadius: 0,
position: "relative",
color: "#393939",
fontSize: 14,
padding: "11px 20px",
border: "1px solid #c4c4c4",
fontSize: 13,
fontWeight: 600,
padding: "15px 20px 10px 10px",
borderBottom: "1px solid #9c9c9c",
display: "flex",
alignItems: "center",
"&:hover": {
borderColor: "#393939",
},
@@ -106,7 +105,7 @@ const SelectWrapper = ({
)}
</InputLabel>
)}
<FormControl variant="outlined" fullWidth>
<FormControl fullWidth>
<Select
id={id}
name={name}

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

@@ -18,28 +18,24 @@
export const fieldBasic = {
inputLabel: {
fontWeight: 500,
fontWeight: 600,
marginRight: 10,
width: 160,
fontSize: 14,
color: "#393939",
textAlign: "right" as const,
display: "flex",
textOverflow: "ellipsis",
fontSize: 15,
color: "#000",
textAlign: "left" as const,
overflow: "hidden",
justifyContent: "flex-end",
"& span": {
display: "flex",
alignItems: "center",
},
display: "flex",
},
fieldLabelError: {
paddingBottom: 22,
},
fieldContainer: {
display: "flex",
alignItems: "center",
marginBottom: 10,
marginBottom: 20,
},
tooltipContainer: {
marginLeft: 5,
@@ -66,13 +62,13 @@ export const tooltipHelper = {
};
const checkBoxBasic = {
width: 16,
height: 16,
borderRadius: 3,
width: 14,
height: 14,
borderRadius: 2,
};
export const checkboxIcons = {
unCheckedIcon: { ...checkBoxBasic, border: "1px solid #d0d0d0" },
unCheckedIcon: { ...checkBoxBasic, border: "1px solid #c3c3c3" },
checkedIcon: {
...checkBoxBasic,
border: "1px solid #081C42",
@@ -127,3 +123,19 @@ export const searchField = {
},
},
};
export const predefinedList = {
predefinedTitle: {
fontSize: 16,
fontWeight: 600,
color: "#000",
margin: "10px 0",
},
predefinedList: {
backgroundColor: "#eaeaea",
padding: "12px 10px",
color: "#393939",
fontSize: 12,
fontWeight: 600,
},
};

49
portal-ui/src/screens/Console/Common/ModalWrapper/ModalWrapper.tsx
View File

@@ -16,7 +16,12 @@
import React from "react";
import { Dialog, DialogContent, DialogTitle } from "@material-ui/core";
import IconButton from "@material-ui/core/IconButton";
import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import {
createStyles,
makeStyles,
Theme,
withStyles,
} from "@material-ui/core/styles";
interface IModalProps {
classes: any;
@@ -31,16 +36,16 @@ const baseCloseLine = {
borderLeft: "2px solid #707070",
height: 33,
width: 1,
position: "absolute"
position: "absolute",
};
const styles = (theme: Theme) =>
createStyles({
dialogContainer: {
padding: "12px 26px 22px"
padding: "8px 15px 22px",
},
closeContainer: {
textAlign: "right"
textAlign: "right",
},
closeButton: {
width: 45,
@@ -48,40 +53,48 @@ const styles = (theme: Theme) =>
padding: 0,
backgroundColor: "initial",
"&:hover": {
backgroundColor: "initial"
backgroundColor: "initial",
},
"&:active": {
backgroundColor: "initial"
}
backgroundColor: "initial",
},
},
modalCloseIcon: {
fontSize: 35,
color: "#707070",
fontWeight: 300,
"&:hover": {
color: "#000"
}
color: "#000",
},
},
closeIcon: {
"&::before": {
...baseCloseLine,
transform: "rotate(45deg)"
transform: "rotate(45deg)",
},
"&::after": {
...baseCloseLine,
transform: "rotate(-45deg)"
transform: "rotate(-45deg)",
},
"&:hover::before, &:hover::after": {
borderColor: "#000"
borderColor: "#000",
},
width: 24,
height: 24,
display: "block",
position: "relative"
position: "relative",
},
titleClass: {
padding: "0px 24px 12px"
}
padding: "0px 50px 12px",
"& h2": {
fontWeight: 600,
color: "#000",
fontSize: 22,
},
},
modalContent: {
padding: "0 50px",
},
});
const ModalWrapper = ({
@@ -89,7 +102,7 @@ const ModalWrapper = ({
modalOpen,
title,
children,
classes
classes,
}: IModalProps) => {
return (
<Dialog
@@ -114,7 +127,9 @@ const ModalWrapper = ({
<DialogTitle id="alert-dialog-title" className={classes.titleClass}>
{title}
</DialogTitle>
<DialogContent>{children}</DialogContent>
<DialogContent className={classes.modalContent}>
{children}
</DialogContent>
</div>
</Dialog>
);

7
portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/DescriptionIcon.tsx
View File

@@ -7,12 +7,13 @@ const PencilIcon = ({ active = false }: IIcon) => {
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
viewBox="0 0 10 11.429"
>
<path
fill={active ? selected : unSelected}
d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"
></path>
d="M-43.375,11.429-48.35,8.664l-5.025,2.764V0h10Z"
transform="translate(53.375)"
/>
</svg>
);
};

3
portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx
View File

@@ -102,6 +102,8 @@ const styles = (theme: Theme) =>
flexDirection: "column",
padding: "19px 38px",
minHeight: "200px",
boxShadow: "none",
border: "#e7e7e7 1px solid",
},
minTableHeader: {
color: "#393939",
@@ -120,6 +122,7 @@ const styles = (theme: Theme) =>
rowSelected: {
...rowText,
color: "#081C42",
fontWeight: 600,
},
paginatorContainer: {
display: "flex",

2
portal-ui/src/screens/Console/Groups/UsersSelectors.tsx
View File

@@ -166,7 +166,7 @@ const UsersSelectors = ({
return (
<React.Fragment>
<Title>Members</Title>
<Title>Assign Users</Title>
{error !== "" ? <div>{error}</div> : <React.Fragment />}
<Grid item xs={12}>
<Paper className={classes.paper}>

13
portal-ui/src/screens/Console/Policies/AddPolicy.tsx
View File

@@ -41,6 +41,19 @@ const styles = (theme: Theme) =>
},
codeMirror: {
fontSize: 14,
"& .CodeMirror": {
color: "#fff",
backgroundColor: "#081C42",
},
"& .CodeMirror-gutter": {
backgroundColor: "#081C4280",
},
"& .CodeMirror-linenumber": {
color: "#000",
fontSize: 10,
height: 20,
lineHeight: "20px",
},
},
buttonContainer: {
textAlign: "right",

16
portal-ui/src/screens/Console/Tenants/ListTenants/AddTenant.tsx
View File

@@ -29,7 +29,7 @@ import TableRow from "@material-ui/core/TableRow";
import api from "../../../../common/api";
import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
import CheckboxWrapper from "../../Common/FormComponents/CheckboxWrapper/CheckboxWrapper";
import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
import {
calculateDistribution,
@@ -1001,7 +1001,7 @@ const AddTenant = ({
</span>
<br />
<br />
<CheckboxWrapper
<FormSwitchWrapper
value="adv_mode"
id="adv_mode"
name="adv_mode"
@@ -1033,7 +1033,7 @@ const AddTenant = ({
</div>
<Grid item xs={12}>
<CheckboxWrapper
<FormSwitchWrapper
value="custom_dockerhub"
id="custom_dockerhub"
name="custom_dockerhub"
@@ -1083,7 +1083,7 @@ const AddTenant = ({
</React.Fragment>
)}
<Grid item xs={12}>
<CheckboxWrapper
<FormSwitchWrapper
value="enable_prometheus"
id="enable_prometheus"
name="enable_prometheus"
@@ -1198,7 +1198,7 @@ const AddTenant = ({
/>
</Grid>
<Grid item xs={12}>
<CheckboxWrapper
<FormSwitchWrapper
value="ad_skipTLS"
id="ad_skipTLS"
name="ad_skipTLS"
@@ -1213,7 +1213,7 @@ const AddTenant = ({
/>
</Grid>
<Grid item xs={12}>
<CheckboxWrapper
<FormSwitchWrapper
value="ad_serverInsecure"
id="ad_serverInsecure"
name="ad_serverInsecure"
@@ -1302,7 +1302,7 @@ const AddTenant = ({
<h3>Security</h3>
</div>
<Grid item xs={12}>
<CheckboxWrapper
<FormSwitchWrapper
value="enableTLS"
id="enableTLS"
name="enableTLS"
@@ -1425,7 +1425,7 @@ const AddTenant = ({
<span>How would you like to encrypt the information at rest.</span>
</div>
<Grid item xs={12}>
<CheckboxWrapper
<FormSwitchWrapper
value="enableEncryption"
id="enableEncryption"
name="enableEncryption"

12
portal-ui/src/screens/Console/Users/AddToGroup.tsx
View File

@@ -18,7 +18,10 @@ import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import { Button, LinearProgress } from "@material-ui/core";
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import { modalBasic } from "../Common/FormComponents/common/styleLibrary";
import {
modalBasic,
predefinedList,
} from "../Common/FormComponents/common/styleLibrary";
import api from "../../../common/api";
import GroupsSelectors from "./GroupsSelectors";
import Title from "../../../common/Title";
@@ -46,6 +49,7 @@ const styles = (theme: Theme) =>
textAlign: "right",
},
...modalBasic,
...predefinedList,
});
const AddToGroup = ({
@@ -121,10 +125,10 @@ const AddToGroup = ({
</Grid>
)}
<Grid item xs={12}>
<Title>Users to be altered</Title>
<Grid item xs={12} className={classes.predefinedTitle}>
Selected Users
</Grid>
<Grid item xs={12}>
<Grid item xs={12} className={classes.predefinedList}>
{checkedUsers.join(", ")}
</Grid>
<Grid item xs={12}>

2
portal-ui/src/screens/Console/Users/AddUser.tsx
View File

@@ -195,7 +195,7 @@ class AddUserContent extends React.Component<
this.props.closeModalAndRefresh();
}}
modalOpen={this.props.open}
title={selectedUser !== null ? "Edit User" : "Add User"}
title={selectedUser !== null ? "Edit User" : "Create User"}
>
<React.Fragment>
<form

45
portal-ui/src/screens/Console/Users/GroupsSelectors.tsx
View File

@@ -28,6 +28,7 @@ import { stringSort } from "../../../utils/sortFunctions";
import { GroupsList } from "../Groups/types";
import get from "lodash/get";
import TableWrapper from "../Common/TableWrapper/TableWrapper";
import { actionsTray } from "../Common/FormComponents/common/styleLibrary";
interface IGroupsProps {
classes: any;
@@ -41,10 +42,11 @@ const styles = (theme: Theme) =>
marginTop: theme.spacing(3),
},
paper: {
// padding: theme.spacing(2),
display: "flex",
overflow: "auto",
flexDirection: "column",
paddingTop: 15,
boxShadow: "none",
},
addSideBar: {
width: "320px",
@@ -70,20 +72,6 @@ const styles = (theme: Theme) =>
},
},
},
actionsTray: {
textAlign: "left",
"& button": {
marginLeft: 10,
},
},
filterField: {
background: "#FFFFFF",
padding: 12,
borderRadius: 5,
boxShadow: "0px 3px 6px #00000012",
width: "100%",
zIndex: 500,
},
noFound: {
textAlign: "center",
padding: "10px 0",
@@ -94,6 +82,26 @@ const styles = (theme: Theme) =>
stickyHeader: {
backgroundColor: "#fff",
},
actionsTitle: {
fontWeight: 600,
color: "#000",
fontSize: 16,
alignSelf: "center",
},
tableBlock: {
marginTop: 15,
},
filterField: {
width: 375,
fontWeight: 600,
"& .input": {
"&::placeholder": {
fontWeight: 600,
color: "#000",
},
},
},
...actionsTray,
});
const GroupsSelectors = ({
@@ -164,7 +172,6 @@ const GroupsSelectors = ({
return (
<React.Fragment>
<Title>Groups</Title>
<Grid item xs={12}>
<Paper className={classes.paper}>
{loading && <LinearProgress />}
@@ -172,13 +179,13 @@ const GroupsSelectors = ({
{records != null && records.length > 0 ? (
<React.Fragment>
<Grid item xs={12} className={classes.actionsTray}>
<span className={classes.actionsTitle}>Assign Groups</span>
<TextField
placeholder="Filter Groups"
placeholder="Filter by Group"
className={classes.filterField}
id="search-resource"
label=""
InputProps={{
disableUnderline: true,
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
@@ -190,7 +197,7 @@ const GroupsSelectors = ({
}}
/>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} className={classes.tableBlock}>
<TableWrapper
columns={[{ label: "Group", elementKey: "" }]}
onSelect={selectionChanged}

3
portal-ui/src/screens/LoginPage/LoginPage.tsx
View File

@@ -67,7 +67,6 @@ const styles = (theme: Theme) =>
submit: {
margin: "30px 0px 16px",
height: 40,
fontWeight: 700,
boxShadow: "none",
padding: "16px 30px",
},
@@ -266,6 +265,7 @@ const Login = ({ classes, userLoggedIn }: ILoginProps) => {
variant="contained"
color="primary"
className={classes.submit}
disabled={secretKey === "" || accessKey === ""}
>
Login
</Button>
@@ -341,6 +341,7 @@ const Login = ({ classes, userLoggedIn }: ILoginProps) => {
variant="contained"
color="primary"
className={classes.submit}
disabled={jwt === ""}
>
Login
</Button>

8
portal-ui/src/theme/main.ts
View File

@@ -69,10 +69,16 @@ const theme = createMuiTheme({
height: 40,
padding: "0 20px",
fontSize: 14,
fontWeight: 500,
fontWeight: 600,
boxShadow: "none",
"& .MuiSvgIcon-root": {
maxHeight: 18,
},
"&.MuiButton-contained.Mui-disabled": {
backgroundColor: "#EAEDEE",
fontWeight: 600,
color: "#767676",
},
},
},
},