diff options
author | Amine Mouafik <amine@mouafik.fr> | 2019-08-05 19:14:23 +0700 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-08-05 19:14:23 +0700 |
commit | f927ed93fa0b3195edd017ccef2b761e508b8247 (patch) | |
tree | d7ec95624bfc40ddeb19f4b7cabd37cb5d1ec457 /src | |
parent | Merge remote-tracking branch 'upstream/master' (diff) | |
download | ferdium-app-f927ed93fa0b3195edd017ccef2b761e508b8247.tar.gz ferdium-app-f927ed93fa0b3195edd017ccef2b761e508b8247.tar.zst ferdium-app-f927ed93fa0b3195edd017ccef2b761e508b8247.zip |
Update AppLayout.js
Diffstat (limited to 'src')
-rw-r--r-- | src/components/layout/AppLayout.js | 96 |
1 files changed, 43 insertions, 53 deletions
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js index 5edf96523..ac07d91fc 100644 --- a/src/components/layout/AppLayout.js +++ b/src/components/layout/AppLayout.js | |||
@@ -1,21 +1,22 @@ | |||
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, PropTypes as MobxPropTypes } from "mobx-react"; | 3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; |
4 | import { defineMessages, intlShape } from "react-intl"; | 4 | import { defineMessages, intlShape } from 'react-intl'; |
5 | import { TitleBar } from "electron-react-titlebar"; | 5 | import { TitleBar } from 'electron-react-titlebar'; |
6 | import injectSheet from "react-jss"; | 6 | import injectSheet from 'react-jss'; |
7 | 7 | ||
8 | import InfoBar from "../ui/InfoBar"; | 8 | import InfoBar from '../ui/InfoBar'; |
9 | import { Component as BasicAuth } from "../../features/basicAuth"; | 9 | import { Component as DelayApp } from '../../features/delayApp'; |
10 | import { Component as ShareFranz } from "../../features/shareFranz"; | 10 | import { Component as BasicAuth } from '../../features/basicAuth'; |
11 | import ErrorBoundary from "../util/ErrorBoundary"; | 11 | import { Component as ShareFranz } from '../../features/shareFranz'; |
12 | import ErrorBoundary from '../util/ErrorBoundary'; | ||
12 | 13 | ||
13 | // import globalMessages from '../../i18n/globalMessages'; | 14 | // import globalMessages from '../../i18n/globalMessages'; |
14 | 15 | ||
15 | import { isWindows } from "../../environment"; | 16 | import { isWindows } from '../../environment'; |
16 | import WorkspaceSwitchingIndicator from "../../features/workspaces/components/WorkspaceSwitchingIndicator"; | 17 | import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator'; |
17 | import { workspaceStore } from "../../features/workspaces"; | 18 | import { workspaceStore } from '../../features/workspaces'; |
18 | import AppUpdateInfoBar from "../AppUpdateInfoBar"; | 19 | import AppUpdateInfoBar from '../AppUpdateInfoBar'; |
19 | 20 | ||
20 | function createMarkup(HTMLString) { | 21 | function createMarkup(HTMLString) { |
21 | return { __html: HTMLString }; | 22 | return { __html: HTMLString }; |
@@ -23,33 +24,30 @@ function createMarkup(HTMLString) { | |||
23 | 24 | ||
24 | const messages = defineMessages({ | 25 | const messages = defineMessages({ |
25 | servicesUpdated: { | 26 | servicesUpdated: { |
26 | id: "infobar.servicesUpdated", | 27 | id: 'infobar.servicesUpdated', |
27 | defaultMessage: "!!!Your services have been updated." | 28 | defaultMessage: '!!!Your services have been updated.', |
28 | }, | 29 | }, |
29 | buttonReloadServices: { | 30 | buttonReloadServices: { |
30 | id: "infobar.buttonReloadServices", | 31 | id: 'infobar.buttonReloadServices', |
31 | defaultMessage: "!!!Reload services" | 32 | defaultMessage: '!!!Reload services', |
32 | }, | 33 | }, |
33 | requiredRequestsFailed: { | 34 | requiredRequestsFailed: { |
34 | id: "infobar.requiredRequestsFailed", | 35 | id: 'infobar.requiredRequestsFailed', |
35 | defaultMessage: "!!!Could not load services and user information" | 36 | defaultMessage: '!!!Could not load services and user information', |
36 | } | 37 | }, |
37 | }); | 38 | }); |
38 | 39 | ||
39 | const styles = theme => ({ | 40 | const styles = theme => ({ |
40 | appContent: { | 41 | appContent: { |
41 | width: `calc(100% + ${theme.workspaces.drawer.width}px)`, | 42 | width: `calc(100% + ${theme.workspaces.drawer.width}px)`, |
42 | transition: "transform 0.5s ease", | 43 | transition: 'transform 0.5s ease', |
43 | transform() { | 44 | transform() { |
44 | return workspaceStore.isWorkspaceDrawerOpen | 45 | return workspaceStore.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaces.drawer.width}px)`; |
45 | ? "translateX(0)" | 46 | }, |
46 | : `translateX(-${theme.workspaces.drawer.width}px)`; | 47 | }, |
47 | } | ||
48 | } | ||
49 | }); | 48 | }); |
50 | 49 | ||
51 | @injectSheet(styles) | 50 | @injectSheet(styles) @observer |
52 | @observer | ||
53 | class AppLayout extends Component { | 51 | class AppLayout extends Component { |
54 | static propTypes = { | 52 | static propTypes = { |
55 | classes: PropTypes.object.isRequired, | 53 | classes: PropTypes.object.isRequired, |
@@ -69,16 +67,16 @@ class AppLayout extends Component { | |||
69 | showRequiredRequestsError: PropTypes.bool.isRequired, | 67 | showRequiredRequestsError: PropTypes.bool.isRequired, |
70 | areRequiredRequestsSuccessful: PropTypes.bool.isRequired, | 68 | areRequiredRequestsSuccessful: PropTypes.bool.isRequired, |
71 | retryRequiredRequests: PropTypes.func.isRequired, | 69 | retryRequiredRequests: PropTypes.func.isRequired, |
72 | areRequiredRequestsLoading: PropTypes.bool.isRequired | 70 | areRequiredRequestsLoading: PropTypes.bool.isRequired, |
73 | }; | 71 | }; |
74 | 72 | ||
75 | static defaultProps = { | 73 | static defaultProps = { |
76 | children: [], | 74 | children: [], |
77 | nextAppReleaseVersion: null | 75 | nextAppReleaseVersion: null, |
78 | }; | 76 | }; |
79 | 77 | ||
80 | static contextTypes = { | 78 | static contextTypes = { |
81 | intl: intlShape | 79 | intl: intlShape, |
82 | }; | 80 | }; |
83 | 81 | ||
84 | render() { | 82 | render() { |
@@ -100,7 +98,7 @@ class AppLayout extends Component { | |||
100 | showRequiredRequestsError, | 98 | showRequiredRequestsError, |
101 | areRequiredRequestsSuccessful, | 99 | areRequiredRequestsSuccessful, |
102 | retryRequiredRequests, | 100 | retryRequiredRequests, |
103 | areRequiredRequestsLoading | 101 | areRequiredRequestsLoading, |
104 | } = this.props; | 102 | } = this.props; |
105 | 103 | ||
106 | const { intl } = this.context; | 104 | const { intl } = this.context; |
@@ -108,31 +106,23 @@ class AppLayout extends Component { | |||
108 | return ( | 106 | return ( |
109 | <ErrorBoundary> | 107 | <ErrorBoundary> |
110 | <div className="app"> | 108 | <div className="app"> |
111 | {isWindows && !isFullScreen && ( | 109 | {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon="assets/images/logo.svg" />} |
112 | <TitleBar | ||
113 | menu={window.franz.menu.template} | ||
114 | icon="assets/images/logo.svg" | ||
115 | /> | ||
116 | )} | ||
117 | <div className={`app__content ${classes.appContent}`}> | 110 | <div className={`app__content ${classes.appContent}`}> |
118 | {workspacesDrawer} | 111 | {workspacesDrawer} |
119 | {sidebar} | 112 | {sidebar} |
120 | <div className="app__service"> | 113 | <div className="app__service"> |
121 | <WorkspaceSwitchingIndicator /> | 114 | <WorkspaceSwitchingIndicator /> |
122 | {news.length > 0 && | 115 | {news.length > 0 && news.map(item => ( |
123 | news.map(item => ( | 116 | <InfoBar |
124 | <InfoBar | 117 | key={item.id} |
125 | key={item.id} | 118 | position="top" |
126 | position="top" | 119 | type={item.type} |
127 | type={item.type} | 120 | sticky={item.sticky} |
128 | sticky={item.sticky} | 121 | onHide={() => removeNewsItem({ newsId: item.id })} |
129 | onHide={() => removeNewsItem({ newsId: item.id })} | 122 | > |
130 | > | 123 | <span dangerouslySetInnerHTML={createMarkup(item.message)} /> |
131 | <span | 124 | </InfoBar> |
132 | dangerouslySetInnerHTML={createMarkup(item.message)} | 125 | ))} |
133 | /> | ||
134 | </InfoBar> | ||
135 | ))} | ||
136 | {/* {!isOnline && ( | 126 | {/* {!isOnline && ( |
137 | <InfoBar | 127 | <InfoBar |
138 | type="danger" | 128 | type="danger" |