diff options
author | Dominik Guzei <dominik.guzei@gmail.com> | 2019-03-19 19:38:56 +0100 |
---|---|---|
committer | Dominik Guzei <dominik.guzei@gmail.com> | 2019-03-19 19:40:08 +0100 |
commit | e4f1862644d5921e2ee77078c10e16efa3e58c7b (patch) | |
tree | ff7f23eb83ee974a9f719ed6f58647ce7f0a1175 /src/components/layout/AppLayout.js | |
parent | fix conflicts with latest develop (diff) | |
download | ferdium-app-e4f1862644d5921e2ee77078c10e16efa3e58c7b.tar.gz ferdium-app-e4f1862644d5921e2ee77078c10e16efa3e58c7b.tar.zst ferdium-app-e4f1862644d5921e2ee77078c10e16efa3e58c7b.zip |
add workspace drawer
Diffstat (limited to 'src/components/layout/AppLayout.js')
-rw-r--r-- | src/components/layout/AppLayout.js | 24 |
1 files changed, 22 insertions, 2 deletions
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js index 593149e72..e06192f87 100644 --- a/src/components/layout/AppLayout.js +++ b/src/components/layout/AppLayout.js | |||
@@ -3,6 +3,7 @@ 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 | 7 | ||
7 | import InfoBar from '../ui/InfoBar'; | 8 | import InfoBar from '../ui/InfoBar'; |
8 | import { Component as DelayApp } from '../../features/delayApp'; | 9 | import { Component as DelayApp } from '../../features/delayApp'; |
@@ -13,6 +14,7 @@ import ErrorBoundary from '../util/ErrorBoundary'; | |||
13 | // import globalMessages from '../../i18n/globalMessages'; | 14 | // import globalMessages from '../../i18n/globalMessages'; |
14 | 15 | ||
15 | import { isWindows } from '../../environment'; | 16 | import { isWindows } from '../../environment'; |
17 | import { workspacesState } from '../../features/workspaces/state'; | ||
16 | 18 | ||
17 | function createMarkup(HTMLString) { | 19 | function createMarkup(HTMLString) { |
18 | return { __html: HTMLString }; | 20 | return { __html: HTMLString }; |
@@ -45,10 +47,23 @@ const messages = defineMessages({ | |||
45 | }, | 47 | }, |
46 | }); | 48 | }); |
47 | 49 | ||
48 | export default @observer class AppLayout extends Component { | 50 | const styles = theme => ({ |
51 | appContent: { | ||
52 | width: `calc(100% + ${theme.workspaceDrawerWidth})`, | ||
53 | transition: 'transform 0.5s ease', | ||
54 | transform() { | ||
55 | return workspacesState.isWorkspaceDrawerOpen ? 'translateX(0)' : 'translateX(-220px)'; | ||
56 | }, | ||
57 | }, | ||
58 | }); | ||
59 | |||
60 | @injectSheet(styles) @observer | ||
61 | class AppLayout extends Component { | ||
49 | static propTypes = { | 62 | static propTypes = { |
63 | classes: PropTypes.object.isRequired, | ||
50 | isFullScreen: PropTypes.bool.isRequired, | 64 | isFullScreen: PropTypes.bool.isRequired, |
51 | sidebar: PropTypes.element.isRequired, | 65 | sidebar: PropTypes.element.isRequired, |
66 | workspacesDrawer: PropTypes.element.isRequired, | ||
52 | services: PropTypes.element.isRequired, | 67 | services: PropTypes.element.isRequired, |
53 | children: PropTypes.element, | 68 | children: PropTypes.element, |
54 | news: MobxPropTypes.arrayOrObservableArray.isRequired, | 69 | news: MobxPropTypes.arrayOrObservableArray.isRequired, |
@@ -76,7 +91,9 @@ export default @observer class AppLayout extends Component { | |||
76 | 91 | ||
77 | render() { | 92 | render() { |
78 | const { | 93 | const { |
94 | classes, | ||
79 | isFullScreen, | 95 | isFullScreen, |
96 | workspacesDrawer, | ||
80 | sidebar, | 97 | sidebar, |
81 | services, | 98 | services, |
82 | children, | 99 | children, |
@@ -102,7 +119,8 @@ export default @observer class AppLayout extends Component { | |||
102 | <div className={(darkMode ? 'theme__dark' : '')}> | 119 | <div className={(darkMode ? 'theme__dark' : '')}> |
103 | <div className="app"> | 120 | <div className="app"> |
104 | {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon="assets/images/logo.svg" />} | 121 | {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon="assets/images/logo.svg" />} |
105 | <div className="app__content"> | 122 | <div className={`app__content ${classes.appContent}`}> |
123 | {workspacesDrawer} | ||
106 | {sidebar} | 124 | {sidebar} |
107 | <div className="app__service"> | 125 | <div className="app__service"> |
108 | {news.length > 0 && news.map(item => ( | 126 | {news.length > 0 && news.map(item => ( |
@@ -176,3 +194,5 @@ export default @observer class AppLayout extends Component { | |||
176 | ); | 194 | ); |
177 | } | 195 | } |
178 | } | 196 | } |
197 | |||
198 | export default AppLayout; | ||