diff options
Diffstat (limited to 'src/components/layout')
-rw-r--r-- | src/components/layout/Sidebar.js | 33 |
1 files changed, 31 insertions, 2 deletions
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js index 0d3a7c20c..1d3c81dcd 100644 --- a/src/components/layout/Sidebar.js +++ b/src/components/layout/Sidebar.js | |||
@@ -14,6 +14,7 @@ import { | |||
14 | mdiMenu, | 14 | mdiMenu, |
15 | mdiChevronDown, | 15 | mdiChevronDown, |
16 | mdiChevronRight, | 16 | mdiChevronRight, |
17 | mdiViewSplitVertical, | ||
17 | } from '@mdi/js'; | 18 | } from '@mdi/js'; |
18 | 19 | ||
19 | import Tabbar from '../services/tabs/Tabbar'; | 20 | import Tabbar from '../services/tabs/Tabbar'; |
@@ -23,6 +24,7 @@ import { | |||
23 | todosToggleShortcutKey, | 24 | todosToggleShortcutKey, |
24 | workspaceToggleShortcutKey, | 25 | workspaceToggleShortcutKey, |
25 | addNewServiceShortcutKey, | 26 | addNewServiceShortcutKey, |
27 | splitModeToggleShortcutKey, | ||
26 | muteFerdiumShortcutKey, | 28 | muteFerdiumShortcutKey, |
27 | } from '../../environment'; | 29 | } from '../../environment'; |
28 | import { todosStore } from '../../features/todos'; | 30 | import { todosStore } from '../../features/todos'; |
@@ -37,6 +39,10 @@ const messages = defineMessages({ | |||
37 | id: 'sidebar.addNewService', | 39 | id: 'sidebar.addNewService', |
38 | defaultMessage: 'Add new service', | 40 | defaultMessage: 'Add new service', |
39 | }, | 41 | }, |
42 | splitModeToggle: { | ||
43 | id: 'sidebar.splitModeToggle', | ||
44 | defaultMessage: 'Split Mode Toggle', | ||
45 | }, | ||
40 | mute: { | 46 | mute: { |
41 | id: 'sidebar.muteApp', | 47 | id: 'sidebar.muteApp', |
42 | defaultMessage: 'Disable notifications & audio', | 48 | defaultMessage: 'Disable notifications & audio', |
@@ -137,11 +143,14 @@ class Sidebar extends Component { | |||
137 | isTodosServiceActive, | 143 | isTodosServiceActive, |
138 | } = this.props; | 144 | } = this.props; |
139 | const { | 145 | const { |
146 | hideCollapseButton, | ||
140 | hideRecipesButton, | 147 | hideRecipesButton, |
141 | hideWorkspacesButton, | 148 | hideWorkspacesButton, |
142 | hideNotificationsButton, | 149 | hideNotificationsButton, |
143 | hideSettingsButton, | 150 | hideSettingsButton, |
144 | useVerticalStyle | 151 | hideSplitModeButton, |
152 | useVerticalStyle, | ||
153 | splitMode, | ||
145 | } = stores.settings.app; | 154 | } = stores.settings.app; |
146 | const { intl } = this.props; | 155 | const { intl } = this.props; |
147 | const todosToggleMessage = todosStore.isTodosPanelVisible | 156 | const todosToggleMessage = todosStore.isTodosPanelVisible |
@@ -157,6 +166,7 @@ class Sidebar extends Component { | |||
157 | !hideWorkspacesButton, | 166 | !hideWorkspacesButton, |
158 | !hideNotificationsButton, | 167 | !hideNotificationsButton, |
159 | !hideSettingsButton, | 168 | !hideSettingsButton, |
169 | !hideSplitModeButton, | ||
160 | todosStore.isFeatureEnabledByUser | 170 | todosStore.isFeatureEnabledByUser |
161 | ].filter(Boolean).length; | 171 | ].filter(Boolean).length; |
162 | 172 | ||
@@ -169,7 +179,7 @@ class Sidebar extends Component { | |||
169 | useVerticalStyle={stores.settings.all.app.useVerticalStyle} | 179 | useVerticalStyle={stores.settings.all.app.useVerticalStyle} |
170 | /> | 180 | /> |
171 | <> | 181 | <> |
172 | {numberActiveButtons <= 1 ? ( | 182 | {numberActiveButtons <= 1 || hideCollapseButton ? ( |
173 | null | 183 | null |
174 | ) : | 184 | ) : |
175 | <button | 185 | <button |
@@ -199,6 +209,25 @@ class Sidebar extends Component { | |||
199 | <Icon icon={mdiPlusBox} size={1.5} /> | 209 | <Icon icon={mdiPlusBox} size={1.5} /> |
200 | </button> | 210 | </button> |
201 | ) : null} | 211 | ) : null} |
212 | {!hideSplitModeButton && !this.state.isCollapsed ? ( | ||
213 | <button | ||
214 | type="button" | ||
215 | onClick={() => { | ||
216 | actions.settings.update({ | ||
217 | type: 'app', | ||
218 | data: { | ||
219 | splitMode: !splitMode, | ||
220 | }, | ||
221 | }); | ||
222 | }} | ||
223 | className="sidebar__button sidebar__button--split-mode-toggle" | ||
224 | data-tip={`${intl.formatMessage( | ||
225 | messages.splitModeToggle, | ||
226 | )} (${splitModeToggleShortcutKey(false)})`} | ||
227 | > | ||
228 | <Icon icon={mdiViewSplitVertical} size={1.5} /> | ||
229 | </button> | ||
230 | ) : null} | ||
202 | {!hideWorkspacesButton && !this.state.isCollapsed ? ( | 231 | {!hideWorkspacesButton && !this.state.isCollapsed ? ( |
203 | <button | 232 | <button |
204 | type="button" | 233 | type="button" |