diff options
author | 2019-04-11 12:00:07 +0200 | |
---|---|---|
committer | 2019-04-11 12:00:07 +0200 | |
commit | e43d6bd80b3d76aae627fa8174eea98c14016549 (patch) | |
tree | de1d0a3ba10100ce68d0cb1ed618095e362fe573 /src/components/layout/AppLayout.js | |
parent | implements basic release announcement feature (diff) | |
parent | handle deleted services that are attached to workspaces (diff) | |
download | ferdium-app-e43d6bd80b3d76aae627fa8174eea98c14016549.tar.gz ferdium-app-e43d6bd80b3d76aae627fa8174eea98c14016549.tar.zst ferdium-app-e43d6bd80b3d76aae627fa8174eea98c14016549.zip |
merge-in workspace feature
Diffstat (limited to 'src/components/layout/AppLayout.js')
-rw-r--r-- | src/components/layout/AppLayout.js | 26 |
1 files changed, 24 insertions, 2 deletions
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js index 2bda91f73..985475c8d 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'; |
@@ -14,6 +15,8 @@ import ErrorBoundary from '../util/ErrorBoundary'; | |||
14 | 15 | ||
15 | import { isWindows } from '../../environment'; | 16 | import { isWindows } from '../../environment'; |
16 | import AnnouncementScreen from '../../features/announcements/Component'; | 17 | import AnnouncementScreen from '../../features/announcements/Component'; |
18 | import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator'; | ||
19 | import { workspaceStore } from '../../features/workspaces'; | ||
17 | 20 | ||
18 | function createMarkup(HTMLString) { | 21 | function createMarkup(HTMLString) { |
19 | return { __html: HTMLString }; | 22 | return { __html: HTMLString }; |
@@ -46,10 +49,23 @@ const messages = defineMessages({ | |||
46 | }, | 49 | }, |
47 | }); | 50 | }); |
48 | 51 | ||
49 | export default @observer class AppLayout extends Component { | 52 | const styles = theme => ({ |
53 | appContent: { | ||
54 | width: `calc(100% + ${theme.workspaces.drawer.width}px)`, | ||
55 | transition: 'transform 0.5s ease', | ||
56 | transform() { | ||
57 | return workspaceStore.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaces.drawer.width}px)`; | ||
58 | }, | ||
59 | }, | ||
60 | }); | ||
61 | |||
62 | @injectSheet(styles) @observer | ||
63 | class AppLayout extends Component { | ||
50 | static propTypes = { | 64 | static propTypes = { |
65 | classes: PropTypes.object.isRequired, | ||
51 | isFullScreen: PropTypes.bool.isRequired, | 66 | isFullScreen: PropTypes.bool.isRequired, |
52 | sidebar: PropTypes.element.isRequired, | 67 | sidebar: PropTypes.element.isRequired, |
68 | workspacesDrawer: PropTypes.element.isRequired, | ||
53 | services: PropTypes.element.isRequired, | 69 | services: PropTypes.element.isRequired, |
54 | children: PropTypes.element, | 70 | children: PropTypes.element, |
55 | news: MobxPropTypes.arrayOrObservableArray.isRequired, | 71 | news: MobxPropTypes.arrayOrObservableArray.isRequired, |
@@ -78,7 +94,9 @@ export default @observer class AppLayout extends Component { | |||
78 | 94 | ||
79 | render() { | 95 | render() { |
80 | const { | 96 | const { |
97 | classes, | ||
81 | isFullScreen, | 98 | isFullScreen, |
99 | workspacesDrawer, | ||
82 | sidebar, | 100 | sidebar, |
83 | services, | 101 | services, |
84 | children, | 102 | children, |
@@ -105,9 +123,11 @@ export default @observer class AppLayout extends Component { | |||
105 | <div className={(darkMode ? 'theme__dark' : '')}> | 123 | <div className={(darkMode ? 'theme__dark' : '')}> |
106 | <div className="app"> | 124 | <div className="app"> |
107 | {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon="assets/images/logo.svg" />} | 125 | {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon="assets/images/logo.svg" />} |
108 | <div className="app__content"> | 126 | <div className={`app__content ${classes.appContent}`}> |
127 | {workspacesDrawer} | ||
109 | {sidebar} | 128 | {sidebar} |
110 | <div className="app__service"> | 129 | <div className="app__service"> |
130 | <WorkspaceSwitchingIndicator /> | ||
111 | {news.length > 0 && news.map(item => ( | 131 | {news.length > 0 && news.map(item => ( |
112 | <InfoBar | 132 | <InfoBar |
113 | key={item.id} | 133 | key={item.id} |
@@ -180,3 +200,5 @@ export default @observer class AppLayout extends Component { | |||
180 | ); | 200 | ); |
181 | } | 201 | } |
182 | } | 202 | } |
203 | |||
204 | export default AppLayout; | ||