Skip to content

Commit 5e9b065

Browse files
bexsoftBenjamin Perezdvaldivia
authored
Changed modal forms to contain scrollbars (#113)
Changed modal forms to contain scrollbars where the inputs are, so this way the titles and buttons get always visible. Co-authored-by: Benjamin Perez <[email protected]> Co-authored-by: Daniel Valdivia <[email protected]>
1 parent 4382111 commit 5e9b065

File tree

14 files changed

+491
-472
lines changed

14 files changed

+491
-472
lines changed

‎portal-ui/bindata_assetfs.go

Lines changed: 116 additions & 116 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: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import Grid from "@material-ui/core/Grid";
1919
import Typography from "@material-ui/core/Typography";
2020
import { Button, LinearProgress } from "@material-ui/core";
2121
import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
22+
import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
2223
import api from "../../../../common/api";
2324
import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
2425
import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
@@ -30,7 +31,8 @@ const styles = (theme: Theme) =>
3031
},
3132
buttonContainer: {
3233
textAlign: "right"
33-
}
34+
},
35+
...modalBasic
3436
});
3537

3638
interface IAddBucketProps {
@@ -106,31 +108,29 @@ class AddBucket extends React.Component<IAddBucketProps, IAddBucketState> {
106108
}}
107109
>
108110
<Grid container>
109-
{addError !== "" && (
111+
<Grid item xs={12} className={classes.formScrollable}>
112+
{addError !== "" && (
113+
<Grid item xs={12}>
114+
<Typography
115+
component="p"
116+
variant="body1"
117+
className={classes.errorBlock}
118+
>
119+
{addError}
120+
</Typography>
121+
</Grid>
122+
)}
110123
<Grid item xs={12}>
111-
<Typography
112-
component="p"
113-
variant="body1"
114-
className={classes.errorBlock}
115-
>
116-
{addError}
117-
</Typography>
124+
<InputBoxWrapper
125+
id="bucket-name"
126+
name="bucket-name"
127+
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
128+
this.setState({ bucketName: e.target.value });
129+
}}
130+
label="Bucket Name"
131+
value={bucketName}
132+
/>
118133
</Grid>
119-
)}
120-
<Grid item xs={12}>
121-
<InputBoxWrapper
122-
id="bucket-name"
123-
name="bucket-name"
124-
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
125-
this.setState({ bucketName: e.target.value });
126-
}}
127-
label="Bucket Name"
128-
value={bucketName}
129-
/>
130-
</Grid>
131-
<Grid item xs={12}>
132-
<br />
133-
<br />
134134
</Grid>
135135
<Grid item xs={12} className={classes.buttonContainer}>
136136
<Button

‎portal-ui/src/screens/Console/Buckets/ViewBucket/AddEvent.tsx

Lines changed: 85 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import TableBody from "@material-ui/core/TableBody";
2727
import Checkbox from "@material-ui/core/Checkbox";
2828
import Table from "@material-ui/core/Table";
2929
import { ArnList } from "../types";
30+
import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
3031
import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
3132
import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
3233
import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
@@ -46,7 +47,8 @@ const styles = (theme: Theme) =>
4647
},
4748
buttonContainer: {
4849
textAlign: "right"
49-
}
50+
},
51+
...modalBasic
5052
});
5153

