fix: horizontal sidebar style on macOS (#482)

7 files changed, 48 insertions, 37 deletions

diff --git a/src/components/layout/Sidebar.jsx b/src/components/layout/Sidebar.jsx
index dd81f4ab5..fef5baf64 100644
--- a/src/components/layout/Sidebar.jsx
+++ b/src/components/layout/Sidebar.jsx
@@ -151,7 +151,7 @@ class Sidebar extends Component {
       hideNotificationsButton,
       hideSettingsButton,
       hideSplitModeButton,
-      useVerticalStyle,
+      useHorizontalStyle,
       splitMode,
     } = stores.settings.app;
     const { intl } = this.props;
@@ -180,7 +180,7 @@ class Sidebar extends Component {
           {...this.props}
           enableToolTip={() => this.enableToolTip()}
           disableToolTip={() => this.disableToolTip()}
-          useVerticalStyle={stores.settings.all.app.useVerticalStyle}
+          useHorizontalStyle={stores.settings.all.app.useHorizontalStyle}
         />
         <>
           {numberActiveButtons <= 1 || hideCollapseButton ? null : (
@@ -189,16 +189,14 @@ class Sidebar extends Component {
               onClick={() => toggleCollapseMenu()}
               className="sidebar__button sidebar__button--hamburger-menu"
             >
-              {isMenuCollapsed && !useVerticalStyle ? (
-                <Icon icon={mdiMenu} size={1.5} />
-              ) : null}
+              {isMenuCollapsed ? <Icon icon={mdiMenu} size={1.5} /> : null}
 
-              {isMenuCollapsed && useVerticalStyle ? (
-                <Icon icon={mdiChevronRight} size={1.5} />
+              {!isMenuCollapsed && !useHorizontalStyle ? (
+                <Icon icon={mdiChevronDown} size={1.5} />
               ) : null}
 
-              {!isMenuCollapsed ? (
-                <Icon icon={mdiChevronDown} size={1.5} />
+              {!isMenuCollapsed && useHorizontalStyle ? (
+                <Icon icon={mdiChevronRight} size={1.5} />
               ) : null}
             </button>
           )}
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
index d9e11df41..f0cb48e5e 100644
--- a/src/components/services/tabs/Tabbar.js
+++ b/src/components/services/tabs/Tabbar.js
@@ -20,7 +20,7 @@ class TabBar extends Component {
     updateService: PropTypes.func.isRequired,
     hibernateService: PropTypes.func.isRequired,
     wakeUpService: PropTypes.func.isRequired,
-    useVerticalStyle: PropTypes.bool.isRequired,
+    useHorizontalStyle: PropTypes.bool.isRequired,
     showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
     showServiceNameSetting: PropTypes.bool.isRequired,
     showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
@@ -80,13 +80,13 @@ class TabBar extends Component {
       toggleAudio,
       toggleDarkMode,
       deleteService,
-      useVerticalStyle,
+      useHorizontalStyle,
       showMessageBadgeWhenMutedSetting,
       showServiceNameSetting,
       showMessageBadgesEvenWhenMuted,
     } = this.props;
 
-    const axis = useVerticalStyle ? 'x' : 'y';
+    const axis = useHorizontalStyle ? 'x' : 'y';
 
     return (
       <div>
diff --git a/src/components/settings/settings/EditSettingsForm.jsx b/src/components/settings/settings/EditSettingsForm.jsx
index 32a44aa37..cb1d261f8 100644
--- a/src/components/settings/settings/EditSettingsForm.jsx
+++ b/src/components/settings/settings/EditSettingsForm.jsx
@@ -712,7 +712,7 @@ class EditSettingsForm extends Component {
 
                 <Select field={form.$('sidebarServicesLocation')} />
 
-                <Toggle field={form.$('useVerticalStyle')} />
+                <Toggle field={form.$('useHorizontalStyle')} />
 
                 <Toggle field={form.$('hideCollapseButton')} />
 
diff --git a/src/config.ts b/src/config.ts
index 7c0807a37..f872f31aa 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -261,7 +261,7 @@ export const DEFAULT_APP_SETTINGS = {
   iconSize: iconSizeBias,
   navigationBarBehaviour: 'custom',
   searchEngine: SEARCH_ENGINE_STARTPAGE,
-  useVerticalStyle: false,
+  useHorizontalStyle: false,
   hideCollapseButton: false,
   isMenuCollapsed: false,
   hideRecipesButton: false,
diff --git a/src/containers/settings/EditSettingsScreen.tsx b/src/containers/settings/EditSettingsScreen.tsx
index 0ab3b63cf..a6c4561dd 100644
--- a/src/containers/settings/EditSettingsScreen.tsx
+++ b/src/containers/settings/EditSettingsScreen.tsx
@@ -199,8 +199,8 @@ const messages = defineMessages({
     id: 'settings.app.form.enableLongPressServiceHint',
     defaultMessage: 'Enable service shortcut hint on long press',
   },
-  useVerticalStyle: {
-    id: 'settings.app.form.useVerticalStyle',
+  useHorizontalStyle: {
+    id: 'settings.app.form.useHorizontalStyle',
     defaultMessage: 'Use horizontal style',
   },
   hideCollapseButton: {
@@ -377,7 +377,7 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
         enableLongPressServiceHint: Boolean(
           settingsData.enableLongPressServiceHint,
         ),
-        useVerticalStyle: Boolean(settingsData.useVerticalStyle),
+        useHorizontalStyle: Boolean(settingsData.useHorizontalStyle),
         hideCollapseButton: Boolean(settingsData.hideCollapseButton),
         hideRecipesButton: Boolean(settingsData.hideRecipesButton),
         hideSplitModeButton: Boolean(settingsData.hideSplitModeButton),
@@ -739,10 +739,10 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
           value: settings.all.app.enableLongPressServiceHint,
           default: DEFAULT_APP_SETTINGS.enableLongPressServiceHint,
         },
-        useVerticalStyle: {
-          label: intl.formatMessage(messages.useVerticalStyle),
-          value: settings.all.app.useVerticalStyle,
-          default: DEFAULT_APP_SETTINGS.useVerticalStyle,
+        useHorizontalStyle: {
+          label: intl.formatMessage(messages.useHorizontalStyle),
+          value: settings.all.app.useHorizontalStyle,
+          default: DEFAULT_APP_SETTINGS.useHorizontalStyle,
         },
         hideCollapseButton: {
           label: intl.formatMessage(messages.hideCollapseButton),
diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts
index 17ae5937e..8b7416126 100644
--- a/src/features/appearance/index.ts
+++ b/src/features/appearance/index.ts
@@ -129,11 +129,12 @@ function generateAccentStyle(accentColorStr) {
 function generateServiceRibbonWidthStyle(
   widthStr,
   iconSizeStr,
-  vertical,
+  horizontal,
   isLabelEnabled,
   sidebarServicesLocation,
   useGrayscaleServices,
   grayscaleServicesDim,
+  showDragArea,
 ) {
   const width = Number(widthStr);
   const iconSize = Number(iconSizeStr) - iconSizeBias;
@@ -141,6 +142,7 @@ function generateServiceRibbonWidthStyle(
   let tabItemHeightBias = -5;
   let sidebarSizeBias = 22;
   const tabItemWidthBias = 3;
+  const verticalStyleOffset = 29;
 
   switch (width) {
     case 35:
@@ -194,24 +196,24 @@ function generateServiceRibbonWidthStyle(
   let sidebarServicesAlignment;
   switch (sidebarServicesLocation) {
     case SIDEBAR_SERVICES_LOCATION_TOPLEFT:
-      sidebarServicesAlignment = vertical ? "left" : "start";
+      sidebarServicesAlignment = horizontal ? 'left' : 'start';
       break;
     case SIDEBAR_SERVICES_LOCATION_CENTER:
-      sidebarServicesAlignment = vertical ? "center" : "center";
+      sidebarServicesAlignment = horizontal ? 'center' : 'center';
       break;
     case SIDEBAR_SERVICES_LOCATION_BOTTOMRIGHT:
-      sidebarServicesAlignment = vertical ? "right" : "end";
+      sidebarServicesAlignment = horizontal ? 'right' : 'end';
       break;
     default:
-      sidebarServicesAlignment = vertical ? "left" : "start";
+      sidebarServicesAlignment = horizontal ? 'left' : 'start';
       break;
   }
 
-  const graysacleServices =
-  `filter: grayscale(1);
-  opacity: ${grayscaleServicesDim}%;`
+  const graysacleServices = `filter: grayscale(1);
+  opacity: ${grayscaleServicesDim}%;`;
 
-  return vertical
+  const sizeDragArea = showDragArea ? verticalStyleOffset : 0;
+  return horizontal
     ? `
     .sidebar {
       height: ${width}px !important;
@@ -247,7 +249,17 @@ function generateServiceRibbonWidthStyle(
       margin-top: -${width}px !important;
     }
     .darwin .sidebar {
-      height: ${width + sidebarSizeBias}px !important;
+      height: ${width + verticalStyleOffset - 3 - sizeDragArea}px !important;
+    }
+    .darwin .app .app__content {
+      padding-top: ${
+        width + sidebarSizeBias + (sizeDragArea !== 0 ? 4 - sizeDragArea : 4)
+      }px !important;
+    }
+    .darwin .workspaces-drawer {
+      margin-top: -${
+        width + verticalStyleOffset - 5 - sizeDragArea
+      }px !important;
     }
     .darwin .sidebar .sidebar__button--workspaces.is-active {
       height: ${width - sidebarSizeBias}px !important;
@@ -358,7 +370,7 @@ function generateStyle(settings) {
     grayscaleServicesDim,
     iconSize,
     showDragArea,
-    useVerticalStyle,
+    useHorizontalStyle,
     alwaysShowWorkspaces,
     showServiceName,
   } = settings;
@@ -372,17 +384,18 @@ function generateStyle(settings) {
   style += generateServiceRibbonWidthStyle(
     serviceRibbonWidth,
     iconSize,
-    useVerticalStyle,
+    useHorizontalStyle,
     showServiceName,
     sidebarServicesLocation,
     useGrayscaleServices,
     grayscaleServicesDim,
+    showDragArea,
   );
 
   if (showDragArea) {
     style += generateShowDragAreaStyle(accentColor);
   }
-  if (useVerticalStyle) {
+  if (useHorizontalStyle) {
     style += generateVerticalStyle(serviceRibbonWidth, alwaysShowWorkspaces);
   } else if (document.querySelector('#vertical-style')) {
     const link = document.querySelector('#vertical-style');
@@ -403,7 +416,7 @@ function updateProgressbar(settings) {
     barColors: {
       '0': settings.progressbarAccentColor,
     },
-    shadowBlur: 5
+    shadowBlur: 5,
   });
 }
 
@@ -429,7 +442,7 @@ export default function initAppearance(stores) {
       settings.all.app.sidebarServicesLocation,
       settings.all.app.useGrayscaleServices,
       settings.all.app.grayscaleServicesDim,
-      settings.all.app.useVerticalStyle,
+      settings.all.app.useHorizontalStyle,
       settings.all.app.alwaysShowWorkspaces,
       settings.all.app.showServiceName,
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 249bf6373..8c9eba56b 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -256,8 +256,8 @@
   "settings.app.form.startMinimized": "Start minimized",
   "settings.app.form.universalDarkMode": "Enable universal Dark Mode",
   "settings.app.form.useGrayscaleServices": "Use grayscale services",
+  "settings.app.form.useHorizontalStyle": "Use horizontal style",
   "settings.app.form.useTouchIdToUnlock": "Allow using TouchID to unlock Ferdium",
-  "settings.app.form.useVerticalStyle": "Use horizontal style",
   "settings.app.form.wakeUpHibernationSplay": "Splay hibernate/wake cycles to reduce load",
   "settings.app.form.wakeUpHibernationStrategy": "Hibernation strategy after automatic wake up",
   "settings.app.form.wakeUpStrategy": "Wake up strategy",