Feature: makes Services location in sidebar changeable (#95)

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 {
 
                 <Select field={form.$('serviceRibbonWidth')} />
 
+                <Select field={form.$('sidebarServicesLocation')} />
+
                 <Toggle field={form.$('useVerticalStyle')} />
 
                 <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 = {
   100: 'Extremely wide sidebar',
 };
 
+export const SIDEBAR_SERVICES_LOCATION_TOPLEFT = 0;
+export const SIDEBAR_SERVICES_LOCATION_CENTER = 1;
+export const SIDEBAR_SERVICES_LOCATION_BOTTOMRIGHT = 2;
+export const SIDEBAR_SERVICES_LOCATION = {
+  [SIDEBAR_SERVICES_LOCATION_TOPLEFT]: 'Top/Left',
+  [SIDEBAR_SERVICES_LOCATION_CENTER]: 'Center',
+  [SIDEBAR_SERVICES_LOCATION_BOTTOMRIGHT]: 'Bottom/Right'
+}
+
 export const ICON_SIZES = {
   0: 'Very small icons',
   10: 'Small icons',
@@ -238,6 +247,7 @@ export const DEFAULT_APP_SETTINGS = {
   adaptableDarkMode: true,
   accentColor: DEFAULT_ACCENT_COLOR,
   serviceRibbonWidth: 68,
+  sidebarServicesLocation: SIDEBAR_SERVICES_LOCATION_TOPLEFT,
   iconSize: iconSizeBias,
   sentry: false,
   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 {
   DEFAULT_APP_SETTINGS,
   HIBERNATION_STRATEGIES,
   SIDEBAR_WIDTH,
+  SIDEBAR_SERVICES_LOCATION,
   ICON_SIZES,
   NAVIGATION_BAR_BEHAVIOURS,
   SEARCH_ENGINE_NAMES,
@@ -189,6 +190,10 @@ const messages = defineMessages({
     id: 'settings.app.form.serviceRibbonWidth',
     defaultMessage: 'Sidebar width',
   },
+  sidebarServicesLocation: {
+    id: 'settings.app.form.sidebarServicesLocation',
+    defaultMessage: 'Sidebar Services Icons Location',
+  },
   iconSize: {
     id: 'settings.app.form.iconSize',
     defaultMessage: 'Service icon size',
@@ -344,6 +349,7 @@ class EditSettingsScreen extends Component {
         splitMode: Boolean(settingsData.splitMode),
         splitColumns: Number(settingsData.splitColumns),
         serviceRibbonWidth: Number(settingsData.serviceRibbonWidth),
+        sidebarServicesLocation: Number(settingsData.sidebarServicesLocation),
         iconSize: Number(settingsData.iconSize),
         enableLongPressServiceHint: Boolean(
           settingsData.enableLongPressServiceHint,
@@ -442,6 +448,11 @@ class EditSettingsScreen extends Component {
       sort: false,
     });
 
+    const sidebarServicesLocation = getSelectOptions({
+      locales: SIDEBAR_SERVICES_LOCATION,
+      sort: false,
+    });
+
     const iconSizes = getSelectOptions({
       locales: ICON_SIZES,
       sort: false,
@@ -683,6 +694,12 @@ class EditSettingsScreen extends Component {
           default: DEFAULT_APP_SETTINGS.serviceRibbonWidth,
           options: sidebarWidth,
         },
+        sidebarServicesLocation: {
+          label: intl.formatMessage(messages.sidebarServicesLocation),
+          value: settings.all.app.sidebarServicesLocation,
+          default: DEFAULT_APP_SETTINGS.sidebarServicesLocation,
+          options: sidebarServicesLocation,
+        },
         iconSize: {
           label: intl.formatMessage(messages.iconSize),
           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 @@
 import color from 'color';
 import { reaction } from 'mobx';
 import { isWindows, isLinux } from '../../environment';
-import { DEFAULT_APP_SETTINGS, iconSizeBias } from '../../config';
+import {
+  DEFAULT_APP_SETTINGS,
+  iconSizeBias,
+  SIDEBAR_SERVICES_LOCATION_TOPLEFT,
+  SIDEBAR_SERVICES_LOCATION_CENTER,
+  SIDEBAR_SERVICES_LOCATION_BOTTOMRIGHT,
+} from '../../config';
+
+
 
 const STYLE_ELEMENT_ID = 'custom-appearance-style';
 
@@ -123,6 +131,7 @@ function generateServiceRibbonWidthStyle(
   iconSizeStr,
   vertical,
   isLabelEnabled,
+  sidebarServicesLocation,
 ) {
   const width = Number(widthStr);
   const iconSize = Number(iconSizeStr) - iconSizeBias;
@@ -180,12 +189,31 @@ function generateServiceRibbonWidthStyle(
   // Due to the lowest values for SIDEBAR_WIDTH and ICON_SIZES, this can be computed to a negative value
   const minimumAdjustedIconSize = Math.max(width / 2 + iconSize, 2);
 
+  let sidebarServicesAlignment;
+  switch (sidebarServicesLocation) {
+    case SIDEBAR_SERVICES_LOCATION_TOPLEFT:
+      sidebarServicesAlignment = vertical ? "left" : "start";
+      break;
+    case SIDEBAR_SERVICES_LOCATION_CENTER:
+      sidebarServicesAlignment = vertical ? "center" : "center";
+      break;
+    case SIDEBAR_SERVICES_LOCATION_BOTTOMRIGHT:
+      sidebarServicesAlignment = vertical ? "right" : "end";
+      break;
+    default:
+      sidebarServicesAlignment = vertical ? "left" : "start";
+      break;
+  }
+
   return vertical
     ? `
     .sidebar {
       height: ${width}px !important;
       overflow: hidden !important;
     }
+    .sidebar div {
+      justify-content: ${sidebarServicesAlignment};
+    }
     .tab-item {
       height: ${width - tabItemWidthBias}px !important;
       width: ${width + iconSize + tabItemHeightBias}px !important;
@@ -221,6 +249,9 @@ function generateServiceRibbonWidthStyle(
     .sidebar {
       width: ${width}px !important;
     }
+    .tabs {
+      justify-content: ${sidebarServicesAlignment};
+    }
     .tab-item {
       width: ${width}px !important;
       height: ${width - tabItemWidthBias}px !important;
@@ -310,6 +341,7 @@ function generateStyle(settings) {
   const {
     accentColor,
     serviceRibbonWidth,
+    sidebarServicesLocation,
     iconSize,
     showDragArea,
     useVerticalStyle,
@@ -328,6 +360,7 @@ function generateStyle(settings) {
     iconSize,
     useVerticalStyle,
     showServiceName,
+    sidebarServicesLocation,
   );
 
   if (showDragArea) {
@@ -363,6 +396,7 @@ export default function initAppearance(stores) {
       settings.all.app.serviceRibbonWidth,
       settings.all.app.iconSize,
       settings.all.app.showDragArea,
+      settings.all.app.sidebarServicesLocation,
       settings.all.app.useVerticalStyle,
       settings.all.app.alwaysShowWorkspaces,
       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({
   resetToDefaultText = '',
   automaticDetectionText = '',
   sort = true,
+  addDefault=false,
 }) {
   const options: object[] = [];
 
@@ -41,11 +42,13 @@ export function getSelectOptions({
     });
   }
 
-  options.push({
-    value: '───',
-    label: '───',
-    disabled: true,
-  });
+  if (addDefault) {
+    options.push({
+      value: '───',
+      label: '───',
+      disabled: true,
+    });
+  }
 
   let keys = Object.keys(locales);
   if (sort) {