diff options
-rw-r--r-- | package-lock.json | 5 | ||||
-rw-r--r-- | package.json | 1 | ||||
-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 |
7 files changed, 45 insertions, 12 deletions
diff --git a/package-lock.json b/package-lock.json index 67ca6c463..abd4f9266 100644 --- a/package-lock.json +++ b/package-lock.json | |||
@@ -6869,6 +6869,11 @@ | |||
6869 | "integrity": "sha512-iWOUTZu7KQGhErV8JfTQDH5F/M2D0HVd0sexS4Grg4e4RYAiN3c4jfpPqKgfedqeebKcNZBl2z3zlgCtFjpFJQ==", | 6869 | "integrity": "sha512-iWOUTZu7KQGhErV8JfTQDH5F/M2D0HVd0sexS4Grg4e4RYAiN3c4jfpPqKgfedqeebKcNZBl2z3zlgCtFjpFJQ==", |
6870 | "dev": true | 6870 | "dev": true |
6871 | }, | 6871 | }, |
6872 | "hex-to-rgba": { | ||
6873 | "version": "1.0.2", | ||
6874 | "resolved": "https://registry.npmjs.org/hex-to-rgba/-/hex-to-rgba-1.0.2.tgz", | ||
6875 | "integrity": "sha512-fL+4NFccs86iOuDnFl1Mhyn471qTPAkpE7k39+JYGPMB3+S9LoUnauQI2nz6BUb3DpYQCx8RqENbaf8IFdKYOg==" | ||
6876 | }, | ||
6872 | "history": { | 6877 | "history": { |
6873 | "version": "3.3.0", | 6878 | "version": "3.3.0", |
6874 | "resolved": "https://registry.npmjs.org/history/-/history-3.3.0.tgz", | 6879 | "resolved": "https://registry.npmjs.org/history/-/history-3.3.0.tgz", |
diff --git a/package.json b/package.json index 03a584267..63d5139b1 100644 --- a/package.json +++ b/package.json | |||
@@ -46,6 +46,7 @@ | |||
46 | "electron-window-state": "^4.1.0", | 46 | "electron-window-state": "^4.1.0", |
47 | "fs-extra": "7.0.1", | 47 | "fs-extra": "7.0.1", |
48 | "gulp-cli": "1.2.2", | 48 | "gulp-cli": "1.2.2", |
49 | "hex-to-rgba": "1.0.2", | ||
49 | "ini": "^1.3.4", | 50 | "ini": "^1.3.4", |
50 | "jshashes": "^1.0.6", | 51 | "jshashes": "^1.0.6", |
51 | "jsonwebtoken": "^7.4.1", | 52 | "jsonwebtoken": "^7.4.1", |
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); | ||