diff options
Diffstat (limited to 'src/components/layout')
-rw-r--r-- | src/components/layout/Sidebar.js | 141 |
1 files changed, 64 insertions, 77 deletions
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js index 57ba170e8..e3df9c2ea 100644 --- a/src/components/layout/Sidebar.js +++ b/src/components/layout/Sidebar.js | |||
@@ -3,12 +3,10 @@ import PropTypes from 'prop-types'; | |||
3 | import ReactTooltip from 'react-tooltip'; | 3 | import ReactTooltip from 'react-tooltip'; |
4 | import { defineMessages, injectIntl } 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'; | ||
7 | import { | 6 | import { |
8 | mdiCheckAll, | 7 | mdiCheckAll, |
9 | mdiViewGrid, | 8 | mdiViewGrid, |
10 | mdiPlusBox, | 9 | mdiPlusBox, |
11 | mdiLoginVariant, | ||
12 | mdiCog, | 10 | mdiCog, |
13 | mdiBellOff, | 11 | mdiBellOff, |
14 | mdiBell, | 12 | mdiBell, |
@@ -137,7 +135,6 @@ class Sidebar extends Component { | |||
137 | const workspaceToggleMessage = isWorkspaceDrawerOpen | 135 | const workspaceToggleMessage = isWorkspaceDrawerOpen |
138 | ? messages.closeWorkspaceDrawer | 136 | ? messages.closeWorkspaceDrawer |
139 | : messages.openWorkspaceDrawer; | 137 | : messages.openWorkspaceDrawer; |
140 | const isLoggedIn = Boolean(localStorage.getItem('authToken')); | ||
141 | 138 | ||
142 | return ( | 139 | return ( |
143 | <div className="sidebar"> | 140 | <div className="sidebar"> |
@@ -147,96 +144,86 @@ class Sidebar extends Component { | |||
147 | disableToolTip={() => this.disableToolTip()} | 144 | disableToolTip={() => this.disableToolTip()} |
148 | useVerticalStyle={stores.settings.all.app.useVerticalStyle} | 145 | useVerticalStyle={stores.settings.all.app.useVerticalStyle} |
149 | /> | 146 | /> |
150 | {isLoggedIn ? ( | 147 | <> |
151 | <> | 148 | <button |
152 | <button | 149 | type="button" |
153 | type="button" | 150 | onClick={() => openSettings({ path: 'recipes' })} |
154 | onClick={() => openSettings({ path: 'recipes' })} | 151 | className="sidebar__button sidebar__button--new-service" |
155 | className="sidebar__button sidebar__button--new-service" | 152 | data-tip={`${intl.formatMessage( |
156 | data-tip={`${intl.formatMessage( | 153 | messages.addNewService, |
157 | messages.addNewService, | 154 | )} (${addNewServiceShortcutKey(false)})`} |
158 | )} (${addNewServiceShortcutKey(false)})`} | 155 | > |
159 | > | 156 | <Icon icon={mdiPlusBox} size={1.5} /> |
160 | <Icon icon={mdiPlusBox} size={1.5} /> | 157 | </button> |
161 | </button> | 158 | <button |
159 | type="button" | ||
160 | onClick={() => { | ||
161 | toggleWorkspaceDrawer(); | ||
162 | this.updateToolTip(); | ||
163 | }} | ||
164 | className={`sidebar__button sidebar__button--workspaces ${ | ||
165 | isWorkspaceDrawerOpen ? 'is-active' : '' | ||
166 | }`} | ||
167 | data-tip={`${intl.formatMessage( | ||
168 | workspaceToggleMessage, | ||
169 | )} (${workspaceToggleShortcutKey(false)})`} | ||
170 | > | ||
171 | <Icon icon={mdiViewGrid} size={1.5} /> | ||
172 | </button> | ||
173 | {todosStore.isFeatureEnabledByUser ? ( | ||
162 | <button | 174 | <button |
163 | type="button" | 175 | type="button" |
164 | onClick={() => { | 176 | onClick={() => { |
165 | toggleWorkspaceDrawer(); | 177 | todoActions.toggleTodosPanel(); |
166 | this.updateToolTip(); | 178 | this.updateToolTip(); |
167 | }} | 179 | }} |
168 | className={`sidebar__button sidebar__button--workspaces ${ | 180 | disabled={isTodosServiceActive} |
169 | isWorkspaceDrawerOpen ? 'is-active' : '' | 181 | className={`sidebar__button sidebar__button--todos ${ |
182 | todosStore.isTodosPanelVisible ? 'is-active' : '' | ||
170 | }`} | 183 | }`} |
171 | data-tip={`${intl.formatMessage( | 184 | data-tip={`${intl.formatMessage( |
172 | workspaceToggleMessage, | 185 | todosToggleMessage, |
173 | )} (${workspaceToggleShortcutKey(false)})`} | 186 | )} (${todosToggleShortcutKey(false)})`} |
174 | > | 187 | > |
175 | <Icon icon={mdiViewGrid} size={1.5} /> | 188 | <Icon icon={mdiCheckAll} size={1.5} /> |
176 | </button> | 189 | </button> |
177 | {todosStore.isFeatureEnabledByUser ? ( | 190 | ) : null} |
178 | <button | 191 | <button |
179 | type="button" | 192 | type="button" |
180 | onClick={() => { | 193 | onClick={() => { |
181 | todoActions.toggleTodosPanel(); | 194 | toggleMuteApp(); |
182 | this.updateToolTip(); | 195 | this.updateToolTip(); |
183 | }} | 196 | }} |
184 | disabled={isTodosServiceActive} | 197 | className={`sidebar__button sidebar__button--audio ${ |
185 | className={`sidebar__button sidebar__button--todos ${ | 198 | isAppMuted ? 'is-muted' : '' |
186 | todosStore.isTodosPanelVisible ? 'is-active' : '' | 199 | }`} |
187 | }`} | 200 | data-tip={`${intl.formatMessage( |
188 | data-tip={`${intl.formatMessage( | 201 | isAppMuted ? messages.unmute : messages.mute, |
189 | todosToggleMessage, | 202 | )} (${muteFerdiShortcutKey(false)})`} |
190 | )} (${todosToggleShortcutKey(false)})`} | 203 | > |
191 | > | 204 | <Icon icon={isAppMuted ? mdiBellOff : mdiBell} size={1.5} /> |
192 | <Icon icon={mdiCheckAll} size={1.5} /> | 205 | </button> |
193 | </button> | 206 | |
194 | ) : null} | 207 | {stores.settings.all.app.lockingFeatureEnabled ? ( |
195 | <button | 208 | <button |
196 | type="button" | 209 | type="button" |
210 | className="sidebar__button" | ||
197 | onClick={() => { | 211 | onClick={() => { |
198 | toggleMuteApp(); | 212 | actions.settings.update({ |
199 | this.updateToolTip(); | 213 | type: 'app', |
214 | data: { | ||
215 | locked: true, | ||
216 | }, | ||
217 | }); | ||
200 | }} | 218 | }} |
201 | className={`sidebar__button sidebar__button--audio ${ | ||
202 | isAppMuted ? 'is-muted' : '' | ||
203 | }`} | ||
204 | data-tip={`${intl.formatMessage( | 219 | data-tip={`${intl.formatMessage( |
205 | isAppMuted ? messages.unmute : messages.mute, | 220 | messages.lockFerdi, |
206 | )} (${muteFerdiShortcutKey(false)})`} | 221 | )} (${lockFerdiShortcutKey(false)})`} |
207 | > | 222 | > |
208 | <Icon icon={isAppMuted ? mdiBellOff : mdiBell} size={1.5} /> | 223 | <Icon icon={mdiLock} size={1.5} /> |
209 | </button> | 224 | </button> |
210 | 225 | ) : null} | |
211 | {stores.settings.all.app.lockingFeatureEnabled ? ( | 226 | </> |
212 | <button | ||
213 | type="button" | ||
214 | className="sidebar__button" | ||
215 | onClick={() => { | ||
216 | actions.settings.update({ | ||
217 | type: 'app', | ||
218 | data: { | ||
219 | locked: true, | ||
220 | }, | ||
221 | }); | ||
222 | }} | ||
223 | data-tip={`${intl.formatMessage( | ||
224 | messages.lockFerdi, | ||
225 | )} (${lockFerdiShortcutKey(false)})`} | ||
226 | > | ||
227 | <Icon icon={mdiLock} size={1.5} /> | ||
228 | </button> | ||
229 | ) : null} | ||
230 | </> | ||
231 | ) : ( | ||
232 | <Link | ||
233 | to="/auth/welcome" | ||
234 | className="sidebar__button sidebar__button--new-service" | ||
235 | data-tip="Login" | ||
236 | > | ||
237 | <Icon icon={mdiLoginVariant} size={1.5} /> | ||
238 | </Link> | ||
239 | )} | ||
240 | <button | 227 | <button |
241 | type="button" | 228 | type="button" |
242 | onClick={() => openSettings({ path: 'app' })} | 229 | onClick={() => openSettings({ path: 'app' })} |