diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/components/settings/settings/EditSettingsForm.js | 2 | ||||
-rw-r--r-- | src/config.ts | 10 | ||||
-rw-r--r-- | src/containers/settings/EditSettingsScreen.js | 17 | ||||
-rw-r--r-- | src/features/appearance/index.ts | 36 | ||||
-rw-r--r-- | src/helpers/i18n-helpers.ts | 13 |
5 files changed, 72 insertions, 6 deletions
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js index b7d45a01c..9fe229f11 100644 --- a/src/components/settings/settings/EditSettingsForm.js +++ b/src/components/settings/settings/EditSettingsForm.js | |||
@@ -572,6 +572,8 @@ class EditSettingsForm extends Component { | |||
572 | 572 | ||
573 | <Select field={form.$('serviceRibbonWidth')} /> | 573 | <Select field={form.$('serviceRibbonWidth')} /> |
574 | 574 | ||
575 | <Select field={form.$('sidebarServicesLocation')} /> | ||
576 | |||
575 | <Toggle field={form.$('useVerticalStyle')} /> | 577 | <Toggle field={form.$('useVerticalStyle')} /> |
576 | 578 | ||
577 | <Toggle field={form.$('hideRecipesButton')} /> | 579 | <Toggle field={form.$('hideRecipesButton')} /> |
diff --git a/src/config.ts b/src/config.ts index 48056533f..495a07026 100644 --- a/src/config.ts +++ b/src/config.ts | |||
@@ -140,6 +140,15 @@ export const SIDEBAR_WIDTH = { | |||
140 | 100: 'Extremely wide sidebar', | 140 | 100: 'Extremely wide sidebar', |
141 | }; | 141 | }; |
142 | 142 | ||
143 | export const SIDEBAR_SERVICES_LOCATION_TOPLEFT = 0; | ||
144 | export const SIDEBAR_SERVICES_LOCATION_CENTER = 1; | ||
145 | export const SIDEBAR_SERVICES_LOCATION_BOTTOMRIGHT = 2; | ||
146 | export const SIDEBAR_SERVICES_LOCATION = { | ||
147 | [SIDEBAR_SERVICES_LOCATION_TOPLEFT]: 'Top/Left', | ||
148 | [SIDEBAR_SERVICES_LOCATION_CENTER]: 'Center', | ||
149 | [SIDEBAR_SERVICES_LOCATION_BOTTOMRIGHT]: 'Bottom/Right' | ||
150 | } | ||
151 | |||
143 | export const ICON_SIZES = { | 152 | export const ICON_SIZES = { |
144 | 0: 'Very small icons', | 153 | 0: 'Very small icons', |
145 | 10: 'Small icons', | 154 | 10: 'Small icons', |
@@ -238,6 +247,7 @@ export const DEFAULT_APP_SETTINGS = { | |||
238 | adaptableDarkMode: true, | 247 | adaptableDarkMode: true, |
239 | accentColor: DEFAULT_ACCENT_COLOR, | 248 | accentColor: DEFAULT_ACCENT_COLOR, |
240 | serviceRibbonWidth: 68, | 249 | serviceRibbonWidth: 68, |
250 | sidebarServicesLocation: SIDEBAR_SERVICES_LOCATION_TOPLEFT, | ||
241 | iconSize: iconSizeBias, | 251 | iconSize: iconSizeBias, |
242 | sentry: false, | 252 | sentry: false, |
243 | navigationBarBehaviour: 'custom', | 253 | navigationBarBehaviour: 'custom', |
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js index 6f906684e..4c5e6d921 100644 --- a/src/containers/settings/EditSettingsScreen.js +++ b/src/containers/settings/EditSettingsScreen.js | |||
@@ -14,6 +14,7 @@ import { | |||
14 | DEFAULT_APP_SETTINGS, | 14 | DEFAULT_APP_SETTINGS, |
15 | HIBERNATION_STRATEGIES, | 15 | HIBERNATION_STRATEGIES, |
16 | SIDEBAR_WIDTH, | 16 | SIDEBAR_WIDTH, |
17 | SIDEBAR_SERVICES_LOCATION, | ||
17 | ICON_SIZES, | 18 | ICON_SIZES, |
18 | NAVIGATION_BAR_BEHAVIOURS, | 19 | NAVIGATION_BAR_BEHAVIOURS, |
19 | SEARCH_ENGINE_NAMES, | 20 | SEARCH_ENGINE_NAMES, |
@@ -189,6 +190,10 @@ const messages = defineMessages({ | |||
189 | id: 'settings.app.form.serviceRibbonWidth', | 190 | id: 'settings.app.form.serviceRibbonWidth', |
190 | defaultMessage: 'Sidebar width', | 191 | defaultMessage: 'Sidebar width', |
191 | }, | 192 | }, |
193 | sidebarServicesLocation: { | ||
194 | id: 'settings.app.form.sidebarServicesLocation', | ||
195 | defaultMessage: 'Sidebar Services Icons Location', | ||
196 | }, | ||
192 | iconSize: { | 197 | iconSize: { |
193 | id: 'settings.app.form.iconSize', | 198 | id: 'settings.app.form.iconSize', |
194 | defaultMessage: 'Service icon size', | 199 | defaultMessage: 'Service icon size', |
@@ -344,6 +349,7 @@ class EditSettingsScreen extends Component { | |||
344 | splitMode: Boolean(settingsData.splitMode), | 349 | splitMode: Boolean(settingsData.splitMode), |
345 | splitColumns: Number(settingsData.splitColumns), | 350 | splitColumns: Number(settingsData.splitColumns), |
346 | serviceRibbonWidth: Number(settingsData.serviceRibbonWidth), | 351 | serviceRibbonWidth: Number(settingsData.serviceRibbonWidth), |
352 | sidebarServicesLocation: Number(settingsData.sidebarServicesLocation), | ||
347 | iconSize: Number(settingsData.iconSize), | 353 | iconSize: Number(settingsData.iconSize), |
348 | enableLongPressServiceHint: Boolean( | 354 | enableLongPressServiceHint: Boolean( |
349 | settingsData.enableLongPressServiceHint, | 355 | settingsData.enableLongPressServiceHint, |
@@ -442,6 +448,11 @@ class EditSettingsScreen extends Component { | |||
442 | sort: false, | 448 | sort: false, |
443 | }); | 449 | }); |
444 | 450 | ||
451 | const sidebarServicesLocation = getSelectOptions({ | ||
452 | locales: SIDEBAR_SERVICES_LOCATION, | ||
453 | sort: false, | ||
454 | }); | ||
455 | |||
445 | const iconSizes = getSelectOptions({ | 456 | const iconSizes = getSelectOptions({ |
446 | locales: ICON_SIZES, | 457 | locales: ICON_SIZES, |
447 | sort: false, | 458 | sort: false, |
@@ -683,6 +694,12 @@ class EditSettingsScreen extends Component { | |||
683 | default: DEFAULT_APP_SETTINGS.serviceRibbonWidth, | 694 | default: DEFAULT_APP_SETTINGS.serviceRibbonWidth, |
684 | options: sidebarWidth, | 695 | options: sidebarWidth, |
685 | }, | 696 | }, |
697 | sidebarServicesLocation: { | ||
698 | label: intl.formatMessage(messages.sidebarServicesLocation), | ||
699 | value: settings.all.app.sidebarServicesLocation, | ||
700 | default: DEFAULT_APP_SETTINGS.sidebarServicesLocation, | ||
701 | options: sidebarServicesLocation, | ||
702 | }, | ||
686 | iconSize: { | 703 | iconSize: { |
687 | label: intl.formatMessage(messages.iconSize), | 704 | label: intl.formatMessage(messages.iconSize), |
688 | value: settings.all.app.iconSize, | 705 | value: settings.all.app.iconSize, |
diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts index 094d93dcc..04b4b059d 100644 --- a/src/features/appearance/index.ts +++ b/src/features/appearance/index.ts | |||
@@ -1,7 +1,15 @@ | |||
1 | import color from 'color'; | 1 | import color from 'color'; |
2 | import { reaction } from 'mobx'; | 2 | import { reaction } from 'mobx'; |
3 | import { isWindows, isLinux } from '../../environment'; | 3 | import { isWindows, isLinux } from '../../environment'; |
4 | import { DEFAULT_APP_SETTINGS, iconSizeBias } from '../../config'; | 4 | import { |
5 | DEFAULT_APP_SETTINGS, | ||
6 | iconSizeBias, | ||
7 | SIDEBAR_SERVICES_LOCATION_TOPLEFT, | ||
8 | SIDEBAR_SERVICES_LOCATION_CENTER, | ||
9 | SIDEBAR_SERVICES_LOCATION_BOTTOMRIGHT, | ||
10 | } from '../../config'; | ||
11 | |||
12 | |||
5 | 13 | ||
6 | const STYLE_ELEMENT_ID = 'custom-appearance-style'; | 14 | const STYLE_ELEMENT_ID = 'custom-appearance-style'; |
7 | 15 | ||
@@ -123,6 +131,7 @@ function generateServiceRibbonWidthStyle( | |||
123 | iconSizeStr, | 131 | iconSizeStr, |
124 | vertical, | 132 | vertical, |
125 | isLabelEnabled, | 133 | isLabelEnabled, |
134 | sidebarServicesLocation, | ||
126 | ) { | 135 | ) { |
127 | const width = Number(widthStr); | 136 | const width = Number(widthStr); |
128 | const iconSize = Number(iconSizeStr) - iconSizeBias; | 137 | const iconSize = Number(iconSizeStr) - iconSizeBias; |
@@ -180,12 +189,31 @@ function generateServiceRibbonWidthStyle( | |||
180 | // Due to the lowest values for SIDEBAR_WIDTH and ICON_SIZES, this can be computed to a negative value | 189 | // Due to the lowest values for SIDEBAR_WIDTH and ICON_SIZES, this can be computed to a negative value |
181 | const minimumAdjustedIconSize = Math.max(width / 2 + iconSize, 2); | 190 | const minimumAdjustedIconSize = Math.max(width / 2 + iconSize, 2); |
182 | 191 | ||
192 | let sidebarServicesAlignment; | ||
193 | switch (sidebarServicesLocation) { | ||
194 | case SIDEBAR_SERVICES_LOCATION_TOPLEFT: | ||
195 | sidebarServicesAlignment = vertical ? "left" : "start"; | ||
196 | break; | ||
197 | case SIDEBAR_SERVICES_LOCATION_CENTER: | ||
198 | sidebarServicesAlignment = vertical ? "center" : "center"; | ||
199 | break; | ||
200 | case SIDEBAR_SERVICES_LOCATION_BOTTOMRIGHT: | ||
201 | sidebarServicesAlignment = vertical ? "right" : "end"; | ||
202 | break; | ||
203 | default: | ||
204 | sidebarServicesAlignment = vertical ? "left" : "start"; | ||
205 | break; | ||
206 | } | ||
207 | |||
183 | return vertical | 208 | return vertical |
184 | ? ` | 209 | ? ` |
185 | .sidebar { | 210 | .sidebar { |
186 | height: ${width}px !important; | 211 | height: ${width}px !important; |
187 | overflow: hidden !important; | 212 | overflow: hidden !important; |
188 | } | 213 | } |
214 | .sidebar div { | ||
215 | justify-content: ${sidebarServicesAlignment}; | ||
216 | } | ||
189 | .tab-item { | 217 | .tab-item { |
190 | height: ${width - tabItemWidthBias}px !important; | 218 | height: ${width - tabItemWidthBias}px !important; |
191 | width: ${width + iconSize + tabItemHeightBias}px !important; | 219 | width: ${width + iconSize + tabItemHeightBias}px !important; |
@@ -221,6 +249,9 @@ function generateServiceRibbonWidthStyle( | |||
221 | .sidebar { | 249 | .sidebar { |
222 | width: ${width}px !important; | 250 | width: ${width}px !important; |
223 | } | 251 | } |
252 | .tabs { | ||
253 | justify-content: ${sidebarServicesAlignment}; | ||
254 | } | ||
224 | .tab-item { | 255 | .tab-item { |
225 | width: ${width}px !important; | 256 | width: ${width}px !important; |
226 | height: ${width - tabItemWidthBias}px !important; | 257 | height: ${width - tabItemWidthBias}px !important; |
@@ -310,6 +341,7 @@ function generateStyle(settings) { | |||
310 | const { | 341 | const { |
311 | accentColor, | 342 | accentColor, |
312 | serviceRibbonWidth, | 343 | serviceRibbonWidth, |
344 | sidebarServicesLocation, | ||
313 | iconSize, | 345 | iconSize, |
314 | showDragArea, | 346 | showDragArea, |
315 | useVerticalStyle, | 347 | useVerticalStyle, |
@@ -328,6 +360,7 @@ function generateStyle(settings) { | |||
328 | iconSize, | 360 | iconSize, |
329 | useVerticalStyle, | 361 | useVerticalStyle, |
330 | showServiceName, | 362 | showServiceName, |
363 | sidebarServicesLocation, | ||
331 | ); | 364 | ); |
332 | 365 | ||
333 | if (showDragArea) { | 366 | if (showDragArea) { |
@@ -363,6 +396,7 @@ export default function initAppearance(stores) { | |||
363 | settings.all.app.serviceRibbonWidth, | 396 | settings.all.app.serviceRibbonWidth, |
364 | settings.all.app.iconSize, | 397 | settings.all.app.iconSize, |
365 | settings.all.app.showDragArea, | 398 | settings.all.app.showDragArea, |
399 | settings.all.app.sidebarServicesLocation, | ||
366 | settings.all.app.useVerticalStyle, | 400 | settings.all.app.useVerticalStyle, |
367 | settings.all.app.alwaysShowWorkspaces, | 401 | settings.all.app.alwaysShowWorkspaces, |
368 | settings.all.app.showServiceName, | 402 | settings.all.app.showServiceName, |
diff --git a/src/helpers/i18n-helpers.ts b/src/helpers/i18n-helpers.ts index e6c66c7d3..9d48a0cf7 100644 --- a/src/helpers/i18n-helpers.ts +++ b/src/helpers/i18n-helpers.ts | |||
@@ -24,6 +24,7 @@ export function getSelectOptions({ | |||
24 | resetToDefaultText = '', | 24 | resetToDefaultText = '', |
25 | automaticDetectionText = '', | 25 | automaticDetectionText = '', |
26 | sort = true, | 26 | sort = true, |
27 | addDefault=false, | ||
27 | }) { | 28 | }) { |
28 | const options: object[] = []; | 29 | const options: object[] = []; |
29 | 30 | ||
@@ -41,11 +42,13 @@ export function getSelectOptions({ | |||
41 | }); | 42 | }); |
42 | } | 43 | } |
43 | 44 | ||
44 | options.push({ | 45 | if (addDefault) { |
45 | value: '───', | 46 | options.push({ |
46 | label: '───', | 47 | value: '───', |
47 | disabled: true, | 48 | label: '───', |
48 | }); | 49 | disabled: true, |
50 | }); | ||
51 | } | ||
49 | 52 | ||
50 | let keys = Object.keys(locales); | 53 | let keys = Object.keys(locales); |
51 | if (sort) { | 54 | if (sort) { |