diff options
Diffstat (limited to 'src/components/layout/AppLayout.js')
-rw-r--r-- | src/components/layout/AppLayout.js | 177 |
1 files changed, 92 insertions, 85 deletions
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js index 3372947cd..5edf96523 100644 --- a/src/components/layout/AppLayout.js +++ b/src/components/layout/AppLayout.js | |||
@@ -1,21 +1,21 @@ | |||
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 BasicAuth } from "../../features/basicAuth"; |
10 | import { Component as ShareFranz } from '../../features/shareFranz'; | 10 | import { Component as ShareFranz } from "../../features/shareFranz"; |
11 | import ErrorBoundary from '../util/ErrorBoundary'; | 11 | import ErrorBoundary from "../util/ErrorBoundary"; |
12 | 12 | ||
13 | // import globalMessages from '../../i18n/globalMessages'; | 13 | // import globalMessages from '../../i18n/globalMessages'; |
14 | 14 | ||
15 | import { isWindows } from '../../environment'; | 15 | import { isWindows } from "../../environment"; |
16 | import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator'; | 16 | import WorkspaceSwitchingIndicator from "../../features/workspaces/components/WorkspaceSwitchingIndicator"; |
17 | import { workspaceStore } from '../../features/workspaces'; | 17 | import { workspaceStore } from "../../features/workspaces"; |
18 | import AppUpdateInfoBar from '../AppUpdateInfoBar'; | 18 | import AppUpdateInfoBar from "../AppUpdateInfoBar"; |
19 | 19 | ||
20 | function createMarkup(HTMLString) { | 20 | function createMarkup(HTMLString) { |
21 | return { __html: HTMLString }; | 21 | return { __html: HTMLString }; |
@@ -23,30 +23,33 @@ function createMarkup(HTMLString) { | |||
23 | 23 | ||
24 | const messages = defineMessages({ | 24 | const messages = defineMessages({ |
25 | servicesUpdated: { | 25 | servicesUpdated: { |
26 | id: 'infobar.servicesUpdated', | 26 | id: "infobar.servicesUpdated", |
27 | defaultMessage: '!!!Your services have been updated.', | 27 | defaultMessage: "!!!Your services have been updated." |
28 | }, | 28 | }, |
29 | buttonReloadServices: { | 29 | buttonReloadServices: { |
30 | id: 'infobar.buttonReloadServices', | 30 | id: "infobar.buttonReloadServices", |
31 | defaultMessage: '!!!Reload services', | 31 | defaultMessage: "!!!Reload services" |
32 | }, | 32 | }, |
33 | requiredRequestsFailed: { | 33 | requiredRequestsFailed: { |
34 | id: 'infobar.requiredRequestsFailed', | 34 | id: "infobar.requiredRequestsFailed", |
35 | defaultMessage: '!!!Could not load services and user information', | 35 | defaultMessage: "!!!Could not load services and user information" |
36 | }, | 36 | } |
37 | }); | 37 | }); |
38 | 38 | ||
39 | const styles = theme => ({ | 39 | const styles = theme => ({ |
40 | appContent: { | 40 | appContent: { |
41 | width: `calc(100% + ${theme.workspaces.drawer.width}px)`, | 41 | width: `calc(100% + ${theme.workspaces.drawer.width}px)`, |
42 | transition: 'transform 0.5s ease', | 42 | transition: "transform 0.5s ease", |
43 | transform() { | 43 | transform() { |
44 | return workspaceStore.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaces.drawer.width}px)`; | 44 | return workspaceStore.isWorkspaceDrawerOpen |
45 | }, | 45 | ? "translateX(0)" |
46 | }, | 46 | : `translateX(-${theme.workspaces.drawer.width}px)`; |
47 | } | ||
48 | } | ||
47 | }); | 49 | }); |
48 | 50 | ||
49 | @injectSheet(styles) @observer | 51 | @injectSheet(styles) |
52 | @observer | ||
50 | class AppLayout extends Component { | 53 | class AppLayout extends Component { |
51 | static propTypes = { | 54 | static propTypes = { |
52 | classes: PropTypes.object.isRequired, | 55 | classes: PropTypes.object.isRequired, |
@@ -66,17 +69,16 @@ class AppLayout extends Component { | |||
66 | showRequiredRequestsError: PropTypes.bool.isRequired, | 69 | showRequiredRequestsError: PropTypes.bool.isRequired, |
67 | areRequiredRequestsSuccessful: PropTypes.bool.isRequired, | 70 | areRequiredRequestsSuccessful: PropTypes.bool.isRequired, |
68 | retryRequiredRequests: PropTypes.func.isRequired, | 71 | retryRequiredRequests: PropTypes.func.isRequired, |
69 | areRequiredRequestsLoading: PropTypes.bool.isRequired, | 72 | areRequiredRequestsLoading: PropTypes.bool.isRequired |
70 | darkMode: PropTypes.bool.isRequired, | ||
71 | }; | 73 | }; |
72 | 74 | ||
73 | static defaultProps = { | 75 | static defaultProps = { |
74 | children: [], | 76 | children: [], |
75 | nextAppReleaseVersion: null, | 77 | nextAppReleaseVersion: null |
76 | }; | 78 | }; |
77 | 79 | ||
78 | static contextTypes = { | 80 | static contextTypes = { |
79 | intl: intlShape, | 81 | intl: intlShape |
80 | }; | 82 | }; |
81 | 83 | ||
82 | render() { | 84 | render() { |
@@ -98,23 +100,27 @@ class AppLayout extends Component { | |||
98 | showRequiredRequestsError, | 100 | showRequiredRequestsError, |
99 | areRequiredRequestsSuccessful, | 101 | areRequiredRequestsSuccessful, |
100 | retryRequiredRequests, | 102 | retryRequiredRequests, |
101 | areRequiredRequestsLoading, | 103 | areRequiredRequestsLoading |
102 | darkMode, | ||
103 | } = this.props; | 104 | } = this.props; |
104 | 105 | ||
105 | const { intl } = this.context; | 106 | const { intl } = this.context; |
106 | 107 | ||
107 | return ( | 108 | return ( |
108 | <ErrorBoundary> | 109 | <ErrorBoundary> |
109 | <div className={darkMode ? 'theme__dark' : ''}> | 110 | <div className="app"> |
110 | <div className="app"> | 111 | {isWindows && !isFullScreen && ( |
111 | {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon="assets/images/logo.svg" />} | 112 | <TitleBar |
112 | <div className={`app__content ${classes.appContent}`}> | 113 | menu={window.franz.menu.template} |
113 | {workspacesDrawer} | 114 | icon="assets/images/logo.svg" |
114 | {sidebar} | 115 | /> |
115 | <div className="app__service"> | 116 | )} |
116 | <WorkspaceSwitchingIndicator /> | 117 | <div className={`app__content ${classes.appContent}`}> |
117 | {news.length > 0 && news.map(item => ( | 118 | {workspacesDrawer} |
119 | {sidebar} | ||
120 | <div className="app__service"> | ||
121 | <WorkspaceSwitchingIndicator /> | ||
122 | {news.length > 0 && | ||
123 | news.map(item => ( | ||
118 | <InfoBar | 124 | <InfoBar |
119 | key={item.id} | 125 | key={item.id} |
120 | position="top" | 126 | position="top" |
@@ -122,52 +128,53 @@ class AppLayout extends Component { | |||
122 | sticky={item.sticky} | 128 | sticky={item.sticky} |
123 | onHide={() => removeNewsItem({ newsId: item.id })} | 129 | onHide={() => removeNewsItem({ newsId: item.id })} |
124 | > | 130 | > |
125 | <span dangerouslySetInnerHTML={createMarkup(item.message)} /> | 131 | <span |
132 | dangerouslySetInnerHTML={createMarkup(item.message)} | ||
133 | /> | ||
126 | </InfoBar> | 134 | </InfoBar> |
127 | ))} | 135 | ))} |
128 | {/* {!isOnline && ( | 136 | {/* {!isOnline && ( |
129 | <InfoBar | 137 | <InfoBar |
130 | type="danger" | 138 | type="danger" |
131 | sticky | 139 | sticky |
132 | > | 140 | > |
133 | <span className="mdi mdi-flash" /> | 141 | <span className="mdi mdi-flash" /> |
134 | {intl.formatMessage(globalMessages.notConnectedToTheInternet)} | 142 | {intl.formatMessage(globalMessages.notConnectedToTheInternet)} |
135 | </InfoBar> | 143 | </InfoBar> |
136 | )} */} | 144 | )} */} |
137 | {!areRequiredRequestsSuccessful && showRequiredRequestsError && ( | 145 | {!areRequiredRequestsSuccessful && showRequiredRequestsError && ( |
138 | <InfoBar | 146 | <InfoBar |
139 | type="danger" | 147 | type="danger" |
140 | ctaLabel="Try again" | 148 | ctaLabel="Try again" |
141 | ctaLoading={areRequiredRequestsLoading} | 149 | ctaLoading={areRequiredRequestsLoading} |
142 | sticky | 150 | sticky |
143 | onClick={retryRequiredRequests} | 151 | onClick={retryRequiredRequests} |
144 | > | 152 | > |
145 | <span className="mdi mdi-flash" /> | 153 | <span className="mdi mdi-flash" /> |
146 | {intl.formatMessage(messages.requiredRequestsFailed)} | 154 | {intl.formatMessage(messages.requiredRequestsFailed)} |
147 | </InfoBar> | 155 | </InfoBar> |
148 | )} | 156 | )} |
149 | {showServicesUpdatedInfoBar && ( | 157 | {showServicesUpdatedInfoBar && ( |
150 | <InfoBar | 158 | <InfoBar |
151 | type="primary" | 159 | type="primary" |
152 | ctaLabel={intl.formatMessage(messages.buttonReloadServices)} | 160 | ctaLabel={intl.formatMessage(messages.buttonReloadServices)} |
153 | onClick={reloadServicesAfterUpdate} | 161 | onClick={reloadServicesAfterUpdate} |
154 | sticky | 162 | sticky |
155 | > | 163 | > |
156 | <span className="mdi mdi-power-plug" /> | 164 | <span className="mdi mdi-power-plug" /> |
157 | {intl.formatMessage(messages.servicesUpdated)} | 165 | {intl.formatMessage(messages.servicesUpdated)} |
158 | </InfoBar> | 166 | </InfoBar> |
159 | )} | 167 | )} |
160 | {appUpdateIsDownloaded && ( | 168 | {appUpdateIsDownloaded && ( |
161 | <AppUpdateInfoBar | 169 | <AppUpdateInfoBar |
162 | nextAppReleaseVersion={nextAppReleaseVersion} | 170 | nextAppReleaseVersion={nextAppReleaseVersion} |
163 | onInstallUpdate={installAppUpdate} | 171 | onInstallUpdate={installAppUpdate} |
164 | /> | 172 | /> |
165 | )} | 173 | )} |
166 | <BasicAuth /> | 174 | <BasicAuth /> |
167 | <ShareFranz /> | 175 | <ShareFranz /> |
168 | {services} | 176 | {services} |
169 | {children} | 177 | {children} |
170 | </div> | ||
171 | </div> | 178 | </div> |
172 | </div> | 179 | </div> |
173 | </div> | 180 | </div> |