diff options
author | 2019-10-17 16:22:11 +0200 | |
---|---|---|
committer | 2019-10-17 16:22:11 +0200 | |
commit | 942466eb686c480133e1b0b8b9a2b975098b5bc4 (patch) | |
tree | 297a71efa4051949a4f2c411262558954c8c7d3a /src/components | |
parent | Merge pull request #121 from getferdi/l10n_develop (diff) | |
download | ferdium-app-942466eb686c480133e1b0b8b9a2b975098b5bc4.tar.gz ferdium-app-942466eb686c480133e1b0b8b9a2b975098b5bc4.tar.zst ferdium-app-942466eb686c480133e1b0b8b9a2b975098b5bc4.zip |
Implement #120v5.4.0-beta.1
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/settings/settings/EditSettingsForm.js | 10 | ||||
-rw-r--r-- | src/components/ui/Button.js | 13 | ||||
-rw-r--r-- | src/components/ui/FullscreenLoader/index.js | 19 | ||||
-rw-r--r-- | src/components/ui/FullscreenLoader/styles.js | 1 | ||||
-rw-r--r-- | src/components/ui/Loader.js | 15 |
5 files changed, 48 insertions, 10 deletions
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js index b01368f69..a826479ad 100644 --- a/src/components/settings/settings/EditSettingsForm.js +++ b/src/components/settings/settings/EditSettingsForm.js | |||
@@ -79,6 +79,10 @@ const messages = defineMessages({ | |||
79 | id: 'settings.app.headlineAppearance', | 79 | id: 'settings.app.headlineAppearance', |
80 | defaultMessage: '!!!Appearance', | 80 | defaultMessage: '!!!Appearance', |
81 | }, | 81 | }, |
82 | accentColorInfo: { | ||
83 | id: 'settings.app.accentColorInfo', | ||
84 | defaultMessage: '!!!Write your accent color in a CSS-compatible format. (Default: #7367f0)', | ||
85 | }, | ||
82 | headlineAdvanced: { | 86 | headlineAdvanced: { |
83 | id: 'settings.app.headlineAdvanced', | 87 | id: 'settings.app.headlineAdvanced', |
84 | defaultMessage: '!!!Advanced', | 88 | defaultMessage: '!!!Advanced', |
@@ -373,6 +377,12 @@ export default @observer class EditSettingsForm extends Component { | |||
373 | <Toggle field={form.$('showDisabledServices')} /> | 377 | <Toggle field={form.$('showDisabledServices')} /> |
374 | <Toggle field={form.$('showMessageBadgeWhenMuted')} /> | 378 | <Toggle field={form.$('showMessageBadgeWhenMuted')} /> |
375 | <Toggle field={form.$('darkMode')} /> | 379 | <Toggle field={form.$('darkMode')} /> |
380 | <Input | ||
381 | placeholder="Accent Color" | ||
382 | onChange={e => this.submit(e)} | ||
383 | field={form.$('accentColor')} | ||
384 | /> | ||
385 | <p>{intl.formatMessage(messages.accentColorInfo)}</p> | ||
376 | 386 | ||
377 | {/* Language */} | 387 | {/* Language */} |
378 | <h2 id="language">{intl.formatMessage(messages.headlineLanguage)}</h2> | 388 | <h2 id="language">{intl.formatMessage(messages.headlineLanguage)}</h2> |
diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js index e2d7cea83..f46fd34ea 100644 --- a/src/components/ui/Button.js +++ b/src/components/ui/Button.js | |||
@@ -1,10 +1,10 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer } from 'mobx-react'; | 3 | import { observer, inject } from 'mobx-react'; |
4 | import Loader from 'react-loader'; | 4 | import Loader from 'react-loader'; |
5 | import classnames from 'classnames'; | 5 | import classnames from 'classnames'; |
6 | 6 | ||
7 | export default @observer class Button extends Component { | 7 | export default @observer @inject('stores') class Button extends Component { |
8 | static propTypes = { | 8 | static propTypes = { |
9 | className: PropTypes.string, | 9 | className: PropTypes.string, |
10 | label: PropTypes.string.isRequired, | 10 | label: PropTypes.string.isRequired, |
@@ -14,6 +14,13 @@ export default @observer class Button extends Component { | |||
14 | buttonType: PropTypes.string, | 14 | buttonType: PropTypes.string, |
15 | loaded: PropTypes.bool, | 15 | loaded: PropTypes.bool, |
16 | htmlForm: PropTypes.string, | 16 | htmlForm: PropTypes.string, |
17 | stores: PropTypes.shape({ | ||
18 | settings: PropTypes.shape({ | ||
19 | app: PropTypes.shape({ | ||
20 | accentColor: PropTypes.string.isRequired, | ||
21 | }).isRequired, | ||
22 | }).isRequired, | ||
23 | }).isRequired, | ||
17 | }; | 24 | }; |
18 | 25 | ||
19 | static defaultProps = { | 26 | static defaultProps = { |
@@ -69,7 +76,7 @@ export default @observer class Button extends Component { | |||
69 | loaded={loaded} | 76 | loaded={loaded} |
70 | lines={10} | 77 | lines={10} |
71 | scale={0.4} | 78 | scale={0.4} |
72 | color={buttonType !== 'secondary' ? '#FFF' : '#7367F0'} | 79 | color={buttonType !== 'secondary' ? '#FFF' : this.props.stores.settings.app.accentColor} |
73 | component="span" | 80 | component="span" |
74 | /> | 81 | /> |
75 | {label} | 82 | {label} |
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js index 06dab1eb6..334bb6c4a 100644 --- a/src/components/ui/FullscreenLoader/index.js +++ b/src/components/ui/FullscreenLoader/index.js | |||
@@ -1,6 +1,6 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer } from 'mobx-react'; | 3 | import { observer, inject } from 'mobx-react'; |
4 | import injectSheet, { withTheme } from 'react-jss'; | 4 | import injectSheet, { withTheme } from 'react-jss'; |
5 | import classnames from 'classnames'; | 5 | import classnames from 'classnames'; |
6 | 6 | ||
@@ -8,7 +8,7 @@ import Loader from '../Loader'; | |||
8 | 8 | ||
9 | import styles from './styles'; | 9 | import styles from './styles'; |
10 | 10 | ||
11 | export default @observer @withTheme @injectSheet(styles) class FullscreenLoader extends Component { | 11 | export default @observer @inject('stores') @withTheme @injectSheet(styles) class FullscreenLoader extends Component { |
12 | static propTypes = { | 12 | static propTypes = { |
13 | className: PropTypes.string, | 13 | className: PropTypes.string, |
14 | title: PropTypes.string.isRequired, | 14 | title: PropTypes.string.isRequired, |
@@ -16,6 +16,13 @@ export default @observer @withTheme @injectSheet(styles) class FullscreenLoader | |||
16 | theme: PropTypes.object.isRequired, | 16 | theme: PropTypes.object.isRequired, |
17 | spinnerColor: PropTypes.string, | 17 | spinnerColor: PropTypes.string, |
18 | children: PropTypes.node, | 18 | children: PropTypes.node, |
19 | stores: PropTypes.shape({ | ||
20 | settings: PropTypes.shape({ | ||
21 | app: PropTypes.shape({ | ||
22 | accentColor: PropTypes.string.isRequired, | ||
23 | }).isRequired, | ||
24 | }).isRequired, | ||
25 | }).isRequired, | ||
19 | }; | 26 | }; |
20 | 27 | ||
21 | static defaultProps = { | 28 | static defaultProps = { |
@@ -32,10 +39,16 @@ export default @observer @withTheme @injectSheet(styles) class FullscreenLoader | |||
32 | spinnerColor, | 39 | spinnerColor, |
33 | className, | 40 | className, |
34 | theme, | 41 | theme, |
42 | stores, | ||
35 | } = this.props; | 43 | } = this.props; |
36 | 44 | ||
37 | return ( | 45 | return ( |
38 | <div className={classes.wrapper}> | 46 | <div |
47 | className={classes.wrapper} | ||
48 | style={{ | ||
49 | background: stores.app.accentColor, | ||
50 | }} | ||
51 | > | ||
39 | <div | 52 | <div |
40 | className={classnames({ | 53 | className={classnames({ |
41 | [`${classes.component}`]: true, | 54 | [`${classes.component}`]: true, |
diff --git a/src/components/ui/FullscreenLoader/styles.js b/src/components/ui/FullscreenLoader/styles.js index d516781a8..64d24e4ce 100644 --- a/src/components/ui/FullscreenLoader/styles.js +++ b/src/components/ui/FullscreenLoader/styles.js | |||
@@ -4,7 +4,6 @@ export default { | |||
4 | alignItems: 'center', | 4 | alignItems: 'center', |
5 | position: 'absolute', | 5 | position: 'absolute', |
6 | width: '100%', | 6 | width: '100%', |
7 | background: 'linear-gradient( 135deg, #CE9FFC 10%, #7367F0 100%)', | ||
8 | }, | 7 | }, |
9 | component: { | 8 | component: { |
10 | width: '100%', | 9 | width: '100%', |
diff --git a/src/components/ui/Loader.js b/src/components/ui/Loader.js index de8769b6c..627749273 100644 --- a/src/components/ui/Loader.js +++ b/src/components/ui/Loader.js | |||
@@ -1,22 +1,30 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component } from 'react'; |
2 | import { observer, inject } from 'mobx-react'; | ||
2 | import PropTypes from 'prop-types'; | 3 | import PropTypes from 'prop-types'; |
3 | import Loader from 'react-loader'; | 4 | import Loader from 'react-loader'; |
4 | 5 | ||
5 | import { oneOrManyChildElements } from '../../prop-types'; | 6 | import { oneOrManyChildElements } from '../../prop-types'; |
6 | 7 | ||
7 | export default class LoaderComponent extends Component { | 8 | export default @observer @inject('stores') class LoaderComponent extends Component { |
8 | static propTypes = { | 9 | static propTypes = { |
9 | children: oneOrManyChildElements, | 10 | children: oneOrManyChildElements, |
10 | loaded: PropTypes.bool, | 11 | loaded: PropTypes.bool, |
11 | className: PropTypes.string, | 12 | className: PropTypes.string, |
12 | color: PropTypes.string, | 13 | color: PropTypes.string, |
14 | stores: PropTypes.shape({ | ||
15 | settings: PropTypes.shape({ | ||
16 | app: PropTypes.shape({ | ||
17 | accentColor: PropTypes.string.isRequired, | ||
18 | }).isRequired, | ||
19 | }).isRequired, | ||
20 | }).isRequired, | ||
13 | }; | 21 | }; |
14 | 22 | ||
15 | static defaultProps = { | 23 | static defaultProps = { |
16 | children: null, | 24 | children: null, |
17 | loaded: false, | 25 | loaded: false, |
18 | className: '', | 26 | className: '', |
19 | color: '#7367F0', | 27 | color: 'ACCENT', |
20 | }; | 28 | }; |
21 | 29 | ||
22 | render() { | 30 | render() { |
@@ -24,9 +32,10 @@ export default class LoaderComponent extends Component { | |||
24 | children, | 32 | children, |
25 | loaded, | 33 | loaded, |
26 | className, | 34 | className, |
27 | color, | ||
28 | } = this.props; | 35 | } = this.props; |
29 | 36 | ||
37 | const color = this.props.color !== 'ACCENT' ? this.props.color : this.props.stores.settings.app.accentColor; | ||
38 | |||
30 | return ( | 39 | return ( |
31 | <Loader | 40 | <Loader |
32 | loaded={loaded} | 41 | loaded={loaded} |