Add ability to change sidebar width

7 files changed, 97 insertions, 37 deletions

diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 6017252bc..5a373be4c 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -468,6 +468,10 @@ export default @observer class EditSettingsForm extends Component {
 
             <Hr />
 
+            <Select field={form.$('serviceRibbonWidth')} />
+
+            <Hr />
+
             <Input
               placeholder="Accent Color"
               onChange={e => this.submit(e)}
diff --git a/src/config.js b/src/config.js
index 895852ed8..193ba74e6 100644
--- a/src/config.js
+++ b/src/config.js
@@ -45,6 +45,16 @@ export const HIBERNATION_STRATEGIES = {
   3600: 'Extemely Slow Hibernation (1hour)',
 };
 
+export const SIDEBAR_WIDTH = {
+  35: 'Extemely slim sidebar',
+  45: 'Very slim sidebar',
+  55: 'Slim sidebar',
+  68: 'Normal sidebar',
+  80: 'Wide sidebar',
+  90: 'Very wide sidebar',
+  100: 'Extemely wide sidebar',
+};
+
 export const DEFAULT_APP_SETTINGS = {
   autoLaunchInBackground: false,
   runInBackground: true,
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index 8eb7c3b82..dac4c2b0a 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -10,7 +10,7 @@ import UserStore from '../../stores/UserStore';
 import TodosStore from '../../features/todos/store';
 import Form from '../../lib/Form';
 import { APP_LOCALES, SPELLCHECKER_LOCALES } from '../../i18n/languages';
-import { DEFAULT_APP_SETTINGS, HIBERNATION_STRATEGIES } from '../../config';
+import { DEFAULT_APP_SETTINGS, HIBERNATION_STRATEGIES, SIDEBAR_WIDTH } from '../../config';
 import { config as spellcheckerConfig } from '../../features/spellchecker';
 
 import { getSelectOptions } from '../../helpers/i18n-helpers';
@@ -118,6 +118,10 @@ const messages = defineMessages({
     id: 'settings.app.form.universalDarkMode',
     defaultMessage: '!!!Enable universal Dark Mode',
   },
+  serviceRibbonWidth: {
+    id: 'settings.app.form.serviceRibbonWidth',
+    defaultMessage: '!!!Sidebar width',
+  },
   accentColor: {
     id: 'settings.app.form.accentColor',
     defaultMessage: '!!!Accent color',
@@ -201,6 +205,7 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
         darkMode: settingsData.darkMode,
         adaptableDarkMode: settingsData.adaptableDarkMode,
         universalDarkMode: settingsData.universalDarkMode,
+        serviceRibbonWidth: settingsData.serviceRibbonWidth,
         accentColor: settingsData.accentColor,
         showMessageBadgeWhenMuted: settingsData.showMessageBadgeWhenMuted,
         enableSpellchecking: settingsData.enableSpellchecking,
@@ -253,6 +258,11 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
       sort: false,
     });
 
+    const sidebarWidth = getSelectOptions({
+      locales: SIDEBAR_WIDTH,
+      sort: false,
+    });
+
     const spellcheckingLanguages = getSelectOptions({
       locales: SPELLCHECKER_LOCALES,
       automaticDetectionText: this.context.intl.formatMessage(globalMessages.spellcheckerAutomaticDetection),
@@ -396,6 +406,12 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
           value: settings.all.app.universalDarkMode,
           default: DEFAULT_APP_SETTINGS.universalDarkMode,
         },
+        serviceRibbonWidth: {
+          label: intl.formatMessage(messages.serviceRibbonWidth),
+          value: settings.all.app.serviceRibbonWidth,
+          default: DEFAULT_APP_SETTINGS.serviceRibbonWidth,
+          options: sidebarWidth,
+        },
         accentColor: {
           label: intl.formatMessage(messages.accentColor),
           value: settings.all.app.accentColor,
diff --git a/src/features/appearance/index.js b/src/features/appearance/index.js
index 8a81054df..f99e69b0d 100644
--- a/src/features/appearance/index.js
+++ b/src/features/appearance/index.js
@@ -54,6 +54,9 @@ function generateServiceRibbonWidthStyle(width) {
     .tab-item .tab-item__icon {
       width: ${width / 2}px !important;
     }
+    .sidebar__button {
+      font-size: ${width / 3}px !important;
+    }
   `;
 }
 
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 17f77b609..2a0965b06 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -4383,120 +4383,133 @@
         }
       },
       {
-        "defaultMessage": "!!!Accent color",
+        "defaultMessage": "!!!Sidebar width",
         "end": {
           "column": 3,
           "line": 124
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
+        "id": "settings.app.form.serviceRibbonWidth",
+        "start": {
+          "column": 22,
+          "line": 121
+        }
+      },
+      {
+        "defaultMessage": "!!!Accent color",
+        "end": {
+          "column": 3,
+          "line": 128
+        },
+        "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.accentColor",
         "start": {
           "column": 15,
-          "line": 121
+          "line": 125
         }
       },
       {
         "defaultMessage": "!!!Display disabled services tabs",
         "end": {
           "column": 3,
-          "line": 128
+          "line": 132
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.showDisabledServices",
         "start": {
           "column": 24,
-          "line": 125
+          "line": 129
         }
       },
       {
         "defaultMessage": "!!!Show unread message badge when notifications are disabled",
         "end": {
           "column": 3,
-          "line": 132
+          "line": 136
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.showMessagesBadgesWhenMuted",
         "start": {
           "column": 29,
-          "line": 129
+          "line": 133
         }
       },
       {
         "defaultMessage": "!!!Enable spell checking",
         "end": {
           "column": 3,
-          "line": 136
+          "line": 140
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.enableSpellchecking",
         "start": {
           "column": 23,
-          "line": 133
+          "line": 137
         }
       },
       {
         "defaultMessage": "!!!Enable GPU Acceleration",
         "end": {
           "column": 3,
-          "line": 140
+          "line": 144
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.enableGPUAcceleration",
         "start": {
           "column": 25,
-          "line": 137
+          "line": 141
         }
       },
       {
         "defaultMessage": "!!!Include beta versions",
         "end": {
           "column": 3,
-          "line": 144
+          "line": 148
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.beta",
         "start": {
           "column": 8,
-          "line": 141
+          "line": 145
         }
       },
       {
         "defaultMessage": "!!!Disable updates",
         "end": {
           "column": 3,
-          "line": 148
+          "line": 152
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.noUpdates",
         "start": {
           "column": 13,
-          "line": 145
+          "line": 149
         }
       },
       {
         "defaultMessage": "!!!Enable Franz Todos",
         "end": {
           "column": 3,
-          "line": 152
+          "line": 156
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.enableTodos",
         "start": {
           "column": 15,
-          "line": 149
+          "line": 153
         }
       },
       {
         "defaultMessage": "!!!Keep all workspaces loaded",
         "end": {
           "column": 3,
-          "line": 156
+          "line": 160
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.keepAllWorkspacesLoaded",
         "start": {
           "column": 27,
-          "line": 153
+          "line": 157
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index ce41bb9ce..23733dba0 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -291,6 +291,7 @@
   "settings.app.form.scheduledDNDStart": "From",
   "settings.app.form.sentry": "Send telemetry data",
   "settings.app.form.server": "Server",
+  "settings.app.form.serviceRibbonWidth": "Sidebar width",
   "settings.app.form.showDisabledServices": "Display disabled services tabs",
   "settings.app.form.showMessagesBadgesWhenMuted": "Show unread message badge when notifications are disabled",
   "settings.app.form.showServiceNavigationBar": "Always show service navigation bar",
diff --git a/src/i18n/messages/src/containers/settings/EditSettingsScreen.json b/src/i18n/messages/src/containers/settings/EditSettingsScreen.json
index d2e53d625..cd5c004d7 100644
--- a/src/i18n/messages/src/containers/settings/EditSettingsScreen.json
+++ b/src/i18n/messages/src/containers/settings/EditSettingsScreen.json
@@ -299,15 +299,28 @@
     }
   },
   {
+    "id": "settings.app.form.serviceRibbonWidth",
+    "defaultMessage": "!!!Sidebar width",
+    "file": "src/containers/settings/EditSettingsScreen.js",
+    "start": {
+      "line": 121,
+      "column": 22
+    },
+    "end": {
+      "line": 124,
+      "column": 3
+    }
+  },
+  {
     "id": "settings.app.form.accentColor",
     "defaultMessage": "!!!Accent color",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 121,
+      "line": 125,
       "column": 15
     },
     "end": {
-      "line": 124,
+      "line": 128,
       "column": 3
     }
   },
@@ -316,11 +329,11 @@
     "defaultMessage": "!!!Display disabled services tabs",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 125,
+      "line": 129,
       "column": 24
     },
     "end": {
-      "line": 128,
+      "line": 132,
       "column": 3
     }
   },
@@ -329,11 +342,11 @@
     "defaultMessage": "!!!Show unread message badge when notifications are disabled",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 129,
+      "line": 133,
       "column": 29
     },
     "end": {
-      "line": 132,
+      "line": 136,
       "column": 3
     }
   },
@@ -342,11 +355,11 @@
     "defaultMessage": "!!!Enable spell checking",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 133,
+      "line": 137,
       "column": 23
     },
     "end": {
-      "line": 136,
+      "line": 140,
       "column": 3
     }
   },
@@ -355,11 +368,11 @@
     "defaultMessage": "!!!Enable GPU Acceleration",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 137,
+      "line": 141,
       "column": 25
     },
     "end": {
-      "line": 140,
+      "line": 144,
       "column": 3
     }
   },
@@ -368,11 +381,11 @@
     "defaultMessage": "!!!Include beta versions",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 141,
+      "line": 145,
       "column": 8
     },
     "end": {
-      "line": 144,
+      "line": 148,
       "column": 3
     }
   },
@@ -381,11 +394,11 @@
     "defaultMessage": "!!!Disable updates",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 145,
+      "line": 149,
       "column": 13
     },
     "end": {
-      "line": 148,
+      "line": 152,
       "column": 3
     }
   },
@@ -394,11 +407,11 @@
     "defaultMessage": "!!!Enable Franz Todos",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 149,
+      "line": 153,
       "column": 15
     },
     "end": {
-      "line": 152,
+      "line": 156,
       "column": 3
     }
   },
@@ -407,11 +420,11 @@
     "defaultMessage": "!!!Keep all workspaces loaded",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 153,
+      "line": 157,
       "column": 27
     },
     "end": {
-      "line": 156,
+      "line": 160,
       "column": 3
     }
   }