diff options
Diffstat (limited to 'src/components/layout/AppLayout.js')
-rw-r--r-- | src/components/layout/AppLayout.js | 94 |
1 files changed, 50 insertions, 44 deletions
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js index a60270a6f..d5e1deb39 100644 --- a/src/components/layout/AppLayout.js +++ b/src/components/layout/AppLayout.js | |||
@@ -19,10 +19,7 @@ import { isWindows } from '../../environment'; | |||
19 | import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator'; | 19 | import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator'; |
20 | import { workspaceStore } from '../../features/workspaces'; | 20 | import { workspaceStore } from '../../features/workspaces'; |
21 | import AppUpdateInfoBar from '../AppUpdateInfoBar'; | 21 | import AppUpdateInfoBar from '../AppUpdateInfoBar'; |
22 | import TrialActivationInfoBar from '../TrialActivationInfoBar'; | ||
23 | import Todos from '../../features/todos/containers/TodosScreen'; | 22 | import Todos from '../../features/todos/containers/TodosScreen'; |
24 | import PlanSelection from '../../features/planSelection/containers/PlanSelectionScreen'; | ||
25 | import TrialStatusBar from '../../features/trialStatusBar/containers/TrialStatusBarScreen'; | ||
26 | 23 | ||
27 | function createMarkup(HTMLString) { | 24 | function createMarkup(HTMLString) { |
28 | return { __html: HTMLString }; | 25 | return { __html: HTMLString }; |
@@ -43,22 +40,32 @@ const messages = defineMessages({ | |||
43 | }, | 40 | }, |
44 | authRequestFailed: { | 41 | authRequestFailed: { |
45 | id: 'infobar.authRequestFailed', | 42 | id: 'infobar.authRequestFailed', |
46 | defaultMessage: '!!!There were errors while trying to perform an authenticated request. Please try logging out and back in if this error persists.', | 43 | defaultMessage: |
44 | '!!!There were errors while trying to perform an authenticated request. Please try logging out and back in if this error persists.', | ||
47 | }, | 45 | }, |
48 | }); | 46 | }); |
49 | 47 | ||
48 | let transition = 'none'; | ||
49 | |||
50 | if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
51 | transition = 'transform 0.5s ease'; | ||
52 | } | ||
53 | |||
50 | const styles = theme => ({ | 54 | const styles = theme => ({ |
51 | appContent: { | 55 | appContent: { |
52 | // width: `calc(100% + ${theme.workspaces.drawer.width}px)`, | 56 | // width: `calc(100% + ${theme.workspaces.drawer.width}px)`, |
53 | width: '100%', | 57 | width: '100%', |
54 | transition: 'transform 0.5s ease', | 58 | transition, |
55 | transform() { | 59 | transform() { |
56 | return workspaceStore.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaces.drawer.width}px)`; | 60 | return workspaceStore.isWorkspaceDrawerOpen |
61 | ? 'translateX(0)' | ||
62 | : `translateX(-${theme.workspaces.drawer.width}px)`; | ||
57 | }, | 63 | }, |
58 | }, | 64 | }, |
59 | }); | 65 | }); |
60 | 66 | ||
61 | @injectSheet(styles) @observer | 67 | @injectSheet(styles) |
68 | @observer | ||
62 | class AppLayout extends Component { | 69 | class AppLayout extends Component { |
63 | static propTypes = { | 70 | static propTypes = { |
64 | classes: PropTypes.object.isRequired, | 71 | classes: PropTypes.object.isRequired, |
@@ -79,12 +86,11 @@ class AppLayout extends Component { | |||
79 | areRequiredRequestsSuccessful: PropTypes.bool.isRequired, | 86 | areRequiredRequestsSuccessful: PropTypes.bool.isRequired, |
80 | retryRequiredRequests: PropTypes.func.isRequired, | 87 | retryRequiredRequests: PropTypes.func.isRequired, |
81 | areRequiredRequestsLoading: PropTypes.bool.isRequired, | 88 | areRequiredRequestsLoading: PropTypes.bool.isRequired, |
82 | hasActivatedTrial: PropTypes.bool.isRequired, | ||
83 | }; | 89 | }; |
84 | 90 | ||
85 | state = { | 91 | state = { |
86 | shouldShowAppUpdateInfoBar: true, | 92 | shouldShowAppUpdateInfoBar: true, |
87 | } | 93 | }; |
88 | 94 | ||
89 | static defaultProps = { | 95 | static defaultProps = { |
90 | children: [], | 96 | children: [], |
@@ -115,7 +121,6 @@ class AppLayout extends Component { | |||
115 | areRequiredRequestsSuccessful, | 121 | areRequiredRequestsSuccessful, |
116 | retryRequiredRequests, | 122 | retryRequiredRequests, |
117 | areRequiredRequestsLoading, | 123 | areRequiredRequestsLoading, |
118 | hasActivatedTrial, | ||
119 | } = this.props; | 124 | } = this.props; |
120 | 125 | ||
121 | const { intl } = this.context; | 126 | const { intl } = this.context; |
@@ -123,45 +128,48 @@ class AppLayout extends Component { | |||
123 | return ( | 128 | return ( |
124 | <ErrorBoundary> | 129 | <ErrorBoundary> |
125 | <div className="app"> | 130 | <div className="app"> |
126 | {isWindows && !isFullScreen && <TitleBar menu={window.ferdi.menu.template} icon="assets/images/logo.svg" />} | 131 | {isWindows && !isFullScreen && ( |
132 | <TitleBar | ||
133 | menu={window.ferdi.menu.template} | ||
134 | icon="assets/images/logo.svg" | ||
135 | /> | ||
136 | )} | ||
127 | <div className={`app__content ${classes.appContent}`}> | 137 | <div className={`app__content ${classes.appContent}`}> |
128 | {workspacesDrawer} | 138 | {workspacesDrawer} |
129 | {sidebar} | 139 | {sidebar} |
130 | <div className="app__service"> | 140 | <div className="app__service"> |
131 | <WorkspaceSwitchingIndicator /> | 141 | <WorkspaceSwitchingIndicator /> |
132 | {news.length > 0 && news.map(item => ( | 142 | {news.length > 0 && |
143 | news.map(item => ( | ||
144 | <InfoBar | ||
145 | key={item.id} | ||
146 | position="top" | ||
147 | type={item.type} | ||
148 | sticky={item.sticky} | ||
149 | onHide={() => removeNewsItem({ newsId: item.id })} | ||
150 | > | ||
151 | <span | ||
152 | dangerouslySetInnerHTML={createMarkup(item.message)} | ||
153 | onClick={event => { | ||
154 | const { target } = event; | ||
155 | if (target && target.hasAttribute('data-is-news-cta')) { | ||
156 | removeNewsItem({ newsId: item.id }); | ||
157 | } | ||
158 | }} | ||
159 | /> | ||
160 | </InfoBar> | ||
161 | ))} | ||
162 | {!areRequiredRequestsSuccessful && showRequiredRequestsError && ( | ||
133 | <InfoBar | 163 | <InfoBar |
134 | key={item.id} | 164 | type="danger" |
135 | position="top" | 165 | ctaLabel="Try again" |
136 | type={item.type} | 166 | ctaLoading={areRequiredRequestsLoading} |
137 | sticky={item.sticky} | 167 | sticky |
138 | onHide={() => removeNewsItem({ newsId: item.id })} | 168 | onClick={retryRequiredRequests} |
139 | > | 169 | > |
140 | <span | 170 | <span className="mdi mdi-flash" /> |
141 | dangerouslySetInnerHTML={createMarkup(item.message)} | 171 | {intl.formatMessage(messages.requiredRequestsFailed)} |
142 | onClick={(event) => { | ||
143 | const { target } = event; | ||
144 | if (target && target.hasAttribute('data-is-news-cta')) { | ||
145 | removeNewsItem({ newsId: item.id }); | ||
146 | } | ||
147 | }} | ||
148 | /> | ||
149 | </InfoBar> | 172 | </InfoBar> |
150 | ))} | ||
151 | {hasActivatedTrial && ( | ||
152 | <TrialActivationInfoBar /> | ||
153 | )} | ||
154 | {!areRequiredRequestsSuccessful && showRequiredRequestsError && ( | ||
155 | <InfoBar | ||
156 | type="danger" | ||
157 | ctaLabel="Try again" | ||
158 | ctaLoading={areRequiredRequestsLoading} | ||
159 | sticky | ||
160 | onClick={retryRequiredRequests} | ||
161 | > | ||
162 | <span className="mdi mdi-flash" /> | ||
163 | {intl.formatMessage(messages.requiredRequestsFailed)} | ||
164 | </InfoBar> | ||
165 | )} | 173 | )} |
166 | {authRequestFailed && ( | 174 | {authRequestFailed && ( |
167 | <InfoBar | 175 | <InfoBar |
@@ -186,7 +194,7 @@ class AppLayout extends Component { | |||
186 | {intl.formatMessage(messages.servicesUpdated)} | 194 | {intl.formatMessage(messages.servicesUpdated)} |
187 | </InfoBar> | 195 | </InfoBar> |
188 | )} | 196 | )} |
189 | { appUpdateIsDownloaded && this.state.shouldShowAppUpdateInfoBar && ( | 197 | {appUpdateIsDownloaded && this.state.shouldShowAppUpdateInfoBar && ( |
190 | <AppUpdateInfoBar | 198 | <AppUpdateInfoBar |
191 | nextAppReleaseVersion={nextAppReleaseVersion} | 199 | nextAppReleaseVersion={nextAppReleaseVersion} |
192 | onInstallUpdate={installAppUpdate} | 200 | onInstallUpdate={installAppUpdate} |
@@ -202,11 +210,9 @@ class AppLayout extends Component { | |||
202 | <PublishDebugInfo /> | 210 | <PublishDebugInfo /> |
203 | {services} | 211 | {services} |
204 | {children} | 212 | {children} |
205 | <TrialStatusBar /> | ||
206 | </div> | 213 | </div> |
207 | <Todos /> | 214 | <Todos /> |
208 | </div> | 215 | </div> |
209 | <PlanSelection /> | ||
210 | </div> | 216 | </div> |
211 | </ErrorBoundary> | 217 | </ErrorBoundary> |
212 | ); | 218 | ); |