aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/layout/AppLayout.js
diff options
context:
space:
mode:
authorLibravatar Amine Mouafik <amine@mouafik.fr>2019-08-05 19:06:51 +0700
committerLibravatar Amine Mouafik <amine@mouafik.fr>2019-08-05 19:06:51 +0700
commit19ff9d112fda59d114df1079622a3d365a51c14a (patch)
tree90e3e09e051a96a78ec80cd34363a062eac089a3 /src/components/layout/AppLayout.js
parentMention releases in README (diff)
parentbump version to 5.2.1-beta.1 (diff)
downloadferdium-app-19ff9d112fda59d114df1079622a3d365a51c14a.tar.gz
ferdium-app-19ff9d112fda59d114df1079622a3d365a51c14a.tar.zst
ferdium-app-19ff9d112fda59d114df1079622a3d365a51c14a.zip
Merge remote-tracking branch 'upstream/master'
# Conflicts: # src/components/layout/AppLayout.js
Diffstat (limited to 'src/components/layout/AppLayout.js')
-rw-r--r--src/components/layout/AppLayout.js177
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 @@
1import React, { Component } from 'react'; 1import React, { Component } from "react";
2import PropTypes from 'prop-types'; 2import PropTypes from "prop-types";
3import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; 3import { observer, PropTypes as MobxPropTypes } from "mobx-react";
4import { defineMessages, intlShape } from 'react-intl'; 4import { defineMessages, intlShape } from "react-intl";
5import { TitleBar } from 'electron-react-titlebar'; 5import { TitleBar } from "electron-react-titlebar";
6import injectSheet from 'react-jss'; 6import injectSheet from "react-jss";
7 7
8import InfoBar from '../ui/InfoBar'; 8import InfoBar from "../ui/InfoBar";
9import { Component as BasicAuth } from '../../features/basicAuth'; 9import { Component as BasicAuth } from "../../features/basicAuth";
10import { Component as ShareFranz } from '../../features/shareFranz'; 10import { Component as ShareFranz } from "../../features/shareFranz";
11import ErrorBoundary from '../util/ErrorBoundary'; 11import ErrorBoundary from "../util/ErrorBoundary";
12 12
13// import globalMessages from '../../i18n/globalMessages'; 13// import globalMessages from '../../i18n/globalMessages';
14 14
15import { isWindows } from '../../environment'; 15import { isWindows } from "../../environment";
16import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator'; 16import WorkspaceSwitchingIndicator from "../../features/workspaces/components/WorkspaceSwitchingIndicator";
17import { workspaceStore } from '../../features/workspaces'; 17import { workspaceStore } from "../../features/workspaces";
18import AppUpdateInfoBar from '../AppUpdateInfoBar'; 18import AppUpdateInfoBar from "../AppUpdateInfoBar";
19 19
20function createMarkup(HTMLString) { 20function createMarkup(HTMLString) {
21 return { __html: HTMLString }; 21 return { __html: HTMLString };
@@ -23,30 +23,33 @@ function createMarkup(HTMLString) {
23 23
24const messages = defineMessages({ 24const 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
39const styles = theme => ({ 39const 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
50class AppLayout extends Component { 53class 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>