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

Limited input width size for forms in wide screens (#628)

Browse Source 
Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>
This commit is contained in:
Alex
2021-03-05 14:30:01 -06:00
committed by GitHub
parent a2a09b8db1
commit abc9f2b428
5 changed files with 176 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx
View File

@@ -106,6 +106,8 @@ const styles = (theme: Theme) =>
borderBottom: "#9c9c9c 1px solid",
paddingBottom: 14,
marginBottom: 20,
maxWidth: 840,
margin: "0px auto",
},
indicatorLabel: {
fontSize: 12,

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

@@ -1,4 +1,4 @@
import React from "react";
import React, { Fragment } from "react";
import Grid from "@material-ui/core/Grid";
import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import { predefinedList } from "../common/styleLibrary";
@@ -22,24 +22,26 @@ const PredefinedList = ({
multiLine = false,
}: IPredefinedList) => {
return (
<React.Fragment>
{label !== "" && (
<Grid item xs={12} className={classes.predefinedTitle}>
{label}
</Grid>
)}
<Grid item xs={12} className={classes.predefinedList}>
<Grid
item
xs={12}
className={
multiLine ? classes.innerContentMultiline : classes.innerContent
}
>
{content}
<Fragment>
<Grid className={classes.prefinedContainer}>
{label !== "" && (
<Grid item xs={12} className={classes.predefinedTitle}>
{label}
</Grid>
)}
<Grid item xs={12} className={classes.predefinedList}>
<Grid
item
xs={12}
className={
multiLine ? classes.innerContentMultiline : classes.innerContent
}
>
{content}
</Grid>
</Grid>
</Grid>
</React.Fragment>
</Fragment>
);
};

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

@@ -36,6 +36,8 @@ export const fieldBasic = {
fieldContainer: {
marginBottom: 20,
position: "relative" as const,
maxWidth: 840,
margin: "0px auto",
},
tooltipContainer: {
marginLeft: 5,
@@ -77,6 +79,8 @@ export const modalBasic = {
padding: "24px 50px",
overflowY: "auto" as const,
height: 170,
maxWidth: 840,
margin: "0 auto",
},
};
@@ -184,6 +188,11 @@ export const searchField = {
};
export const predefinedList = {
prefinedContainer: {
maxWidth: 840,
width: "100%",
margin: "0 auto",
},
predefinedTitle: {
fontSize: 16,
fontWeight: 600,

124
portal-ui/src/screens/Console/Configurations/CustomForms/ConfMySql.tsx
View File

@@ -159,68 +159,70 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
</React.Fragment>
) : (
<React.Fragment>
<Grid item xs={12} className={classes.configureString}>
<Grid item xs={12}>
<InputBoxWrapper
id="host"
name="host"
label=""
placeholder="Enter Host"
value={host}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setHostname(e.target.value);
}}
/>
</Grid>
<Grid item xs={12}>
<InputBoxWrapper
id="db-name"
name="db-name"
label=""
placeholder="Enter DB Name"
value={dbName}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setDbName(e.target.value);
}}
/>
</Grid>
<Grid item xs={12}>
<InputBoxWrapper
id="port"
name="port"
label=""
placeholder="Enter Port"
value={port}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setPort(e.target.value);
}}
/>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} className={classes.configureString}>
<Grid item xs={12}>
<InputBoxWrapper
id="host"
name="host"
label=""
placeholder="Enter Host"
value={host}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setHostname(e.target.value);
}}
/>
</Grid>
<Grid item xs={12}>
<InputBoxWrapper
id="db-name"
name="db-name"
label=""
placeholder="Enter DB Name"
value={dbName}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setDbName(e.target.value);
}}
/>
</Grid>
<Grid item xs={12}>
<InputBoxWrapper
id="port"
name="port"
label=""
placeholder="Enter Port"
value={port}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setPort(e.target.value);
}}
/>
</Grid>
<Grid item xs={12}>
<InputBoxWrapper
id="user"
name="user"
label=""
placeholder="Enter User"
value={user}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setUser(e.target.value);
}}
/>
</Grid>
<Grid item xs={12}>
<InputBoxWrapper
id="password"
name="password"
label=""
placeholder="Enter Password"
type="password"
value={password}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setPassword(e.target.value);
}}
/>
<Grid item xs={12}>
<InputBoxWrapper
id="user"
name="user"
label=""
placeholder="Enter User"
value={user}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setUser(e.target.value);
}}
/>
</Grid>
<Grid item xs={12}>
<InputBoxWrapper
id="password"
name="password"
label=""
placeholder="Enter Password"
type="password"
value={password}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setPassword(e.target.value);
}}
/>
</Grid>
</Grid>
</Grid>
<PredefinedList label={"Connection String"} content={dsnString} />

