diff options
author | 2018-11-16 21:20:59 +0100 | |
---|---|---|
committer | 2018-11-16 21:20:59 +0100 | |
commit | d6ea85329d6dd84afaf9603e860a6ba1c0ddda8b (patch) | |
tree | 19258d8ee0c5a34f990a3931266fe3f905105e59 /src | |
parent | Fix systemPreferences.isDarkMode call (diff) | |
download | ferdium-app-d6ea85329d6dd84afaf9603e860a6ba1c0ddda8b.tar.gz ferdium-app-d6ea85329d6dd84afaf9603e860a6ba1c0ddda8b.tar.zst ferdium-app-d6ea85329d6dd84afaf9603e860a6ba1c0ddda8b.zip |
Add windows title bar dark mode styling & add titlebar to auth
Diffstat (limited to 'src')
-rw-r--r-- | src/components/auth/AuthLayout.js | 92 | ||||
-rw-r--r-- | src/containers/auth/AuthLayoutContainer.js | 1 | ||||
-rw-r--r-- | src/styles/auth.scss | 2 | ||||
-rw-r--r-- | src/styles/button.scss | 1 | ||||
-rw-r--r-- | src/styles/title-bar.scss | 42 |
5 files changed, 94 insertions, 44 deletions
diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.js index 032588471..4fb0e6a59 100644 --- a/src/components/auth/AuthLayout.js +++ b/src/components/auth/AuthLayout.js | |||
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; | |||
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import { RouteTransition } from 'react-router-transition'; | 4 | import { RouteTransition } from 'react-router-transition'; |
5 | import { intlShape } from 'react-intl'; | 5 | import { intlShape } from 'react-intl'; |
6 | import { TitleBar } from 'electron-react-titlebar'; | ||
6 | 7 | ||
7 | import Link from '../ui/Link'; | 8 | import Link from '../ui/Link'; |
8 | import InfoBar from '../ui/InfoBar'; | 9 | import InfoBar from '../ui/InfoBar'; |
@@ -10,6 +11,8 @@ import InfoBar from '../ui/InfoBar'; | |||
10 | import { oneOrManyChildElements, globalError as globalErrorPropType } from '../../prop-types'; | 11 | import { oneOrManyChildElements, globalError as globalErrorPropType } from '../../prop-types'; |
11 | import globalMessages from '../../i18n/globalMessages'; | 12 | import globalMessages from '../../i18n/globalMessages'; |
12 | 13 | ||
14 | import { isWindows } from '../../environment'; | ||
15 | |||
13 | export default @observer class AuthLayout extends Component { | 16 | export default @observer class AuthLayout extends Component { |
14 | static propTypes = { | 17 | static propTypes = { |
15 | children: oneOrManyChildElements.isRequired, | 18 | children: oneOrManyChildElements.isRequired, |
@@ -19,6 +22,7 @@ export default @observer class AuthLayout extends Component { | |||
19 | isAPIHealthy: PropTypes.bool.isRequired, | 22 | isAPIHealthy: PropTypes.bool.isRequired, |
20 | retryHealthCheck: PropTypes.func.isRequired, | 23 | retryHealthCheck: PropTypes.func.isRequired, |
21 | isHealthCheckLoading: PropTypes.bool.isRequired, | 24 | isHealthCheckLoading: PropTypes.bool.isRequired, |
25 | isFullScreen: PropTypes.bool.isRequired, | ||
22 | darkMode: PropTypes.bool.isRequired, | 26 | darkMode: PropTypes.bool.isRequired, |
23 | }; | 27 | }; |
24 | 28 | ||
@@ -35,54 +39,58 @@ export default @observer class AuthLayout extends Component { | |||
35 | isAPIHealthy, | 39 | isAPIHealthy, |
36 | retryHealthCheck, | 40 | retryHealthCheck, |
37 | isHealthCheckLoading, | 41 | isHealthCheckLoading, |
42 | isFullScreen, | ||
38 | darkMode, | 43 | darkMode, |
39 | } = this.props; | 44 | } = this.props; |
40 | const { intl } = this.context; | 45 | const { intl } = this.context; |
41 | 46 | ||
42 | return ( | 47 | return ( |
43 | <div className={`auth${darkMode ? ' theme__dark' : ''}`}> | 48 | <div className={darkMode ? 'theme__dark' : ''}> |
44 | {!isOnline && ( | 49 | {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon={'assets/images/logo.svg'} />} |
45 | <InfoBar | 50 | <div className={'auth'}> |
46 | type="warning" | 51 | {!isOnline && ( |
47 | > | 52 | <InfoBar |
48 | <span className="mdi mdi-flash" /> | 53 | type="warning" |
49 | {intl.formatMessage(globalMessages.notConnectedToTheInternet)} | 54 | > |
50 | </InfoBar> | 55 | <span className="mdi mdi-flash" /> |
51 | )} | 56 | {intl.formatMessage(globalMessages.notConnectedToTheInternet)} |
52 | {isOnline && !isAPIHealthy && ( | 57 | </InfoBar> |
53 | <InfoBar | 58 | )} |
54 | type="danger" | 59 | {isOnline && !isAPIHealthy && ( |
55 | ctaLabel="Try again" | 60 | <InfoBar |
56 | ctaLoading={isHealthCheckLoading} | 61 | type="danger" |
57 | sticky | 62 | ctaLabel="Try again" |
58 | onClick={retryHealthCheck} | 63 | ctaLoading={isHealthCheckLoading} |
59 | > | 64 | sticky |
60 | <span className="mdi mdi-flash" /> | 65 | onClick={retryHealthCheck} |
61 | {intl.formatMessage(globalMessages.APIUnhealthy)} | 66 | > |
62 | </InfoBar> | 67 | <span className="mdi mdi-flash" /> |
63 | )} | 68 | {intl.formatMessage(globalMessages.APIUnhealthy)} |
64 | <div className="auth__layout"> | 69 | </InfoBar> |
65 | <RouteTransition | 70 | )} |
66 | pathname={pathname} | 71 | <div className="auth__layout"> |
67 | atEnter={{ opacity: 0 }} | 72 | <RouteTransition |
68 | atLeave={{ opacity: 0 }} | 73 | pathname={pathname} |
69 | atActive={{ opacity: 1 }} | 74 | atEnter={{ opacity: 0 }} |
70 | mapStyles={styles => ({ | 75 | atLeave={{ opacity: 0 }} |
71 | transform: `translateX(${styles.translateX}%)`, | 76 | atActive={{ opacity: 1 }} |
72 | opacity: styles.opacity, | 77 | mapStyles={styles => ({ |
73 | })} | 78 | transform: `translateX(${styles.translateX}%)`, |
74 | component="span" | 79 | opacity: styles.opacity, |
75 | > | 80 | })} |
76 | {/* Inject globalError into children */} | 81 | component="span" |
77 | {React.cloneElement(children, { | 82 | > |
78 | error, | 83 | {/* Inject globalError into children */} |
79 | })} | 84 | {React.cloneElement(children, { |
80 | </RouteTransition> | 85 | error, |
86 | })} | ||
87 | </RouteTransition> | ||
88 | </div> | ||
89 | {/* </div> */} | ||
90 | <Link to="https://adlk.io" className="auth__adlk" target="_blank"> | ||
91 | <img src="./assets/images/adlk.svg" alt="" /> | ||
92 | </Link> | ||
81 | </div> | 93 | </div> |
82 | {/* </div> */} | ||
83 | <Link to="https://adlk.io" className="auth__adlk" target="_blank"> | ||
84 | <img src="./assets/images/adlk.svg" alt="" /> | ||
85 | </Link> | ||
86 | </div> | 94 | </div> |
87 | ); | 95 | ); |
88 | } | 96 | } |
diff --git a/src/containers/auth/AuthLayoutContainer.js b/src/containers/auth/AuthLayoutContainer.js index a0618e012..e1a780d1e 100644 --- a/src/containers/auth/AuthLayoutContainer.js +++ b/src/containers/auth/AuthLayoutContainer.js | |||
@@ -26,6 +26,7 @@ export default @inject('stores', 'actions') @observer class AuthLayoutContainer | |||
26 | isAPIHealthy={!stores.app.healthCheckRequest.isError} | 26 | isAPIHealthy={!stores.app.healthCheckRequest.isError} |
27 | retryHealthCheck={actions.app.healthCheck} | 27 | retryHealthCheck={actions.app.healthCheck} |
28 | isHealthCheckLoading={stores.app.healthCheckRequest.isExecuting} | 28 | isHealthCheckLoading={stores.app.healthCheckRequest.isExecuting} |
29 | isFullScreen={stores.app.isFullscreen} | ||
29 | darkMode={stores.app.isSystemDarkModeEnabled} | 30 | darkMode={stores.app.isSystemDarkModeEnabled} |
30 | > | 31 | > |
31 | {children} | 32 | {children} |
diff --git a/src/styles/auth.scss b/src/styles/auth.scss index 4cdf6ccd5..54e264dc6 100644 --- a/src/styles/auth.scss +++ b/src/styles/auth.scss | |||
@@ -1,6 +1,6 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .theme__dark.auth { | 3 | .theme__dark .auth { |
4 | background: $dark-theme-gray-darkest; | 4 | background: $dark-theme-gray-darkest; |
5 | 5 | ||
6 | .auth__container { | 6 | .auth__container { |
diff --git a/src/styles/button.scss b/src/styles/button.scss index 0053db4d0..38e487b47 100644 --- a/src/styles/button.scss +++ b/src/styles/button.scss | |||
@@ -1,6 +1,5 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | |||
4 | .theme__dark .franz-form__button { | 3 | .theme__dark .franz-form__button { |
5 | background: $theme-brand-primary; | 4 | background: $theme-brand-primary; |
6 | color: $dark-theme-text-color; | 5 | color: $dark-theme-text-color; |
diff --git a/src/styles/title-bar.scss b/src/styles/title-bar.scss index 5c7b0bcdf..885eb94c4 100644 --- a/src/styles/title-bar.scss +++ b/src/styles/title-bar.scss | |||
@@ -1,3 +1,45 @@ | |||
1 | @import './config.scss'; | ||
2 | |||
3 | .theme__dark #electron-app-title-bar { | ||
4 | background: $dark-theme-gray-darker; | ||
5 | |||
6 | .toolbar-dropdown { | ||
7 | &.open > .toolbar-button > button { | ||
8 | background: $dark-theme-gray-light; | ||
9 | color: $dark-theme-gray-lightest; | ||
10 | } | ||
11 | |||
12 | &:not(.open) { | ||
13 | .menu-item .menu-label { opacity: 1; } | ||
14 | > .toolbar-button > button:hover { | ||
15 | background: $dark-theme-gray-darkest; | ||
16 | } | ||
17 | } | ||
18 | } | ||
19 | |||
20 | #app-menu-bar #foldout-container .foldout { | ||
21 | color: $dark-theme-gray-lightest; | ||
22 | |||
23 | .menu-pane { | ||
24 | background: $dark-theme-gray-light; | ||
25 | |||
26 | .menu-item { | ||
27 | .accelerator { | ||
28 | color: lighten($dark-theme-gray-light, 20%); | ||
29 | } | ||
30 | } | ||
31 | |||
32 | hr { | ||
33 | border-color: $dark-theme-gray-lighter; | ||
34 | } | ||
35 | } | ||
36 | } | ||
37 | |||
38 | .list .ReactVirtualized__Grid { | ||
39 | background: $dark-theme-gray-light; | ||
40 | } | ||
41 | } | ||
42 | |||
1 | #electron-app-title-bar { | 43 | #electron-app-title-bar { |
2 | background: $theme-gray-lightest; | 44 | background: $theme-gray-lightest; |
3 | border-bottom: 0; | 45 | border-bottom: 0; |