Skip to content

Commit b32f2cc

Browse files
donkerdonker
committed
Using Material UI
1 parent 9e7cc3f commit b32f2cc

6 files changed

Lines changed: 683 additions & 92 deletions

File tree

‎Client/Js/LpManager/Components/Packs/PacksPage.tsx‎

Lines changed: 69 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
import * as React from "react";
2+
import InputLabel from "@material-ui/core/InputLabel";
3+
import MenuItem from "@material-ui/core/MenuItem";
4+
import FormHelperText from "@material-ui/core/FormHelperText";
5+
import FormControl from "@material-ui/core/FormControl";
6+
import Select from "@material-ui/core/Select";
7+
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
28
import { IAppModule } from "../../Models/IAppModule";
39
import PackageTable from "./PackageTable";
410
import styles from "./styles.module.css";
@@ -50,54 +56,73 @@ export default class PacksPage extends React.Component<
5056
<div>
5157
<div className={styles.page}>
5258
<div className={styles.dddiv}>
53-
<div>{this.props.module.resources.Language}</div>
54-
<select
55-
value={this.state.selectedGenLocale}
56-
onChange={(e) =>
57-
this.setState({
58-
selectedGenLocale: e.target.value,
59-
selectedLocale: this.findBestLocale(e.target.value),
60-
})
61-
}
62-
>
63-
{this.props.genlocales.map((l) => (
64-
<option value={l.Key} key={l.Key}>
65-
{l.Value}
66-
</option>
67-
))}
68-
</select>
69-
</div>
70-
<div className={styles.dddiv}>
71-
<div>{this.props.module.resources.Region}</div>
72-
<select
73-
value={this.state.selectedLocale}
74-
onChange={(e) =>
75-
this.setState({ selectedLocale: e.target.value })
76-
}
77-
>
78-
{this.props.locales
79-
.filter((l) => l.Key.startsWith(this.state.selectedGenLocale))
80-
.map((l) => (
81-
<option value={l.Key} key={l.Key}>
59+
<FormControl style={{ minWidth: "200px" }}>
60+
<Select
61+
value={this.state.selectedGenLocale}
62+
onChange={(e) =>
63+
this.setState({
64+
selectedGenLocale: e.target.value as string,
65+
selectedLocale: this.findBestLocale(
66+
e.target.value as string
67+
),
68+
})
69+
}
70+
style={{ paddingRight: "32px" }}
71+
>
72+
{this.props.genlocales.map((l) => (
73+
<MenuItem value={l.Key} key={l.Key}>
8274
{l.Value}
83-
</option>
75+
</MenuItem>
8476
))}
85-
</select>
77+
</Select>
78+
<FormHelperText>
79+
{this.props.module.resources.Language}
80+
</FormHelperText>
81+
</FormControl>
8682
</div>
8783
<div className={styles.dddiv}>
88-
<div>{this.props.module.resources.Package}</div>
89-
<select
90-
value={this.state.selectedPackage}
91-
onChange={(e) =>
92-
this.setState({ selectedPackage: parseInt(e.target.value) })
93-
}
94-
>
95-
{this.props.packages.map((p) => (
96-
<option value={p.Key} key={p.Key}>
97-
{p.Value}
98-
</option>
99-
))}
100-
</select>
84+
<FormControl style={{ minWidth: "200px" }}>
85+
<Select
86+
value={this.state.selectedLocale}
87+
onChange={(e) =>
88+
this.setState({ selectedLocale: e.target.value as string })
89+
}
90+
style={{ paddingRight: "32px" }}
91+
>
92+
{this.props.locales
93+
.filter((l) => l.Key.startsWith(this.state.selectedGenLocale))
94+
.map((l) => (
95+
<MenuItem value={l.Key} key={l.Key}>
96+
{l.Value}
97+
</MenuItem>
98+
))}
99+
</Select>
100+
<FormHelperText>
101+
{this.props.module.resources.Region}
102+
</FormHelperText>
103+
</FormControl>
104+
</div>
105+
<div className={styles.dddiv}>
106+
<FormControl style={{ minWidth: "200px" }}>
107+
<Select
108+
value={this.state.selectedPackage}
109+
onChange={(e) =>
110+
this.setState({
111+
selectedPackage: parseInt(e.target.value as string),
112+
})
113+
}
114+
style={{ paddingRight: "32px" }}
115+
>
116+
{this.props.packages.map((p) => (
117+
<MenuItem value={p.Key} key={p.Key}>
118+
{p.Value}
119+
</MenuItem>
120+
))}
121+
</Select>
122+
<FormHelperText>
123+
{this.props.module.resources.Package}
124+
</FormHelperText>
125+
</FormControl>
101126
</div>
102127
</div>
103128
<PackageTable

‎Client/Js/LpManager/Components/Packs/styles.module.css‎

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -9,31 +9,3 @@
99
.dddiv {
1010
margin-right: 20px;
1111
}
12-
13-
.dddiv select {
14-
background-color: #0563af;
15-
color: white;
16-
padding: 12px;
17-
width: 250px;
18-
border: none;
19-
font-size: 20px;
20-
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
21-
-webkit-appearance: button;
22-
appearance: button;
23-
outline: none;
24-
}
25-
26-
.dddiv:hover::before {
27-
color: rgba(255, 255, 255, 0.6);
28-
background-color: rgba(255, 255, 255, 0.2);
29-
}
30-
31-
.dddiv select option {
32-
padding: 30px;
33-
}
34-
35-
.dddiv div {
36-
font-size: larger;
37-
font-weight: bold;
38-
padding-bottom: 20px;
39-
}

‎Server/LanguagePackManager/Common/ContextHelper.cs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,11 @@ public void AddCss(string cssFile)
8484
{
8585
ClientResourceManager.RegisterStyleSheet(Page, string.Format(ModulePath + "/css/{0}", cssFile), 9);
8686
}
87+
public void AddMaterialUICss()
88+
{
89+
ClientResourceManager.RegisterStyleSheet(Page, "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap", 9);
90+
ClientResourceManager.RegisterStyleSheet(Page, "https://fonts.googleapis.com/icon?family=Material+Icons", 9);
91+
}
8792

8893
#endregion
8994

‎Server/LanguagePackManager/module.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+


0 commit comments

Comments
 (0)