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 | |
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')
-rw-r--r-- | src/components/layout/AppLayout.js | 24 | ||||
-rw-r--r-- | src/components/layout/Sidebar.js | 42 | ||||
-rw-r--r-- | src/components/services/content/ServiceView.js | 1 |
3 files changed, 63 insertions, 4 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; | ||
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js index fcc5b0001..de379875e 100644 --- a/src/components/layout/Sidebar.js +++ b/src/components/layout/Sidebar.js | |||
@@ -24,6 +24,14 @@ const messages = defineMessages({ | |||
24 | id: 'sidebar.unmuteApp', | 24 | id: 'sidebar.unmuteApp', |
25 | defaultMessage: '!!!Enable notifications & audio', | 25 | defaultMessage: '!!!Enable notifications & audio', |
26 | }, | 26 | }, |
27 | openWorkspaceDrawer: { | ||
28 | id: 'sidebar.openWorkspaceDrawer', | ||
29 | defaultMessage: '!!!Open workspace drawer', | ||
30 | }, | ||
31 | closeWorkspaceDrawer: { | ||
32 | id: 'sidebar.closeWorkspaceDrawer', | ||
33 | defaultMessage: '!!!Close workspace drawer', | ||
34 | }, | ||
27 | }); | 35 | }); |
28 | 36 | ||
29 | export default @observer class Sidebar extends Component { | 37 | export default @observer class Sidebar extends Component { |
@@ -31,6 +39,8 @@ export default @observer class Sidebar extends Component { | |||
31 | openSettings: PropTypes.func.isRequired, | 39 | openSettings: PropTypes.func.isRequired, |
32 | toggleMuteApp: PropTypes.func.isRequired, | 40 | toggleMuteApp: PropTypes.func.isRequired, |
33 | isAppMuted: PropTypes.bool.isRequired, | 41 | isAppMuted: PropTypes.bool.isRequired, |
42 | isWorkspaceDrawerOpen: PropTypes.bool.isRequired, | ||
43 | toggleWorkspaceDrawer: PropTypes.func.isRequired, | ||
34 | }; | 44 | }; |
35 | 45 | ||
36 | static contextTypes = { | 46 | static contextTypes = { |
@@ -53,9 +63,23 @@ export default @observer class Sidebar extends Component { | |||
53 | this.setState({ tooltipEnabled: false }); | 63 | this.setState({ tooltipEnabled: false }); |
54 | } | 64 | } |
55 | 65 | ||
66 | updateToolTip() { | ||
67 | this.disableToolTip(); | ||
68 | setTimeout(this.enableToolTip.bind(this)); | ||
69 | } | ||
70 | |||
56 | render() { | 71 | render() { |
57 | const { openSettings, toggleMuteApp, isAppMuted } = this.props; | 72 | const { |
73 | openSettings, | ||
74 | toggleMuteApp, | ||
75 | isAppMuted, | ||
76 | isWorkspaceDrawerOpen, | ||
77 | toggleWorkspaceDrawer, | ||
78 | } = this.props; | ||
58 | const { intl } = this.context; | 79 | const { intl } = this.context; |
80 | const workspaceToggleMessage = ( | ||
81 | isWorkspaceDrawerOpen ? messages.closeWorkspaceDrawer : messages.openWorkspaceDrawer | ||
82 | ); | ||
59 | 83 | ||
60 | return ( | 84 | return ( |
61 | <div className="sidebar"> | 85 | <div className="sidebar"> |
@@ -66,7 +90,21 @@ export default @observer class Sidebar extends Component { | |||
66 | /> | 90 | /> |
67 | <button | 91 | <button |
68 | type="button" | 92 | type="button" |
69 | onClick={toggleMuteApp} | 93 | onClick={() => { |
94 | toggleWorkspaceDrawer(); | ||
95 | this.updateToolTip(); | ||
96 | }} | ||
97 | className={`sidebar__button sidebar__button--workspaces ${isWorkspaceDrawerOpen ? 'is-active' : ''}`} | ||
98 | data-tip={`${intl.formatMessage(workspaceToggleMessage)} (${ctrlKey}+Shift+D)`} | ||
99 | > | ||
100 | <i className="mdi mdi-view-grid" /> | ||
101 | </button> | ||
102 | <button | ||
103 | type="button" | ||
104 | onClick={() => { | ||
105 | toggleMuteApp(); | ||
106 | this.updateToolTip(); | ||
107 | }} | ||
70 | className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`} | 108 | className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`} |
71 | data-tip={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)} (${ctrlKey}+Shift+M)`} | 109 | data-tip={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)} (${ctrlKey}+Shift+M)`} |
72 | > | 110 | > |
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js index 5afc54f9d..ada920cb6 100644 --- a/src/components/services/content/ServiceView.js +++ b/src/components/services/content/ServiceView.js | |||
@@ -37,6 +37,7 @@ export default @observer class ServiceView extends Component { | |||
37 | 37 | ||
38 | componentDidMount() { | 38 | componentDidMount() { |
39 | this.autorunDisposer = autorun(() => { | 39 | this.autorunDisposer = autorun(() => { |
40 | if (!this.isMounted) return; | ||
40 | if (this.props.service.isActive) { | 41 | if (this.props.service.isActive) { |
41 | this.setState({ forceRepaint: true }); | 42 | this.setState({ forceRepaint: true }); |
42 | setTimeout(() => { | 43 | setTimeout(() => { |