11 files changed, 309 insertions, 88 deletions

diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index bf3b85083..d3d6a931d 100644
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -58,6 +58,10 @@ const paths = {
     dest: 'build/styles',
     watch: 'src/styles/**/*.scss',
   },
+  verticalStyle: {
+    src: 'src/styles/vertical.scss',
+    dest: 'build/styles',
+  },
   scripts: {
     src: 'src/**/*.js',
     dest: 'build/',
@@ -164,6 +168,33 @@ export function styles() {
     .pipe(gulp.dest(paths.styles.dest));
 }
 
+export function verticalStyle() {
+  return gulp
+    .src(paths.verticalStyle.src)
+    .pipe(
+      sassVariables(
+        Object.assign(
+          {
+            $env:
+              process.env.NODE_ENV === 'development'
+                ? 'development'
+                : 'production',
+          },
+          ...styleConfig,
+        ),
+      ),
+    )
+    .pipe(
+      sass({
+        includePaths: ['./node_modules', '../node_modules'],
+      }).on('error', sass.logError),
+    )
+    .pipe((gulpIf(process.env.NODE_ENV !== 'development', csso({ // Only minify in production to speed up dev builds
+      restructure: false, // Don't restructure CSS, otherwise it will break the styles
+    }))))
+    .pipe(gulp.dest(paths.verticalStyle.dest));
+}
+
 export function scripts() {
   return gulp
     .src(paths.scripts.src, { since: gulp.lastRun(scripts) })
@@ -179,6 +210,7 @@ export function scripts() {
 export function watch() {
   gulp.watch(paths.packages.watch, mvLernaPackages);
   gulp.watch(paths.styles.watch, styles);
+  gulp.watch(paths.verticalStyle.src, verticalStyle);
 
   gulp.watch([paths.src, `${paths.scripts.src}`, `${paths.styles.src}`], mvSrc);
 
@@ -205,7 +237,7 @@ export function recipeInfo() {
 const build = gulp.series(
   clean,
   gulp.parallel(mvSrc, mvPackageJson, mvLernaPackages),
-  gulp.parallel(html, scripts, styles, recipes, recipeInfo),
+  gulp.parallel(html, scripts, styles, verticalStyle, recipes, recipeInfo),
 );
 export { build };
 
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index b6698b8e2..b1e9a878d 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -497,6 +497,11 @@ export default @observer class EditSettingsForm extends Component {
 
                 <Select field={form.$('serviceRibbonWidth')} />
 
+                <Toggle field={form.$('useVerticalStyle')} />
+
+                <Toggle field={form.$('alwaysShowWorkspaces')} />
+
+                <Hr />
                 <Select field={form.$('iconSize')} />
 
                 <Hr />
diff --git a/src/config.js b/src/config.js
index c610534f6..8a46d8083 100644
--- a/src/config.js
+++ b/src/config.js
@@ -132,6 +132,8 @@ export const DEFAULT_APP_SETTINGS = {
   sentry: false,
   nightly: false,
   navigationBarBehaviour: 'custom',
+  useVerticalStyle: false,
+  alwaysShowWorkspaces: false,
 };
 
 export const DEFAULT_FEATURES_CONFIG = {
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index aa50bac68..7078546f9 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -139,6 +139,14 @@ const messages = defineMessages({
     id: 'settings.app.form.iconSize',
     defaultMessage: '!!!Service icon size',
   },
+  useVerticalStyle: {
+    id: 'settings.app.form.useVerticalStyle',
+    defaultMessage: '!!!Use vertical style',
+  },
+  alwaysShowWorkspaces: {
+    id: 'settings.app.form.alwaysShowWorkspaces',
+    defaultMessage: '!!!Always show workspace drawer',
+  },
   accentColor: {
     id: 'settings.app.form.accentColor',
     defaultMessage: '!!!Accent color',
@@ -243,6 +251,8 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
         universalDarkMode: settingsData.universalDarkMode,
         serviceRibbonWidth: settingsData.serviceRibbonWidth,
         iconSize: settingsData.iconSize,
+        useVerticalStyle: settingsData.useVerticalStyle,
+        alwaysShowWorkspaces: settingsData.alwaysShowWorkspaces,
         accentColor: settingsData.accentColor,
         showMessageBadgeWhenMuted: settingsData.showMessageBadgeWhenMuted,
         showDragArea: settingsData.showDragArea,
@@ -494,6 +504,16 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
           default: DEFAULT_APP_SETTINGS.iconSize,
           options: iconSizes,
         },
+        useVerticalStyle: {
+          label: intl.formatMessage(messages.useVerticalStyle),
+          value: settings.all.app.useVerticalStyle,
+          default: DEFAULT_APP_SETTINGS.useVerticalStyle,
+        },
+        alwaysShowWorkspaces: {
+          label: intl.formatMessage(messages.alwaysShowWorkspaces),
+          value: settings.all.app.alwaysShowWorkspaces,
+          default: DEFAULT_APP_SETTINGS.alwaysShowWorkspaces,
+        },
         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 a14d1461e..039ef7711 100644
--- a/src/features/appearance/index.js
+++ b/src/features/appearance/index.js
@@ -42,13 +42,25 @@ function generateAccentStyle(color) {
   return style;
 }
 
-function generateServiceRibbonWidthStyle(widthStr, iconSizeStr) {
+function generateServiceRibbonWidthStyle(widthStr, iconSizeStr, vertical) {
   const width = Number(widthStr);
   const iconSize = Number(iconSizeStr) - iconSizeBias;
 
-  return `
+  return vertical ? `
+    .tab-item {
+      width: ${width - 2}px !important;
+      height: ${width - 5 + iconSize}px !important;
+      min-height: unset;
+    }
+    .tab-item .tab-item__icon {
+      width: ${(width / 2) + iconSize}px !important;
+    }
+    .sidebar__button {
+      font-size: ${width / 3}px !important;
+    }
+  ` : `
     .sidebar {
-      width: ${width}px !important;
+      width: ${width - 1}px !important;
     }
     .tab-item {
       width: ${width - 2}px !important;
@@ -79,6 +91,48 @@ function generateShowDragAreaStyle(accentColor) {
   `;
 }
 
+function generateVerticalStyle(widthStr, alwaysShowWorkspaces) {
+  if (!document.getElementById('vertical-style')) {
+    const link = document.createElement('link');
+    link.id = 'vertical-style';
+    link.rel = 'stylesheet';
+    link.type = 'text/css';
+    link.href = './styles/vertical.css';
+
+    document.head.appendChild(link);
+  }
+  const width = Number(widthStr);
+
+  return `
+  .app_service {
+    top: ${width}px !important;
+  }
+  .darwin .sidebar {
+    height: ${width + 19}px !important;
+  }
+  .darwin .sidebar .sidebar__button--workspaces.is-active {
+      height: ${width - 20}px !important;
+  }
+  ${alwaysShowWorkspaces ? `
+  .sidebar {
+    width: calc(100% - 300px) !important;
+  }
+  ` : ''}
+  `;
+}
+
+function generateOpenWorkspaceStyle() {
+  return `
+  .app .app__content {
+    width: 100%;
+    transform: translateX(0px);
+  }
+  .sidebar__button--workspaces {
+    display: none;
+  }
+  `;
+}
+
 function generateStyle(settings) {
   let style = '';
 
@@ -87,6 +141,8 @@ function generateStyle(settings) {
     serviceRibbonWidth,
     iconSize,
     showDragArea,
+    useVerticalStyle,
+    alwaysShowWorkspaces,
   } = settings;
 
   if (accentColor !== DEFAULT_APP_SETTINGS.accentColor) {
@@ -94,11 +150,20 @@ function generateStyle(settings) {
   }
   if (serviceRibbonWidth !== DEFAULT_APP_SETTINGS.serviceRibbonWidth
       || iconSize !== DEFAULT_APP_SETTINGS.iconSize) {
-    style += generateServiceRibbonWidthStyle(serviceRibbonWidth, iconSize);
+    style += generateServiceRibbonWidthStyle(serviceRibbonWidth, iconSize, useVerticalStyle);
   }
   if (showDragArea) {
     style += generateShowDragAreaStyle(accentColor);
   }
+  if (useVerticalStyle) {
+    style += generateVerticalStyle(serviceRibbonWidth, alwaysShowWorkspaces);
+  } else if (document.getElementById('vertical-style')) {
+    const link = document.getElementById('vertical-style');
+    document.head.removeChild(link);
+  }
+  if (alwaysShowWorkspaces) {
+    style += generateOpenWorkspaceStyle();
+  }
 
   return style;
 }
@@ -111,11 +176,16 @@ export default function initAppearance(stores) {
   const { settings } = stores;
   createStyleElement();
 
-  // Update accent color
+  // Update style when settings change
   reaction(
-    () => (
-      settings.all.app.accentColor
-    ),
+    () => ([
+      settings.all.app.accentColor,
+      settings.all.app.serviceRibbonWidth,
+      settings.all.app.iconSize,
+      settings.all.app.showDragArea,
+      settings.all.app.useVerticalStyle,
+      settings.all.app.alwaysShowWorkspaces,
+    ]),
     () => {
       updateStyle(settings.all.app);
     },
@@ -123,31 +193,4 @@ export default function initAppearance(stores) {
       fireImmediately: true,
     },
   );
-  // Update service ribbon width
-  reaction(
-    () => (
-      settings.all.app.serviceRibbonWidth
-    ),
-    () => {
-      updateStyle(settings.all.app);
-    },
-  );
-  // Update icon size
-  reaction(
-    () => (
-      settings.all.app.iconSize
-    ),
-    () => {
-      updateStyle(settings.all.app);
-    },
-  );
-  // Update draggable area
-  reaction(
-    () => (
-      settings.all.app.showDragArea
-    ),
-    () => {
-      updateStyle(settings.all.app);
-    },
-  );
 }
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index c0ce026a6..4db3e5fd4 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -5084,133 +5084,159 @@
         }
       },
       {
-        "defaultMessage": "!!!Accent color",
+        "defaultMessage": "!!!Use vertical style",
         "end": {
           "column": 3,
           "line": 145
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
+        "id": "settings.app.form.useVerticalStyle",
+        "start": {
+          "column": 20,
+          "line": 142
+        }
+      },
+      {
+        "defaultMessage": "!!!Always show workspace drawer",
+        "end": {
+          "column": 3,
+          "line": 149
+        },
+        "file": "src/containers/settings/EditSettingsScreen.js",
+        "id": "settings.app.form.alwaysShowWorkspaces",
+        "start": {
+          "column": 24,
+          "line": 146
+        }
+      },
+      {
+        "defaultMessage": "!!!Accent color",
+        "end": {
+          "column": 3,
+          "line": 153
+        },
+        "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.accentColor",
         "start": {
           "column": 15,
-          "line": 142
+          "line": 150
         }
       },
       {
         "defaultMessage": "!!!Display disabled services tabs",
         "end": {
           "column": 3,
-          "line": 149
+          "line": 157
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.showDisabledServices",
         "start": {
           "column": 24,
-          "line": 146
+          "line": 154
         }
       },
       {
         "defaultMessage": "!!!Show unread message badge when notifications are disabled",
         "end": {
           "column": 3,
-          "line": 153
+          "line": 161
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.showMessagesBadgesWhenMuted",
         "start": {
           "column": 29,
-          "line": 150
+          "line": 158
         }
       },
       {
         "defaultMessage": "!!!Show draggable area on window",
         "end": {
           "column": 3,
-          "line": 157
+          "line": 165
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.showDragArea",
         "start": {
           "column": 16,
-          "line": 154
+          "line": 162
         }
       },
       {
         "defaultMessage": "!!!Enable spell checking",
         "end": {
           "column": 3,
-          "line": 161
+          "line": 169
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.enableSpellchecking",
         "start": {
           "column": 23,
-          "line": 158
+          "line": 166
         }
       },
       {
         "defaultMessage": "!!!Enable GPU Acceleration",
         "end": {
           "column": 3,
-          "line": 165
+          "line": 173
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.enableGPUAcceleration",
         "start": {
           "column": 25,
-          "line": 162
+          "line": 170
         }
       },
       {
         "defaultMessage": "!!!Include beta versions",
         "end": {
           "column": 3,
-          "line": 169
+          "line": 177
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.beta",
         "start": {
           "column": 8,
-          "line": 166
+          "line": 174
         }
       },
       {
         "defaultMessage": "!!!Enable updates",
         "end": {
           "column": 3,
-          "line": 173
+          "line": 181
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.automaticUpdates",
         "start": {
           "column": 20,
-          "line": 170
+          "line": 178
         }
       },
       {
         "defaultMessage": "!!!Enable Franz Todos",
         "end": {
           "column": 3,
-          "line": 177
+          "line": 185
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.enableTodos",
         "start": {
           "column": 15,
-          "line": 174
+          "line": 182
         }
       },
       {
         "defaultMessage": "!!!Keep all workspaces loaded",
         "end": {
           "column": 3,
-          "line": 181
+          "line": 189
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.keepAllWorkspacesLoaded",
         "start": {
           "column": 27,
-          "line": 178
+          "line": 186
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index ee6fc2b29..9bf4fcc15 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -287,6 +287,7 @@
   "settings.app.currentVersion": "Current version:",
   "settings.app.form.accentColor": "Accent color",
   "settings.app.form.adaptableDarkMode": "Synchronize dark mode with my OS's dark mode setting",
+  "settings.app.form.alwaysShowWorkspaces": "Always show workspace drawer",
   "settings.app.form.autoLaunchInBackground": "Open in background",
   "settings.app.form.autoLaunchOnStart": "Launch Ferdi on start",
   "settings.app.form.automaticUpdates": "Enable updates",
@@ -323,6 +324,7 @@
   "settings.app.form.startMinimized": "Start minimized",
   "settings.app.form.universalDarkMode": "Enable universal Dark Mode",
   "settings.app.form.useTouchIdToUnlock": "Allow using TouchID to unlock Ferdi",
+  "settings.app.form.useVerticalStyle": "Use vertical style",
   "settings.app.headline": "Settings",
   "settings.app.headlineAdvanced": "Advanced",
   "settings.app.headlineAppearance": "Appearance",
diff --git a/src/i18n/locales/whitelist_en-US.json b/src/i18n/locales/whitelist_en-US.json
index 32960f8ce..fe51488c7 100644
--- a/src/i18n/locales/whitelist_en-US.json
+++ b/src/i18n/locales/whitelist_en-US.json
@@ -1,2 +1 @@
-[
-]
\ No newline at end of file
+[]
diff --git a/src/i18n/messages/src/containers/settings/EditSettingsScreen.json b/src/i18n/messages/src/containers/settings/EditSettingsScreen.json
index df5e7714a..7165bd46c 100644
--- a/src/i18n/messages/src/containers/settings/EditSettingsScreen.json
+++ b/src/i18n/messages/src/containers/settings/EditSettingsScreen.json
@@ -364,15 +364,41 @@
     }
   },
   {
+    "id": "settings.app.form.useVerticalStyle",
+    "defaultMessage": "!!!Use vertical style",
+    "file": "src/containers/settings/EditSettingsScreen.js",
+    "start": {
+      "line": 142,
+      "column": 20
+    },
+    "end": {
+      "line": 145,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.app.form.alwaysShowWorkspaces",
+    "defaultMessage": "!!!Always show workspace drawer",
+    "file": "src/containers/settings/EditSettingsScreen.js",
+    "start": {
+      "line": 146,
+      "column": 24
+    },
+    "end": {
+      "line": 149,
+      "column": 3
+    }
+  },
+  {
     "id": "settings.app.form.accentColor",
     "defaultMessage": "!!!Accent color",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 142,
+      "line": 150,
       "column": 15
     },
     "end": {
-      "line": 145,
+      "line": 153,
       "column": 3
     }
   },
@@ -381,11 +407,11 @@
     "defaultMessage": "!!!Display disabled services tabs",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 146,
+      "line": 154,
       "column": 24
     },
     "end": {
-      "line": 149,
+      "line": 157,
       "column": 3
     }
   },
@@ -394,11 +420,11 @@
     "defaultMessage": "!!!Show unread message badge when notifications are disabled",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 150,
+      "line": 158,
       "column": 29
     },
     "end": {
-      "line": 153,
+      "line": 161,
       "column": 3
     }
   },
@@ -407,11 +433,11 @@
     "defaultMessage": "!!!Show draggable area on window",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 154,
+      "line": 162,
       "column": 16
     },
     "end": {
-      "line": 157,
+      "line": 165,
       "column": 3
     }
   },
@@ -420,11 +446,11 @@
     "defaultMessage": "!!!Enable spell checking",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 158,
+      "line": 166,
       "column": 23
     },
     "end": {
-      "line": 161,
+      "line": 169,
       "column": 3
     }
   },
@@ -433,11 +459,11 @@
     "defaultMessage": "!!!Enable GPU Acceleration",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 162,
+      "line": 170,
       "column": 25
     },
     "end": {
-      "line": 165,
+      "line": 173,
       "column": 3
     }
   },
@@ -446,11 +472,11 @@
     "defaultMessage": "!!!Include beta versions",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 166,
+      "line": 174,
       "column": 8
     },
     "end": {
-      "line": 169,
+      "line": 177,
       "column": 3
     }
   },
@@ -459,11 +485,11 @@
     "defaultMessage": "!!!Enable updates",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 170,
+      "line": 178,
       "column": 20
     },
     "end": {
-      "line": 173,
+      "line": 181,
       "column": 3
     }
   },
@@ -472,11 +498,11 @@
     "defaultMessage": "!!!Enable Franz Todos",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 174,
+      "line": 182,
       "column": 15
     },
     "end": {
-      "line": 177,
+      "line": 185,
       "column": 3
     }
   },
@@ -485,11 +511,11 @@
     "defaultMessage": "!!!Keep all workspaces loaded",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 178,
+      "line": 186,
       "column": 27
     },
     "end": {
-      "line": 181,
+      "line": 189,
       "column": 3
     }
   }
diff --git a/src/lib/Menu.js b/src/lib/Menu.js
index 3c5fc6530..dde4f694a 100644
--- a/src/lib/Menu.js
+++ b/src/lib/Menu.js
@@ -1169,17 +1169,21 @@ export default class FranzMenu {
     });
 
     // Open workspace drawer:
-    const drawerLabel = (
-      isWorkspaceDrawerOpen ? menuItems.closeWorkspaceDrawer : menuItems.openWorkspaceDrawer
-    );
+    if (!this.stores.settings.app.alwaysShowWorkspaces) {
+      const drawerLabel = (
+        isWorkspaceDrawerOpen ? menuItems.closeWorkspaceDrawer : menuItems.openWorkspaceDrawer
+      );
+      menu.push({
+        label: intl.formatMessage(drawerLabel),
+        accelerator: `${cmdKey}+D`,
+        click: () => {
+          workspaceActions.toggleWorkspaceDrawer();
+        },
+        enabled: this.stores.user.isLoggedIn,
+      });
+    }
+
     menu.push({
-      label: intl.formatMessage(drawerLabel),
-      accelerator: `${cmdKey}+D`,
-      click: () => {
-        workspaceActions.toggleWorkspaceDrawer();
-      },
-      enabled: this.stores.user.isLoggedIn,
-    }, {
       type: 'separator',
     });
 
diff --git a/src/styles/vertical.scss b/src/styles/vertical.scss
new file mode 100644
index 000000000..55660a088
--- /dev/null
+++ b/src/styles/vertical.scss
@@ -0,0 +1,62 @@
+$sidebar-width: 65px;
+
+.sidebar {
+  width: 100vw;
+  height: $sidebar-width;
+  flex-direction: row;
+  position: absolute;
+  right: 0;
+  padding-bottom: 0px;
+
+  div:first-of-type {
+    overflow-x: scroll;
+    width: 100%;
+  }
+
+  .tabs {
+    flex-direction: row;
+
+    .tab-item {
+      
+      &.is-active {
+        border-left-width: 0px;
+        border-top-width: 4px;
+        border-top-style: solid;
+        border-top-color: #7367f0;
+        padding-left: 4px;
+      }
+
+      &:not(.is-active) {
+        padding-top: 4px;
+      }
+    }
+  }
+
+  .sidebar__button--workspaces.is-active {
+    position: absolute;
+    right: 300px;
+    height: 100%;
+    background-color: #f7f7f9;
+  }
+}
+
+.app_service {
+  width: 100vw;
+  position: absolute;
+  top: $sidebar-width;
+  right: 0;
+}
+
+.theme__dark {
+  .sidebar .sidebar__button--workspaces.is-active {
+    background-color: #2d2f31;
+  }
+}
+
+.darwin .sidebar {
+  height: $sidebar-width + 22px;
+
+  .sidebar__button--workspaces.is-active {
+    height: $sidebar-width - 22px;
+  }
+}
\ No newline at end of file