diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/components/services/content/ServiceWebview.js | 4 | ||||
-rw-r--r-- | src/components/ui/WebviewLoader/index.js | 28 | ||||
-rw-r--r-- | src/components/ui/WebviewLoader/styles.js | 9 | ||||
-rw-r--r-- | src/theme/dark/index.js | 5 | ||||
-rw-r--r-- | src/theme/default/index.js | 5 |
5 files changed, 39 insertions, 12 deletions
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js index 9919163b9..b1a2c0207 100644 --- a/src/components/services/content/ServiceWebview.js +++ b/src/components/services/content/ServiceWebview.js | |||
@@ -89,7 +89,7 @@ export default @observer class ServiceWebview extends Component { | |||
89 | 89 | ||
90 | return ( | 90 | return ( |
91 | <div className={webviewClasses}> | 91 | <div className={webviewClasses}> |
92 | {service.isActive && ( | 92 | {service.isActive && service.isEnabled && ( |
93 | <Fragment> | 93 | <Fragment> |
94 | {service.hasCrashed && ( | 94 | {service.hasCrashed && ( |
95 | <WebviewCrashHandler | 95 | <WebviewCrashHandler |
@@ -100,7 +100,7 @@ export default @observer class ServiceWebview extends Component { | |||
100 | )} | 100 | )} |
101 | {service.isEnabled && service.isLoading && service.isFirstLoad && ( | 101 | {service.isEnabled && service.isLoading && service.isFirstLoad && ( |
102 | <WebviewLoader | 102 | <WebviewLoader |
103 | loaded={!service.isLoading} | 103 | loaded={false} |
104 | name={service.name} | 104 | name={service.name} |
105 | /> | 105 | /> |
106 | )} | 106 | )} |
diff --git a/src/components/ui/WebviewLoader/index.js b/src/components/ui/WebviewLoader/index.js index 950312bbb..ab17199e5 100644 --- a/src/components/ui/WebviewLoader/index.js +++ b/src/components/ui/WebviewLoader/index.js | |||
@@ -1,16 +1,24 @@ | |||
1 | import React 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 | 4 | ||
4 | import FullscreenLoader from '../FullscreenLoader'; | 5 | import FullscreenLoader from '../FullscreenLoader'; |
5 | 6 | ||
6 | const WebviewLoader = ({ name }) => ( | 7 | import styles from './styles'; |
7 | <FullscreenLoader | ||
8 | title={`Loading ${name}`} | ||
9 | /> | ||
10 | ); | ||
11 | 8 | ||
12 | WebviewLoader.propTypes = { | 9 | export default @injectSheet(styles) class WebviewLoader extends Component { |
13 | name: PropTypes.string.isRequired, | 10 | static propTypes = { |
14 | }; | 11 | name: PropTypes.string.isRequired, |
12 | classes: PropTypes.object.isRequired, | ||
13 | } | ||
15 | 14 | ||
16 | export default WebviewLoader; | 15 | render() { |
16 | const { classes, name } = this.props; | ||
17 | return ( | ||
18 | <FullscreenLoader | ||
19 | className={classes.component} | ||
20 | title={`Loading ${name}`} | ||
21 | /> | ||
22 | ); | ||
23 | } | ||
24 | } | ||
diff --git a/src/components/ui/WebviewLoader/styles.js b/src/components/ui/WebviewLoader/styles.js new file mode 100644 index 000000000..dbd75db8a --- /dev/null +++ b/src/components/ui/WebviewLoader/styles.js | |||
@@ -0,0 +1,9 @@ | |||
1 | export default theme => ({ | ||
2 | component: { | ||
3 | background: theme.colorWebviewLoaderBackground, | ||
4 | padding: 20, | ||
5 | width: 'auto', | ||
6 | margin: [0, 'auto'], | ||
7 | borderRadius: 6, | ||
8 | }, | ||
9 | }); | ||
diff --git a/src/theme/dark/index.js b/src/theme/dark/index.js index 76fece134..aafa7cb27 100644 --- a/src/theme/dark/index.js +++ b/src/theme/dark/index.js | |||
@@ -1,3 +1,5 @@ | |||
1 | import hexToRgba from 'hex-to-rgba'; | ||
2 | |||
1 | import * as legacyStyles from '../default/legacy'; | 3 | import * as legacyStyles from '../default/legacy'; |
2 | 4 | ||
3 | export const colorBackground = legacyStyles.darkThemeGrayDarkest; | 5 | export const colorBackground = legacyStyles.darkThemeGrayDarkest; |
@@ -5,3 +7,6 @@ export const colorBackgroundSubscriptionContainer = legacyStyles.themeBrandInfo; | |||
5 | 7 | ||
6 | export const colorHeadline = legacyStyles.darkThemeTextColor; | 8 | export const colorHeadline = legacyStyles.darkThemeTextColor; |
7 | export const colorText = legacyStyles.darkThemeTextColor; | 9 | export const colorText = legacyStyles.darkThemeTextColor; |
10 | |||
11 | // Webview Loader | ||
12 | export const colorWebviewLoaderBackground = hexToRgba(legacyStyles.darkThemeGrayDarkest, 0.5); | ||
diff --git a/src/theme/default/index.js b/src/theme/default/index.js index cdd9aa5e6..9640b1cb0 100644 --- a/src/theme/default/index.js +++ b/src/theme/default/index.js | |||
@@ -1,3 +1,5 @@ | |||
1 | import hexToRgba from 'hex-to-rgba'; | ||
2 | |||
1 | import * as legacyStyles from './legacy'; | 3 | import * as legacyStyles from './legacy'; |
2 | 4 | ||
3 | export const brandPrimary = '#3498db'; | 5 | export const brandPrimary = '#3498db'; |
@@ -20,3 +22,6 @@ export const colorSubscriptionContainerBorder = [1, 'solid', brandPrimary]; | |||
20 | export const colorSubscriptionContainerTitle = brandPrimary; | 22 | export const colorSubscriptionContainerTitle = brandPrimary; |
21 | export const colorSubscriptionContainerActionButtonBackground = brandPrimary; | 23 | export const colorSubscriptionContainerActionButtonBackground = brandPrimary; |
22 | export const colorSubscriptionContainerActionButtonColor = '#FFF'; | 24 | export const colorSubscriptionContainerActionButtonColor = '#FFF'; |
25 | |||
26 | // Webview Loader | ||
27 | export const colorWebviewLoaderBackground = hexToRgba(legacyStyles.themeGrayLighter, 0.8); | ||