diff options
author | 2019-05-12 20:00:41 +0700 | |
---|---|---|
committer | 2019-05-12 20:00:41 +0700 | |
commit | d8a1d5f9151cc31f4c2b5c0096a35e49b2c74d61 (patch) | |
tree | 3974d449d8ef389fc61bf880ae758b5debc22a80 /src/components/layout/AppLayout.js | |
parent | Use dark background in SVG logo (diff) | |
parent | Update CHANGELOG.md (diff) | |
download | ferdium-app-d8a1d5f9151cc31f4c2b5c0096a35e49b2c74d61.tar.gz ferdium-app-d8a1d5f9151cc31f4c2b5c0096a35e49b2c74d61.tar.zst ferdium-app-d8a1d5f9151cc31f4c2b5c0096a35e49b2c74d61.zip |
Merge tag 'v5.1.0'
# Conflicts:
# README.md
# src/components/layout/AppLayout.js
Diffstat (limited to 'src/components/layout/AppLayout.js')
-rw-r--r-- | src/components/layout/AppLayout.js | 78 |
1 files changed, 53 insertions, 25 deletions
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js index a1641bc4a..d0476ef04 100644 --- a/src/components/layout/AppLayout.js +++ b/src/components/layout/AppLayout.js | |||
@@ -3,14 +3,20 @@ 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 BasicAuth } from '../../features/basicAuth'; | 9 | import { Component as BasicAuth } from '../../features/basicAuth'; |
10 | import { Component as ShareFranz } from '../../features/shareFranz'; | ||
9 | import ErrorBoundary from '../util/ErrorBoundary'; | 11 | import ErrorBoundary from '../util/ErrorBoundary'; |
10 | 12 | ||
11 | // import globalMessages from '../../i18n/globalMessages'; | 13 | // import globalMessages from '../../i18n/globalMessages'; |
12 | 14 | ||
13 | import { isWindows } from '../../environment'; | 15 | import { isWindows } from '../../environment'; |
16 | import AnnouncementScreen from '../../features/announcements/components/AnnouncementScreen'; | ||
17 | import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator'; | ||
18 | import { workspaceStore } from '../../features/workspaces'; | ||
19 | import { announcementActions } from '../../features/announcements/actions'; | ||
14 | 20 | ||
15 | function createMarkup(HTMLString) { | 21 | function createMarkup(HTMLString) { |
16 | return { __html: HTMLString }; | 22 | return { __html: HTMLString }; |
@@ -43,18 +49,30 @@ const messages = defineMessages({ | |||
43 | }, | 49 | }, |
44 | }); | 50 | }); |
45 | 51 | ||
46 | export default | 52 | const styles = theme => ({ |
47 | @observer | 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 | ||
48 | class AppLayout extends Component { | 63 | class AppLayout extends Component { |
49 | static propTypes = { | 64 | static propTypes = { |
65 | classes: PropTypes.object.isRequired, | ||
50 | isFullScreen: PropTypes.bool.isRequired, | 66 | isFullScreen: PropTypes.bool.isRequired, |
51 | sidebar: PropTypes.element.isRequired, | 67 | sidebar: PropTypes.element.isRequired, |
68 | workspacesDrawer: PropTypes.element.isRequired, | ||
52 | services: PropTypes.element.isRequired, | 69 | services: PropTypes.element.isRequired, |
53 | children: PropTypes.element, | 70 | children: PropTypes.element, |
54 | news: MobxPropTypes.arrayOrObservableArray.isRequired, | 71 | news: MobxPropTypes.arrayOrObservableArray.isRequired, |
55 | // isOnline: PropTypes.bool.isRequired, | 72 | // isOnline: PropTypes.bool.isRequired, |
56 | showServicesUpdatedInfoBar: PropTypes.bool.isRequired, | 73 | showServicesUpdatedInfoBar: PropTypes.bool.isRequired, |
57 | appUpdateIsDownloaded: PropTypes.bool.isRequired, | 74 | appUpdateIsDownloaded: PropTypes.bool.isRequired, |
75 | nextAppReleaseVersion: PropTypes.string, | ||
58 | removeNewsItem: PropTypes.func.isRequired, | 76 | removeNewsItem: PropTypes.func.isRequired, |
59 | reloadServicesAfterUpdate: PropTypes.func.isRequired, | 77 | reloadServicesAfterUpdate: PropTypes.func.isRequired, |
60 | installAppUpdate: PropTypes.func.isRequired, | 78 | installAppUpdate: PropTypes.func.isRequired, |
@@ -63,10 +81,13 @@ class AppLayout extends Component { | |||
63 | retryRequiredRequests: PropTypes.func.isRequired, | 81 | retryRequiredRequests: PropTypes.func.isRequired, |
64 | areRequiredRequestsLoading: PropTypes.bool.isRequired, | 82 | areRequiredRequestsLoading: PropTypes.bool.isRequired, |
65 | darkMode: PropTypes.bool.isRequired, | 83 | darkMode: PropTypes.bool.isRequired, |
84 | isDelayAppScreenVisible: PropTypes.bool.isRequired, | ||
85 | isAnnouncementVisible: PropTypes.bool.isRequired, | ||
66 | }; | 86 | }; |
67 | 87 | ||
68 | static defaultProps = { | 88 | static defaultProps = { |
69 | children: [], | 89 | children: [], |
90 | nextAppReleaseVersion: null, | ||
70 | }; | 91 | }; |
71 | 92 | ||
72 | static contextTypes = { | 93 | static contextTypes = { |
@@ -75,7 +96,9 @@ class AppLayout extends Component { | |||
75 | 96 | ||
76 | render() { | 97 | render() { |
77 | const { | 98 | const { |
99 | classes, | ||
78 | isFullScreen, | 100 | isFullScreen, |
101 | workspacesDrawer, | ||
79 | sidebar, | 102 | sidebar, |
80 | services, | 103 | services, |
81 | children, | 104 | children, |
@@ -83,6 +106,7 @@ class AppLayout extends Component { | |||
83 | news, | 106 | news, |
84 | showServicesUpdatedInfoBar, | 107 | showServicesUpdatedInfoBar, |
85 | appUpdateIsDownloaded, | 108 | appUpdateIsDownloaded, |
109 | nextAppReleaseVersion, | ||
86 | removeNewsItem, | 110 | removeNewsItem, |
87 | reloadServicesAfterUpdate, | 111 | reloadServicesAfterUpdate, |
88 | installAppUpdate, | 112 | installAppUpdate, |
@@ -91,6 +115,8 @@ class AppLayout extends Component { | |||
91 | retryRequiredRequests, | 115 | retryRequiredRequests, |
92 | areRequiredRequestsLoading, | 116 | areRequiredRequestsLoading, |
93 | darkMode, | 117 | darkMode, |
118 | isDelayAppScreenVisible, | ||
119 | isAnnouncementVisible, | ||
94 | } = this.props; | 120 | } = this.props; |
95 | 121 | ||
96 | const { intl } = this.context; | 122 | const { intl } = this.context; |
@@ -99,29 +125,23 @@ class AppLayout extends Component { | |||
99 | <ErrorBoundary> | 125 | <ErrorBoundary> |
100 | <div className={darkMode ? 'theme__dark' : ''}> | 126 | <div className={darkMode ? 'theme__dark' : ''}> |
101 | <div className="app"> | 127 | <div className="app"> |
102 | {isWindows && !isFullScreen && ( | 128 | {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon="assets/images/logo.svg" />} |
103 | <TitleBar | 129 | <div className={`app__content ${classes.appContent}`}> |
104 | menu={window.franz.menu.template} | 130 | {workspacesDrawer} |
105 | icon="assets/images/logo.svg" | ||
106 | /> | ||
107 | )} | ||
108 | <div className="app__content"> | ||
109 | {sidebar} | 131 | {sidebar} |
110 | <div className="app__service"> | 132 | <div className="app__service"> |
111 | {news.length > 0 | 133 | <WorkspaceSwitchingIndicator /> |
112 | && news.map(item => ( | 134 | {news.length > 0 && news.map(item => ( |
113 | <InfoBar | 135 | <InfoBar |
114 | key={item.id} | 136 | key={item.id} |
115 | position="top" | 137 | position="top" |
116 | type={item.type} | 138 | type={item.type} |
117 | sticky={item.sticky} | 139 | sticky={item.sticky} |
118 | onHide={() => removeNewsItem({ newsId: item.id })} | 140 | onHide={() => removeNewsItem({ newsId: item.id })} |
119 | > | 141 | > |
120 | <span | 142 | <span dangerouslySetInnerHTML={createMarkup(item.message)} /> |
121 | dangerouslySetInnerHTML={createMarkup(item.message)} | 143 | </InfoBar> |
122 | /> | 144 | ))} |
123 | </InfoBar> | ||
124 | ))} | ||
125 | {/* {!isOnline && ( | 145 | {/* {!isOnline && ( |
126 | <InfoBar | 146 | <InfoBar |
127 | type="danger" | 147 | type="danger" |
@@ -164,12 +184,18 @@ class AppLayout extends Component { | |||
164 | <span className="mdi mdi-information" /> | 184 | <span className="mdi mdi-information" /> |
165 | {intl.formatMessage(messages.updateAvailable)} | 185 | {intl.formatMessage(messages.updateAvailable)} |
166 | {' '} | 186 | {' '} |
167 | <a href="https://meetfranz.com/changelog" target="_blank"> | 187 | <button |
188 | className="info-bar__inline-button" | ||
189 | type="button" | ||
190 | onClick={() => announcementActions.show({ targetVersion: nextAppReleaseVersion })} | ||
191 | > | ||
168 | <u>{intl.formatMessage(messages.changelog)}</u> | 192 | <u>{intl.formatMessage(messages.changelog)}</u> |
169 | </a> | 193 | </button> |
170 | </InfoBar> | 194 | </InfoBar> |
171 | )} | 195 | )} |
172 | <BasicAuth /> | 196 | <BasicAuth /> |
197 | <ShareFranz /> | ||
198 | {isAnnouncementVisible && (<AnnouncementScreen />)} | ||
173 | {services} | 199 | {services} |
174 | </div> | 200 | </div> |
175 | </div> | 201 | </div> |
@@ -180,3 +206,5 @@ class AppLayout extends Component { | |||
180 | ); | 206 | ); |
181 | } | 207 | } |
182 | } | 208 | } |
209 | |||
210 | export default AppLayout; | ||