diff options
Diffstat (limited to 'src/components/layout')
-rw-r--r-- | src/components/layout/AppLayout.js | 18 | ||||
-rw-r--r-- | src/components/layout/Sidebar.js | 108 |
2 files changed, 74 insertions, 52 deletions
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js index e6e5d40fe..83e037083 100644 --- a/src/components/layout/AppLayout.js +++ b/src/components/layout/AppLayout.js | |||
@@ -1,7 +1,7 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | 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, injectIntl } from 'react-intl'; |
5 | import { TitleBar } from 'electron-react-titlebar'; | 5 | import { TitleBar } from 'electron-react-titlebar'; |
6 | import injectSheet from 'react-jss'; | 6 | import injectSheet from 'react-jss'; |
7 | 7 | ||
@@ -27,20 +27,20 @@ function createMarkup(HTMLString) { | |||
27 | const messages = defineMessages({ | 27 | const messages = defineMessages({ |
28 | servicesUpdated: { | 28 | servicesUpdated: { |
29 | id: 'infobar.servicesUpdated', | 29 | id: 'infobar.servicesUpdated', |
30 | defaultMessage: '!!!Your services have been updated.', | 30 | defaultMessage: 'Your services have been updated.', |
31 | }, | 31 | }, |
32 | buttonReloadServices: { | 32 | buttonReloadServices: { |
33 | id: 'infobar.buttonReloadServices', | 33 | id: 'infobar.buttonReloadServices', |
34 | defaultMessage: '!!!Reload services', | 34 | defaultMessage: 'Reload services', |
35 | }, | 35 | }, |
36 | requiredRequestsFailed: { | 36 | requiredRequestsFailed: { |
37 | id: 'infobar.requiredRequestsFailed', | 37 | id: 'infobar.requiredRequestsFailed', |
38 | defaultMessage: '!!!Could not load services and user information', | 38 | defaultMessage: 'Could not load services and user information', |
39 | }, | 39 | }, |
40 | authRequestFailed: { | 40 | authRequestFailed: { |
41 | id: 'infobar.authRequestFailed', | 41 | id: 'infobar.authRequestFailed', |
42 | defaultMessage: | 42 | defaultMessage: |
43 | '!!!There were errors while trying to perform an authenticated request. Please try logging out and back in if this error persists.', | 43 | 'There were errors while trying to perform an authenticated request. Please try logging out and back in if this error persists.', |
44 | }, | 44 | }, |
45 | }); | 45 | }); |
46 | 46 | ||
@@ -94,10 +94,6 @@ class AppLayout extends Component { | |||
94 | children: [], | 94 | children: [], |
95 | }; | 95 | }; |
96 | 96 | ||
97 | static contextTypes = { | ||
98 | intl: intlShape, | ||
99 | }; | ||
100 | |||
101 | render() { | 97 | render() { |
102 | const { | 98 | const { |
103 | classes, | 99 | classes, |
@@ -119,7 +115,7 @@ class AppLayout extends Component { | |||
119 | areRequiredRequestsLoading, | 115 | areRequiredRequestsLoading, |
120 | } = this.props; | 116 | } = this.props; |
121 | 117 | ||
122 | const { intl } = this.context; | 118 | const { intl } = this.props; |
123 | 119 | ||
124 | return ( | 120 | return ( |
125 | <ErrorBoundary> | 121 | <ErrorBoundary> |
@@ -213,4 +209,4 @@ class AppLayout extends Component { | |||
213 | } | 209 | } |
214 | } | 210 | } |
215 | 211 | ||
216 | export default AppLayout; | 212 | export default injectIntl(AppLayout); |
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js index 1ee7733b9..87233f7ca 100644 --- a/src/components/layout/Sidebar.js +++ b/src/components/layout/Sidebar.js | |||
@@ -1,12 +1,19 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import ReactTooltip from 'react-tooltip'; | 3 | import ReactTooltip from 'react-tooltip'; |
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, injectIntl } from 'react-intl'; |
5 | import { inject, observer } from 'mobx-react'; | 5 | import { inject, observer } from 'mobx-react'; |
6 | import { Link } from 'react-router'; | 6 | import { Link } from 'react-router'; |
7 | 7 | ||
8 | import Tabbar from '../services/tabs/Tabbar'; | 8 | import Tabbar from '../services/tabs/Tabbar'; |
9 | import { settingsShortcutKey, lockFerdiShortcutKey, todosToggleShortcutKey, workspaceToggleShortcutKey, addNewServiceShortcutKey, muteFerdiShortcutKey } from '../../environment'; | 9 | import { |
10 | settingsShortcutKey, | ||
11 | lockFerdiShortcutKey, | ||
12 | todosToggleShortcutKey, | ||
13 | workspaceToggleShortcutKey, | ||
14 | addNewServiceShortcutKey, | ||
15 | muteFerdiShortcutKey, | ||
16 | } from '../../environment'; | ||
10 | import { workspaceStore } from '../../features/workspaces'; | 17 | import { workspaceStore } from '../../features/workspaces'; |
11 | import { todosStore } from '../../features/todos'; | 18 | import { todosStore } from '../../features/todos'; |
12 | import { todoActions } from '../../features/todos/actions'; | 19 | import { todoActions } from '../../features/todos/actions'; |
@@ -17,39 +24,41 @@ import globalMessages from '../../i18n/globalMessages'; | |||
17 | const messages = defineMessages({ | 24 | const messages = defineMessages({ |
18 | addNewService: { | 25 | addNewService: { |
19 | id: 'sidebar.addNewService', | 26 | id: 'sidebar.addNewService', |
20 | defaultMessage: '!!!Add new service', | 27 | defaultMessage: 'Add new service', |
21 | }, | 28 | }, |
22 | mute: { | 29 | mute: { |
23 | id: 'sidebar.muteApp', | 30 | id: 'sidebar.muteApp', |
24 | defaultMessage: '!!!Disable notifications & audio', | 31 | defaultMessage: 'Disable notifications & audio', |
25 | }, | 32 | }, |
26 | unmute: { | 33 | unmute: { |
27 | id: 'sidebar.unmuteApp', | 34 | id: 'sidebar.unmuteApp', |
28 | defaultMessage: '!!!Enable notifications & audio', | 35 | defaultMessage: 'Enable notifications & audio', |
29 | }, | 36 | }, |
30 | openWorkspaceDrawer: { | 37 | openWorkspaceDrawer: { |
31 | id: 'sidebar.openWorkspaceDrawer', | 38 | id: 'sidebar.openWorkspaceDrawer', |
32 | defaultMessage: '!!!Open workspace drawer', | 39 | defaultMessage: 'Open workspace drawer', |
33 | }, | 40 | }, |
34 | closeWorkspaceDrawer: { | 41 | closeWorkspaceDrawer: { |
35 | id: 'sidebar.closeWorkspaceDrawer', | 42 | id: 'sidebar.closeWorkspaceDrawer', |
36 | defaultMessage: '!!!Close workspace drawer', | 43 | defaultMessage: 'Close workspace drawer', |
37 | }, | 44 | }, |
38 | openTodosDrawer: { | 45 | openTodosDrawer: { |
39 | id: 'sidebar.openTodosDrawer', | 46 | id: 'sidebar.openTodosDrawer', |
40 | defaultMessage: '!!!Open Ferdi Todos', | 47 | defaultMessage: 'Open Ferdi Todos', |
41 | }, | 48 | }, |
42 | closeTodosDrawer: { | 49 | closeTodosDrawer: { |
43 | id: 'sidebar.closeTodosDrawer', | 50 | id: 'sidebar.closeTodosDrawer', |
44 | defaultMessage: '!!!Close Ferdi Todos', | 51 | defaultMessage: 'Close Ferdi Todos', |
45 | }, | 52 | }, |
46 | lockFerdi: { | 53 | lockFerdi: { |
47 | id: 'sidebar.lockFerdi', | 54 | id: 'sidebar.lockFerdi', |
48 | defaultMessage: '!!!Lock Ferdi', | 55 | defaultMessage: 'Lock Ferdi', |
49 | }, | 56 | }, |
50 | }); | 57 | }); |
51 | 58 | ||
52 | export default @inject('stores', 'actions') @observer class Sidebar extends Component { | 59 | @inject('stores', 'actions') |
60 | @observer | ||
61 | class Sidebar extends Component { | ||
53 | static propTypes = { | 62 | static propTypes = { |
54 | openSettings: PropTypes.func.isRequired, | 63 | openSettings: PropTypes.func.isRequired, |
55 | closeSettings: PropTypes.func.isRequired, | 64 | closeSettings: PropTypes.func.isRequired, |
@@ -79,10 +88,6 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp | |||
79 | }).isRequired, | 88 | }).isRequired, |
80 | }; | 89 | }; |
81 | 90 | ||
82 | static contextTypes = { | ||
83 | intl: intlShape, | ||
84 | }; | ||
85 | |||
86 | state = { | 91 | state = { |
87 | tooltipEnabled: true, | 92 | tooltipEnabled: true, |
88 | }; | 93 | }; |
@@ -115,14 +120,14 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp | |||
115 | actions, | 120 | actions, |
116 | isTodosServiceActive, | 121 | isTodosServiceActive, |
117 | } = this.props; | 122 | } = this.props; |
118 | const { intl } = this.context; | 123 | const { intl } = this.props; |
119 | const todosToggleMessage = ( | 124 | const todosToggleMessage = todosStore.isTodosPanelVisible |
120 | todosStore.isTodosPanelVisible ? messages.closeTodosDrawer : messages.openTodosDrawer | 125 | ? messages.closeTodosDrawer |
121 | ); | 126 | : messages.openTodosDrawer; |
122 | 127 | ||
123 | const workspaceToggleMessage = ( | 128 | const workspaceToggleMessage = isWorkspaceDrawerOpen |
124 | isWorkspaceDrawerOpen ? messages.closeWorkspaceDrawer : messages.openWorkspaceDrawer | 129 | ? messages.closeWorkspaceDrawer |
125 | ); | 130 | : messages.openWorkspaceDrawer; |
126 | const isLoggedIn = Boolean(localStorage.getItem('authToken')); | 131 | const isLoggedIn = Boolean(localStorage.getItem('authToken')); |
127 | 132 | ||
128 | return ( | 133 | return ( |
@@ -133,9 +138,9 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp | |||
133 | disableToolTip={() => this.disableToolTip()} | 138 | disableToolTip={() => this.disableToolTip()} |
134 | useVerticalStyle={stores.settings.all.app.useVerticalStyle} | 139 | useVerticalStyle={stores.settings.all.app.useVerticalStyle} |
135 | /> | 140 | /> |
136 | { isLoggedIn ? ( | 141 | {isLoggedIn ? ( |
137 | <> | 142 | <> |
138 | { stores.settings.all.app.lockingFeatureEnabled ? ( | 143 | {stores.settings.all.app.lockingFeatureEnabled ? ( |
139 | <button | 144 | <button |
140 | type="button" | 145 | type="button" |
141 | className="sidebar__button" | 146 | className="sidebar__button" |
@@ -147,12 +152,15 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp | |||
147 | }, | 152 | }, |
148 | }); | 153 | }); |
149 | }} | 154 | }} |
150 | data-tip={`${intl.formatMessage(messages.lockFerdi)} (${lockFerdiShortcutKey(false)})`} | 155 | data-tip={`${intl.formatMessage( |
156 | messages.lockFerdi, | ||
157 | )} (${lockFerdiShortcutKey(false)})`} | ||
151 | > | 158 | > |
152 | <i className="mdi mdi-lock" /> | 159 | <i className="mdi mdi-lock" /> |
153 | </button> | 160 | </button> |
154 | ) : null} | 161 | ) : null} |
155 | {todosStore.isFeatureEnabled && todosStore.isFeatureEnabledByUser ? ( | 162 | {todosStore.isFeatureEnabled && |
163 | todosStore.isFeatureEnabledByUser ? ( | ||
156 | <button | 164 | <button |
157 | type="button" | 165 | type="button" |
158 | onClick={() => { | 166 | onClick={() => { |
@@ -160,12 +168,16 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp | |||
160 | this.updateToolTip(); | 168 | this.updateToolTip(); |
161 | }} | 169 | }} |
162 | disabled={isTodosServiceActive} | 170 | disabled={isTodosServiceActive} |
163 | className={`sidebar__button sidebar__button--todos ${todosStore.isTodosPanelVisible ? 'is-active' : ''}`} | 171 | className={`sidebar__button sidebar__button--todos ${ |
164 | data-tip={`${intl.formatMessage(todosToggleMessage)} (${todosToggleShortcutKey(false)})`} | 172 | todosStore.isTodosPanelVisible ? 'is-active' : '' |
173 | }`} | ||
174 | data-tip={`${intl.formatMessage( | ||
175 | todosToggleMessage, | ||
176 | )} (${todosToggleShortcutKey(false)})`} | ||
165 | > | 177 | > |
166 | <i className="mdi mdi-check-all" /> | 178 | <i className="mdi mdi-check-all" /> |
167 | </button> | 179 | </button> |
168 | ) : null} | 180 | ) : null} |
169 | {workspaceStore.isFeatureEnabled ? ( | 181 | {workspaceStore.isFeatureEnabled ? ( |
170 | <button | 182 | <button |
171 | type="button" | 183 | type="button" |
@@ -173,8 +185,12 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp | |||
173 | toggleWorkspaceDrawer(); | 185 | toggleWorkspaceDrawer(); |
174 | this.updateToolTip(); | 186 | this.updateToolTip(); |
175 | }} | 187 | }} |
176 | className={`sidebar__button sidebar__button--workspaces ${isWorkspaceDrawerOpen ? 'is-active' : ''}`} | 188 | className={`sidebar__button sidebar__button--workspaces ${ |
177 | data-tip={`${intl.formatMessage(workspaceToggleMessage)} (${workspaceToggleShortcutKey(false)})`} | 189 | isWorkspaceDrawerOpen ? 'is-active' : '' |
190 | }`} | ||
191 | data-tip={`${intl.formatMessage( | ||
192 | workspaceToggleMessage, | ||
193 | )} (${workspaceToggleShortcutKey(false)})`} | ||
178 | > | 194 | > |
179 | <i className="mdi mdi-view-grid" /> | 195 | <i className="mdi mdi-view-grid" /> |
180 | </button> | 196 | </button> |
@@ -185,8 +201,12 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp | |||
185 | toggleMuteApp(); | 201 | toggleMuteApp(); |
186 | this.updateToolTip(); | 202 | this.updateToolTip(); |
187 | }} | 203 | }} |
188 | className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`} | 204 | className={`sidebar__button sidebar__button--audio ${ |
189 | data-tip={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)} (${muteFerdiShortcutKey(false)})`} | 205 | isAppMuted ? 'is-muted' : '' |
206 | }`} | ||
207 | data-tip={`${intl.formatMessage( | ||
208 | isAppMuted ? messages.unmute : messages.mute, | ||
209 | )} (${muteFerdiShortcutKey(false)})`} | ||
190 | > | 210 | > |
191 | <i className={`mdi mdi-bell${isAppMuted ? '-off' : ''}`} /> | 211 | <i className={`mdi mdi-bell${isAppMuted ? '-off' : ''}`} /> |
192 | </button> | 212 | </button> |
@@ -194,7 +214,9 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp | |||
194 | type="button" | 214 | type="button" |
195 | onClick={() => openSettings({ path: 'recipes' })} | 215 | onClick={() => openSettings({ path: 'recipes' })} |
196 | className="sidebar__button sidebar__button--new-service" | 216 | className="sidebar__button sidebar__button--new-service" |
197 | data-tip={`${intl.formatMessage(messages.addNewService)} (${addNewServiceShortcutKey(false)})`} | 217 | data-tip={`${intl.formatMessage( |
218 | messages.addNewService, | ||
219 | )} (${addNewServiceShortcutKey(false)})`} | ||
198 | > | 220 | > |
199 | <i className="mdi mdi-plus-box" /> | 221 | <i className="mdi mdi-plus-box" /> |
200 | </button> | 222 | </button> |
@@ -212,15 +234,17 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp | |||
212 | type="button" | 234 | type="button" |
213 | onClick={() => openSettings({ path: 'app' })} | 235 | onClick={() => openSettings({ path: 'app' })} |
214 | className="sidebar__button sidebar__button--settings" | 236 | className="sidebar__button sidebar__button--settings" |
215 | data-tip={`${intl.formatMessage(globalMessages.settings)} (${settingsShortcutKey(false)})`} | 237 | data-tip={`${intl.formatMessage( |
238 | globalMessages.settings, | ||
239 | )} (${settingsShortcutKey(false)})`} | ||
216 | > | 240 | > |
217 | <i className="mdi mdi-cog" /> | 241 | <i className="mdi mdi-cog" /> |
218 | { (this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.AVAILABLE | 242 | {(this.props.stores.app.updateStatus === |
219 | || this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.DOWNLOADED) && ( | 243 | this.props.stores.app.updateStatusTypes.AVAILABLE || |
220 | <span className="update-available"> | 244 | this.props.stores.app.updateStatus === |
221 | • | 245 | this.props.stores.app.updateStatusTypes.DOWNLOADED) && ( |
222 | </span> | 246 | <span className="update-available">•</span> |
223 | ) } | 247 | )} |
224 | </button> | 248 | </button> |
225 | {this.state.tooltipEnabled && ( | 249 | {this.state.tooltipEnabled && ( |
226 | <ReactTooltip place="right" type="dark" effect="solid" /> | 250 | <ReactTooltip place="right" type="dark" effect="solid" /> |
@@ -229,3 +253,5 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp | |||
229 | ); | 253 | ); |
230 | } | 254 | } |
231 | } | 255 | } |
256 | |||
257 | export default injectIntl(Sidebar); | ||