diff options
author | Stefan Malzner <stefan@adlk.io> | 2018-12-12 11:08:41 +0100 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2018-12-12 11:08:41 +0100 |
commit | 4c2015db267ede5ecdf7fc838e326b7fa49d8195 (patch) | |
tree | 764ab8dd141c9973fdd7ef455cf94f7335cf440e | |
parent | Update changelog (diff) | |
download | ferdium-app-4c2015db267ede5ecdf7fc838e326b7fa49d8195.tar.gz ferdium-app-4c2015db267ede5ecdf7fc838e326b7fa49d8195.tar.zst ferdium-app-4c2015db267ede5ecdf7fc838e326b7fa49d8195.zip |
Improve loader themeing
-rw-r--r-- | src/components/ui/AppLoader/index.js | 8 | ||||
-rw-r--r-- | src/components/ui/FullscreenLoader/index.js | 71 | ||||
-rw-r--r-- | src/components/ui/WebviewLoader/index.js | 3 | ||||
-rw-r--r-- | src/containers/layout/AppLayoutContainer.js | 4 | ||||
-rw-r--r-- | src/theme/dark/index.js | 3 | ||||
-rw-r--r-- | src/theme/default/index.js | 4 |
6 files changed, 64 insertions, 29 deletions
diff --git a/src/components/ui/AppLoader/index.js b/src/components/ui/AppLoader/index.js index 1b9d044f4..61053f6d1 100644 --- a/src/components/ui/AppLoader/index.js +++ b/src/components/ui/AppLoader/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 injectSheet from 'react-jss'; | 3 | import injectSheet, { withTheme } from 'react-jss'; |
4 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
5 | 5 | ||
6 | import FullscreenLoader from '../FullscreenLoader'; | 6 | import FullscreenLoader from '../FullscreenLoader'; |
@@ -19,9 +19,10 @@ const textList = shuffleArray([ | |||
19 | 'Traveling through space & time', | 19 | 'Traveling through space & time', |
20 | ]); | 20 | ]); |
21 | 21 | ||
22 | export default @injectSheet(styles) class AppLoader extends Component { | 22 | export default @injectSheet(styles) @withTheme class AppLoader extends Component { |
23 | static propTypes = { | 23 | static propTypes = { |
24 | classes: PropTypes.object.isRequired, | 24 | classes: PropTypes.object.isRequired, |
25 | theme: PropTypes.object.isRequired, | ||
25 | } | 26 | } |
26 | 27 | ||
27 | state = { | 28 | state = { |
@@ -43,13 +44,14 @@ export default @injectSheet(styles) class AppLoader extends Component { | |||
43 | } | 44 | } |
44 | 45 | ||
45 | render() { | 46 | render() { |
46 | const { classes } = this.props; | 47 | const { classes, theme } = this.props; |
47 | const { step } = this.state; | 48 | const { step } = this.state; |
48 | 49 | ||
49 | return ( | 50 | return ( |
50 | <FullscreenLoader | 51 | <FullscreenLoader |
51 | title="Franz" | 52 | title="Franz" |
52 | className={classes.component} | 53 | className={classes.component} |
54 | spinnerColor={theme.colorAppLoaderSpinner} | ||
53 | > | 55 | > |
54 | {textList.map((text, i) => ( | 56 | {textList.map((text, i) => ( |
55 | <span | 57 | <span |
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js index e0a24a527..6ecf4d395 100644 --- a/src/components/ui/FullscreenLoader/index.js +++ b/src/components/ui/FullscreenLoader/index.js | |||
@@ -1,29 +1,56 @@ | |||
1 | import React from 'react'; | 1 | import React, { Component } from 'react'; |
2 | import injectSheet from 'react-jss'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer } from 'mobx-react'; | ||
4 | import injectSheet, { withTheme } from 'react-jss'; | ||
3 | import classnames from 'classnames'; | 5 | import classnames from 'classnames'; |
4 | import { inject } from 'mobx-react'; | ||
5 | 6 | ||
6 | import Loader from '../Loader'; | 7 | import Loader from '../Loader'; |
7 | 8 | ||
8 | import styles from './styles'; | 9 | import styles from './styles'; |
9 | 10 | ||
10 | export default inject('stores')(injectSheet(styles)(({ | 11 | export default @observer @withTheme @injectSheet(styles) class FullscreenLoader extends Component { |
11 | stores, classes, className, title, children, | 12 | static propTypes = { |
12 | }) => ( | 13 | className: PropTypes.string, |
13 | <div className={classes.wrapper}> | 14 | title: PropTypes.string.isRequired, |
14 | <div | 15 | classes: PropTypes.object.isRequired, |
15 | className={classnames({ | 16 | theme: PropTypes.object.isRequired, |
16 | [`${classes.component}`]: true, | 17 | spinnerColor: PropTypes.string, |
17 | [`${className}`]: className, | 18 | children: PropTypes.node, |
18 | })} | 19 | } |
19 | > | 20 | |
20 | <h1 className={classes.title}>{title}</h1> | 21 | static defaultProps = { |
21 | <Loader color={stores.settings.app.darkMode ? '#FFF' : '#000'} /> | 22 | className: null, |
22 | {children && ( | 23 | spinnerColor: null, |
23 | <div className={classes.content}> | 24 | children: null, |
24 | {children} | 25 | } |
26 | |||
27 | render() { | ||
28 | const { | ||
29 | classes, | ||
30 | title, | ||
31 | children, | ||
32 | spinnerColor, | ||
33 | className, | ||
34 | theme, | ||
35 | } = this.props; | ||
36 | |||
37 | return ( | ||
38 | <div className={classes.wrapper}> | ||
39 | <div | ||
40 | className={classnames({ | ||
41 | [`${classes.component}`]: true, | ||
42 | [`${className}`]: className, | ||
43 | })} | ||
44 | > | ||
45 | <h1 className={classes.title}>{title}</h1> | ||
46 | <Loader color={spinnerColor || theme.colorFullscreenLoaderSpinner} /> | ||
47 | {children && ( | ||
48 | <div className={classes.content}> | ||
49 | {children} | ||
50 | </div> | ||
51 | )} | ||
25 | </div> | 52 | </div> |
26 | )} | 53 | </div> |
27 | </div> | 54 | ); |
28 | </div> | 55 | } |
29 | ))); | 56 | } |
diff --git a/src/components/ui/WebviewLoader/index.js b/src/components/ui/WebviewLoader/index.js index ab17199e5..3a3dbbe49 100644 --- a/src/components/ui/WebviewLoader/index.js +++ b/src/components/ui/WebviewLoader/index.js | |||
@@ -1,12 +1,13 @@ | |||
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 injectSheet from 'react-jss'; | 4 | import injectSheet from 'react-jss'; |
4 | 5 | ||
5 | import FullscreenLoader from '../FullscreenLoader'; | 6 | import FullscreenLoader from '../FullscreenLoader'; |
6 | 7 | ||
7 | import styles from './styles'; | 8 | import styles from './styles'; |
8 | 9 | ||
9 | export default @injectSheet(styles) class WebviewLoader extends Component { | 10 | export default @observer @injectSheet(styles) class WebviewLoader extends Component { |
10 | static propTypes = { | 11 | static propTypes = { |
11 | name: PropTypes.string.isRequired, | 12 | name: PropTypes.string.isRequired, |
12 | classes: PropTypes.object.isRequired, | 13 | classes: PropTypes.object.isRequired, |
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js index 455df10d7..430b49b55 100644 --- a/src/containers/layout/AppLayoutContainer.js +++ b/src/containers/layout/AppLayoutContainer.js | |||
@@ -75,7 +75,9 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e | |||
75 | 75 | ||
76 | if (isLoadingFeatures || isLoadingServices) { | 76 | if (isLoadingFeatures || isLoadingServices) { |
77 | return ( | 77 | return ( |
78 | <AppLoader /> | 78 | <ThemeProvider theme={ui.theme}> |
79 | <AppLoader /> | ||
80 | </ThemeProvider> | ||
79 | ); | 81 | ); |
80 | } | 82 | } |
81 | 83 | ||
diff --git a/src/theme/dark/index.js b/src/theme/dark/index.js index aafa7cb27..fb1713184 100644 --- a/src/theme/dark/index.js +++ b/src/theme/dark/index.js | |||
@@ -8,5 +8,6 @@ export const colorBackgroundSubscriptionContainer = legacyStyles.themeBrandInfo; | |||
8 | export const colorHeadline = legacyStyles.darkThemeTextColor; | 8 | export const colorHeadline = legacyStyles.darkThemeTextColor; |
9 | export const colorText = legacyStyles.darkThemeTextColor; | 9 | export const colorText = legacyStyles.darkThemeTextColor; |
10 | 10 | ||
11 | // Webview Loader | 11 | // Loader |
12 | export const colorFullscreenLoaderSpinner = '#FFF'; | ||
12 | export const colorWebviewLoaderBackground = hexToRgba(legacyStyles.darkThemeGrayDarkest, 0.5); | 13 | export const colorWebviewLoaderBackground = hexToRgba(legacyStyles.darkThemeGrayDarkest, 0.5); |
diff --git a/src/theme/default/index.js b/src/theme/default/index.js index 9640b1cb0..37827621c 100644 --- a/src/theme/default/index.js +++ b/src/theme/default/index.js | |||
@@ -23,5 +23,7 @@ export const colorSubscriptionContainerTitle = brandPrimary; | |||
23 | export const colorSubscriptionContainerActionButtonBackground = brandPrimary; | 23 | export const colorSubscriptionContainerActionButtonBackground = brandPrimary; |
24 | export const colorSubscriptionContainerActionButtonColor = '#FFF'; | 24 | export const colorSubscriptionContainerActionButtonColor = '#FFF'; |
25 | 25 | ||
26 | // Webview Loader | 26 | // Loader |
27 | export const colorAppLoaderSpinner = '#FFF'; | ||
28 | export const colorFullscreenLoaderSpinner = legacyStyles.themeGrayDark; | ||
27 | export const colorWebviewLoaderBackground = hexToRgba(legacyStyles.themeGrayLighter, 0.8); | 29 | export const colorWebviewLoaderBackground = hexToRgba(legacyStyles.themeGrayLighter, 0.8); |