164
portal-ui/src/screens/Console/Configurations/CustomForms/ConfPostgres.tsx
View File

@@ -232,87 +232,89 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
</React.Fragment>
) : (
<React.Fragment>
<Grid item xs={12} className={classes.configureString}>
<Grid item xs={12}>
<InputBoxWrapper
id="host"
name="host"
label=""
placeholder="Enter Host"
value={host}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setHostname(e.target.value);
}}
/>
</Grid>
<Grid item xs={12}>
<InputBoxWrapper
id="db-name"
name="db-name"
label=""
placeholder="Enter DB Name"
value={dbName}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setDbName(e.target.value);
}}
/>
</Grid>
<Grid item xs={12}>
<InputBoxWrapper
id="port"
name="port"
label=""
placeholder="Enter Port"
value={port}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setPort(e.target.value);
}}
/>
</Grid>
<Grid item xs={12}>
<SelectWrapper
value={sslMode}
label=""
id="sslmode"
name="sslmode"
onChange={(e): void => {
if (e.target.value !== undefined) {
setSslMode(e.target.value + "");
}
}}
options={[
{ label: "Enter SSL Mode", value: " " },
{ label: "Require", value: "require" },
{ label: "Disable", value: "disable" },
{ label: "Verify CA", value: "verify-ca" },
{ label: "Verify Full", value: "verify-full" },
]}
/>
</Grid>
<Grid item xs={12}>
<InputBoxWrapper
id="user"
name="user"
label=""
placeholder="Enter User"
value={user}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setUser(e.target.value);
}}
/>
</Grid>
<Grid item xs={12}>
<InputBoxWrapper
id="password"
name="password"
label=""
type="password"
placeholder="Enter Password"
value={password}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setPassword(e.target.value);
}}
/>
<Grid item xs={12}>
<Grid item xs={12} className={classes.configureString}>
<Grid item xs={12}>
<InputBoxWrapper
id="host"
name="host"
label=""
placeholder="Enter Host"
value={host}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setHostname(e.target.value);
}}
/>
</Grid>
<Grid item xs={12}>
<InputBoxWrapper
id="db-name"
name="db-name"
label=""
placeholder="Enter DB Name"
value={dbName}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setDbName(e.target.value);
}}
/>
</Grid>
<Grid item xs={12}>
<InputBoxWrapper
id="port"
name="port"
label=""
placeholder="Enter Port"
value={port}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setPort(e.target.value);
}}
/>
</Grid>
<Grid item xs={12}>
<SelectWrapper
value={sslMode}
label=""
id="sslmode"
name="sslmode"
onChange={(e): void => {
if (e.target.value !== undefined) {
setSslMode(e.target.value + "");
}
}}
options={[
{ label: "Enter SSL Mode", value: " " },
{ label: "Require", value: "require" },
{ label: "Disable", value: "disable" },
{ label: "Verify CA", value: "verify-ca" },
{ label: "Verify Full", value: "verify-full" },
]}
/>
</Grid>
<Grid item xs={12}>
<InputBoxWrapper
id="user"
name="user"
label=""
placeholder="Enter User"
value={user}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setUser(e.target.value);
}}
/>
</Grid>
<Grid item xs={12}>
<InputBoxWrapper
id="password"
name="password"
label=""
type="password"
placeholder="Enter Password"
value={password}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setPassword(e.target.value);
}}
/>
</Grid>
</Grid>
</Grid>
<PredefinedList