Skip to content

Commit b26ab51

Browse files
ravichdevravichdev
committed
Merge pull request #23 from material-components/feature/534-settings-page
Feature/534 settings page
2 parents 1cc77cd + 6b30d69 commit b26ab51

File tree

33 files changed

+2135
-45
lines changed

33 files changed

+2135
-45
lines changed

‎package-lock.json‎

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

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
"@material/checkbox": "5.1.0",
3434
"@material/circular-progress": "7.0.0",
3535
"@material/data-table": "5.1.0",
36+
"@material/dialog": "10.0.0",
3637
"@material/drawer": "5.1.0",
3738
"@material/floating-label": "5.1.0",
3839
"@material/form-field": "5.1.0",
@@ -59,7 +60,7 @@
5960
"@wordpress/components": "9.4.0",
6061
"@wordpress/compose": "3.12.0",
6162
"@wordpress/data": "4.14.2",
62-
"@wordpress/date": "3.8.0",
63+
"@wordpress/date": "3.13.1",
6364
"@wordpress/dom": "2.8.0",
6465
"@wordpress/dom-ready": "2.8.0",
6566
"@wordpress/e2e-test-utils": "4.16.0",

‎plugin/assets/css/src/settings.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/**
2+
* Copyright 2020 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
@import "@material/typography/dist/mdc.typography.css";
18+
@import "@material/layout-grid/dist/mdc.layout-grid.css";
19+
@import "@material/ripple/dist/mdc.ripple.css";
20+
@import "@material/switch/dist/mdc.switch.css";
21+
@import "@material/button/dist/mdc.button.css";
22+
@import "@material/circular-progress/dist/mdc.circular-progress.css";
23+
@import "./wizard/switch.css";
24+
@import "./settings/index.css";

‎plugin/assets/css/src/settings/api.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.material-settings__api {
2+
padding-left: 0;
3+
padding-right: 0;
4+
5+
& .components-base-control__field {
6+
height: 100%;
7+
margin-bottom: 0;
8+
}
9+
10+
& .material-settings__api-input input {
11+
height: 100%;
12+
width: 100%;
13+
}
14+
}

‎plugin/assets/css/src/settings/base.css‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
/**
2+
* Copyright 2020 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
.material-settings {
18+
--mdc-typography-headline1-font-family: "Roboto", sans-serif;
19+
--mdc-typography-headline2-font-family: "Roboto", sans-serif;
20+
--mdc-typography-headline3-font-family: "Roboto", sans-serif;
21+
--mdc-typography-headline4-font-family: "Roboto", sans-serif;
22+
--mdc-typography-headline5-font-family: "Roboto", sans-serif;
23+
--mdc-typography-headline6-font-family: "Roboto", sans-serif;
24+
--mdc-typography-subtitle1-font-family: "Roboto", sans-serif;
25+
--mdc-typography-subtitle2-font-family: "Roboto", sans-serif;
26+
--mdc-typography-font-family: "Roboto", sans-serif;
27+
--mdc-typography-body1-font-family: "Roboto", sans-serif;
28+
--mdc-typography-body2-font-family: "Roboto", sans-serif;
29+
--mdc-typography-caption-font-family: "Roboto", sans-serif;
30+
--mdc-typography-button-font-family: "Roboto", sans-serif;
31+
--mdc-typography-overline-font-family: "Roboto", sans-serif;
32+
--material-design-settings-background-color: #fff;
33+
--material-design-settings-primary-color: #212121;
34+
--material-design-settings-primary-text: #fff;
35+
--material-design-wizard-primary-color: #212121;
36+
--material-design-settings-error-color: #dc3232;
37+
38+
& .mdc-button {
39+
--mdc-theme-primary: var(--material-design-settings-primary-color);
40+
--mdc-theme-on-primary: var(--material-design-settings-primary-text);
41+
}
42+
43+
& h1,
44+
& h3,
45+
& h4 {
46+
margin-top: 0;
47+
}
48+
49+
& h2 {
50+
margin-top: 32px;
51+
}
52+
53+
& p {
54+
font-size: 16px;
55+
margin: 0;
56+
}
57+
58+
& .material-settings__updates {
59+
margin-top: 24px;
60+
}
61+
62+
& .mdc-button--raised .mdc-circular-progress {
63+
--mdc-theme-primary: #fff;
64+
}
65+
66+
& .mdc-button.is-loading {
67+
text-align: left;
68+
width: 105px;
69+
}
70+
71+
& .material-settings__message {
72+
align-items: center;
73+
color: var(--material-design-settings-error-color);
74+
display: flex;
75+
}
76+
77+
& .material-settings__message-text {
78+
font-size: 16px;
79+
font-weight: 500;
80+
margin-left: 10px;
81+
}
82+
83+
.mdc-dialog .mdc-dialog__title {
84+
margin-top: 0;
85+
}
86+
}

‎plugin/assets/css/src/settings/cell.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.material-settings__cell--justify-end {
2+
justify-self: flex-end;
3+
}

‎plugin/assets/css/src/settings/index.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import "./base.css";
2+
@import "./updater.css";
3+
@import "./switch.css";
4+
@import "./cell.css";
5+
@import "./api.css";

‎plugin/assets/css/src/settings/switch.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.material-settings__switch {
2+
align-items: center;
3+
display: flex;
4+
5+
& .mdc-switch {
6+
margin-right: 15px;
7+
}
8+
}

‎plugin/assets/css/src/settings/updater.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.material-settings__updater {
2+
background-color: var(--material-design-settings-background-color);
3+
border-radius: 8px;
4+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
5+
margin-bottom: 15px;
6+
7+
& .material-settings__message {
8+
align-items: center;
9+
color: var(--material-design-settings-error-color);
10+
display: flex;
11+
}
12+
13+
& .material-settings__message-text {
14+
font-size: 16px;
15+
font-weight: 500;
16+
margin-left: 10px;
17+
}
18+
}

0 commit comments

Comments
 (0)