Skip to content

Commit 67a5763

Browse files
Mario Aguiarravichdev
Mario Aguiar
authored and
ravichdev
committed
Add settings page
1 parent 1cc77cd commit 67a5763

File tree

24 files changed

+1111
-10
lines changed

24 files changed

+1111
-10
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
"@wordpress/components": "9.4.0",
6060
"@wordpress/compose": "3.12.0",
6161
"@wordpress/data": "4.14.2",
62-
"@wordpress/date": "3.8.0",
62+
"@wordpress/date": "^3.13.1",
6363
"@wordpress/dom": "2.8.0",
6464
"@wordpress/dom-ready": "2.8.0",
6565
"@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: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
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+
& p {
50+
font-size: 16px;
51+
margin: 0;
52+
}
53+
54+
& .material-settings__updates {
55+
margin-top: 24px;
56+
}
57+
58+
& .mdc-button--raised .mdc-circular-progress {
59+
--mdc-theme-primary: #fff;
60+
}
61+
62+
& .mdc-button.is-loading {
63+
text-align: left;
64+
width: 105px;
65+
}
66+
}

‎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+
}

‎plugin/assets/src/settings/components/index.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { __ } from '@wordpress/i18n';
5+
6+
/**
7+
* Internal dependencies
8+
*/
9+
import { SettingsProvider } from '../context';
10+
import Integrations from './integrations';
11+
12+
const Settings = () => {
13+
return (
14+
<SettingsProvider>
15+
<h1 className="mdc-typography--headline3">
16+
{ __( 'Material Settings', 'material-design' ) }
17+
</h1>
18+
19+
<Integrations />
20+
</SettingsProvider>
21+
);
22+
};
23+
24+
export default Settings;

‎plugin/assets/src/settings/components/integrations/api.js‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { useState, useContext } from '@wordpress/element';
5+
import { __ } from '@wordpress/i18n';
6+
import { TextControl } from '@wordpress/components';
7+
8+
/**
9+
* Internal dependencies
10+
*/
11+
import SettingsContext from '../../context';
12+
import { ACTIONS, KEY_PLACEHOLDER } from '../../constants';
13+
import Button from '../../../wizard/components/navigation/button';
14+
import { setApiKey } from '../../utils';
15+
16+
const Api = () => {
17+
const { state, dispatch } = useContext( SettingsContext );
18+
const [ api, setApi ] = useState( null );
19+
const [ isLoading, setIsLoading ] = useState( false );
20+
const isApiOk = 'ok' === state.apiStatus;
21+
22+
const removeApiKey = () => {
23+
setIsLoading( true );
24+
setApi( '' );
25+
26+
setApiKey( api ).then( () => {
27+
setIsLoading( false );
28+
dispatch( { type: ACTIONS.REMOVE_API_KEY } );
29+
} );
30+
};
31+
32+
const activateApiKey = () => {
33+
setIsLoading( true );
34+
35+
setApiKey( api ).then( () => {
36+
setIsLoading( false );
37+
dispatch( { type: ACTIONS.ADD_API_KEY } );
38+
setApi( '' );
39+
} );
40+
};
41+
42+
const handleSubmit = event => {
43+
if ( event.key && 'Enter' === event.key ) {
44+
activateApiKey();
45+
}
46+
};
47+
48+
return (
49+
<div className="material-settings__api mdc-layout-grid">
50+
<div className="mdc-layout-grid__inner">
51+
{ ! isApiOk && (
52+
<TextControl
53+
className="material-settings__api-input mdc-layout-grid__cell"
54+
value={ api }
55+
placeholder={ __( 'Google API Key', 'material-design' ) }
56+
onChange={ value => {
57+
setApi( value );
58+
} }
59+
onKeyPress={ handleSubmit }
60+
/>
61+
) }
62+
63+
{ isApiOk && (
64+
<TextControl
65+
className="material-settings__api-input material-settings__api-input--disabled mdc-layout-grid__cell"
66+
value={ KEY_PLACEHOLDER }
67+
disabled
68+
/>
69+
) }
70+
71+
<div className="mdc-layout-grid__cell">
72+
{ ! isApiOk && (
73+
<Button
74+
style="mdc-button--raised"
75+
text={ __( 'Activate', 'material-design' ) }
76+
onClick={ activateApiKey }
77+
disabled={ ! api }
78+
loading={ isLoading }
79+
/>
80+
) }
81+
82+
{ isApiOk && (
83+
<Button
84+
text={ __( 'Remove', 'material-design' ) }
85+
leadingIcon="delete"
86+
onClick={ removeApiKey }
87+
loading={ isLoading }
88+
/>
89+
) }
90+
</div>
91+
</div>
92+
</div>
93+
);
94+
};
95+
96+
export default Api;

0 commit comments

Comments
 (0)