5254
interface IAddEventProps {
@@ -204,89 +206,91 @@ class AddEvent extends React.Component<IAddEventProps, IAddEventState> {
204206
}}
205207
>
206208
<Grid container>
207-
{addError !== "" && (
209+
<Grid item xs={12} className={classes.formScrollable}>
210+
{addError !== "" && (
211+
<Grid item xs={12}>
212+
<Typography
213+
component="p"
214+
variant="body1"
215+
className={classes.errorBlock}
216+
>
217+
{addError}
218+
</Typography>
219+
</Grid>
220+
)}
208221
<Grid item xs={12}>
209-
<Typography
210-
component="p"
211-
variant="body1"
212-
className={classes.errorBlock}
213-
>
214-
{addError}
215-
</Typography>
222+
<SelectWrapper
223+
onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
224+
this.setState({ arn: e.target.value as string });
225+
}}
226+
id="select-access-policy"
227+
name="select-access-policy"
228+
label={"ARN"}
229+
value={arn}
230+
options={arnValues}
231+
/>
216232
</Grid>
217-
)}
218-
<Grid item xs={12}>
219-
<SelectWrapper
220-
onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
221-
this.setState({ arn: e.target.value as string });
222-
}}
223-
id="select-access-policy"
224-
name="select-access-policy"
225-
label={"ARN"}
226-
value={arn}
227-
options={arnValues}
228-
/>
229-
</Grid>
230-
<Grid item xs={12}>
231-
<Table size="medium">
232-
<TableHead className={classes.minTableHeader}>
233-
<TableRow>
234-
<TableCell>Select</TableCell>
235-
<TableCell>Event</TableCell>
236-
</TableRow>
237-
</TableHead>
238-
<TableBody>
239-
{events.map(row => (
240-
<TableRow
241-
key={`group-${row.value}`}
242-
onClick={event => handleClick(event, row.value)}
243-
>
244-
<TableCell padding="checkbox">
245-
<Checkbox
246-
value={row.value}
247-
color="primary"
248-
inputProps={{
249-
"aria-label": "secondary checkbox"
250-
}}
251-
onChange={event => handleClick(event, row.value)}
252-
checked={selectedEvents.includes(row.value)}
253-
/>
254-
</TableCell>
255-
<TableCell className={classes.wrapCell}>
256-
{row.label}
257-
</TableCell>
233+
<Grid item xs={12}>
234+
<Table size="medium">
235+
<TableHead className={classes.minTableHeader}>
236+
<TableRow>
237+
<TableCell>Select</TableCell>
238+
<TableCell>Event</TableCell>
258239
</TableRow>
259-
))}
260-
</TableBody>
261-
</Table>
262-
</Grid>
263-
<Grid item xs={12}>
264-
<br />
265-
</Grid>
266-
<Grid item xs={12}>
267-
<InputBoxWrapper
268-
id="prefix-input"
269-
name="prefix-input"
270-
label="Prefix"
271-
value={prefix}
272-
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
273-
this.setState({ prefix: e.target.value });
274-
}}
275-
/>
276-
</Grid>
277-
<Grid item xs={12}>
278-
<InputBoxWrapper
279-
id="suffix-input"
280-
name="suffix-input"
281-
label="Suffix"
282-
value={suffix}
283-
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
284-
this.setState({ suffix: e.target.value });
285-
}}
286-
/>
287-
</Grid>
288-
<Grid item xs={12}>
289-
<br />
240+
</TableHead>
241+
<TableBody>
242+
{events.map(row => (
243+
<TableRow
244+
key={`group-${row.value}`}
245+
onClick={event => handleClick(event, row.value)}
246+
>
247+
<TableCell padding="checkbox">
248+
<Checkbox
249+
value={row.value}
250+
color="primary"
251+
inputProps={{
252+
"aria-label": "secondary checkbox"
253+
}}
254+
onChange={event => handleClick(event, row.value)}
255+
checked={selectedEvents.includes(row.value)}
256+
/>
257+
</TableCell>
258+
<TableCell className={classes.wrapCell}>
259+
{row.label}
260+
</TableCell>
261+
</TableRow>
262+
))}
263+
</TableBody>
264+
</Table>
265+
</Grid>
266+
<Grid item xs={12}>
267+
<br />
268+
</Grid>
269+
<Grid item xs={12}>
270+
<InputBoxWrapper
271+
id="prefix-input"
272+
name="prefix-input"
273+
label="Prefix"
274+
value={prefix}
275+
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
276+
this.setState({ prefix: e.target.value });
277+
}}
278+
/>
279+
</Grid>
280+
<Grid item xs={12}>
281+
<InputBoxWrapper
282+
id="suffix-input"
283+
name="suffix-input"
284+
label="Suffix"
285+
value={suffix}
286+
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
287+
this.setState({ suffix: e.target.value });
288+
}}
289+
/>
290+
</Grid>
291+
<Grid item xs={12}>
292+
<br />
293+
</Grid>
290294
</Grid>
291295
<Grid item xs={12} className={classes.buttonContainer}>
292296
<Button

‎portal-ui/src/screens/Console/Buckets/ViewBucket/SetAccessPolicy.tsx

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import Grid from "@material-ui/core/Grid";
1818
import Typography from "@material-ui/core/Typography";
1919
import { Button, LinearProgress } from "@material-ui/core";
2020
import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
21+
import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
2122
import api from "../../../../common/api";
2223
import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
2324
import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
@@ -26,7 +27,8 @@ const styles = (theme: Theme) =>
2627
createStyles({
2728
errorBlock: {
2829
color: "red"
29-
}
30+
},
31+
...modalBasic
3032
});
3133

3234
interface ISetAccessPolicyProps {
@@ -105,34 +107,33 @@ class SetAccessPolicy extends React.Component<
105107
}}
106108
>
107109
<Grid container>
108-
{addError !== "" && (
110+
<Grid item xs={12} className={classes.formScrollable}>
111+
{addError !== "" && (
112+
<Grid item xs={12}>
113+
<Typography
114+
component="p"
115+
variant="body1"
116+
className={classes.errorBlock}
117+
>
118+
{addError}
119+
</Typography>
120+
</Grid>
121+
)}
109122
<Grid item xs={12}>
110-
<Typography
111-
component="p"
112-
variant="body1"
113-
className={classes.errorBlock}
114-
>
115-
{addError}
116-
</Typography>
123+
<SelectWrapper
124+
value={accessPolicy}
125+
label="Access Policy"
126+
id="select-access-policy"
127+
name="select-access-policy"
128+
onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
129+
this.setState({ accessPolicy: e.target.value as string });
130+
}}
131+
options={[
132+
{ value: "PRIVATE", label: "Private" },
133+
{ value: "PUBLIC", label: "Public" }
134+
]}
135+
/>
117136
</Grid>
118-
)}
119-
<Grid item xs={12}>
120-
<SelectWrapper
121-
value={accessPolicy}
122-
label="Access Policy"
123-
id="select-access-policy"
124-
name="select-access-policy"
125-
onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
126-
this.setState({ accessPolicy: e.target.value as string });
127-
}}
128-
options={[
129-
{ value: "PRIVATE", label: "Private" },
130-
{ value: "PUBLIC", label: "Public" }
131-
]}
132-
/>
133-
</Grid>
134-
<Grid item xs={12}>
135-
<br />
136137
</Grid>
137138
<Grid item xs={12}>
138139
<Button

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,3 +33,14 @@ export const fieldBasic = {
3333
marginLeft: 5
3434
}
3535
};
36+
37+
export const modalBasic = {
38+
formScrollable: {
39+
maxHeight: "calc(100vh - 300px)" as const,
40+
overflowY: "auto" as const,
41+
marginBottom: 25
42+
},
43+
formSlider: {
44+
marginLeft: 0
45+
}
46+
};

0 commit comments

Comments
 (0)