aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/layout
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/layout')
-rw-r--r--src/components/layout/Sidebar.js141
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';
3import ReactTooltip from 'react-tooltip'; 3import ReactTooltip from 'react-tooltip';
4import { defineMessages, injectIntl } from 'react-intl'; 4import { defineMessages, injectIntl } from 'react-intl';
5import { inject, observer } from 'mobx-react'; 5import { inject, observer } from 'mobx-react';
6import { Link } from 'react-router';
7import { 6import {
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' })}