Added improvements for displaying service name under service icon (#2169)

* move notification badge to top of service icon
* Change horizontal sidebar height programmatically
* Fix tab item style in vertical and horizontal style sidebar
* Reformat code and remove magic numbers

Co-authored-by: Johan K Mathew <johankmathew@gmail.com>

3 files changed, 107 insertions, 11 deletions

diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts
index bb93507dc..21c9554ed 100644
--- a/src/features/appearance/index.ts
+++ b/src/features/appearance/index.ts
@@ -114,16 +114,67 @@ function generateAccentStyle(accentColorStr) {
   `;
 }
 
-function generateServiceRibbonWidthStyle(widthStr, iconSizeStr, vertical) {
+function generateServiceRibbonWidthStyle(widthStr, iconSizeStr, vertical, isLabelEnabled) {
   const width = Number(widthStr);
   const iconSize = Number(iconSizeStr) - iconSizeBias;
+  let fontSize = 11;
+  let tabItemHeightBias = -5;
+  let sidebarSizeBias = 22;
+  const tabItemWidthBias = 2;
+
+  switch(width){
+    case (35): 
+      fontSize = 9;
+      tabItemHeightBias = 25;
+      sidebarSizeBias = 48;
+      break;
+    case (45):
+        fontSize = 10;
+        tabItemHeightBias = 21;
+        sidebarSizeBias = 44;
+        break;
+    case (55):
+      fontSize = 11;
+      tabItemHeightBias = 13;
+      sidebarSizeBias = 37;
+      break;
+    case (80):
+      fontSize = 11;
+      tabItemHeightBias = 3;
+      sidebarSizeBias = 27;
+      break;
+    case (90):
+      fontSize = 12;
+      tabItemHeightBias = 0;
+      sidebarSizeBias = 25;
+      break;
+    case (100):
+      fontSize = 13;
+      tabItemHeightBias = 2;
+      sidebarSizeBias = 25;
+      break;
+    default:
+      fontSize = 11;
+      tabItemHeightBias = 13;
+      sidebarSizeBias = 37;
+  }
+
+  if(!isLabelEnabled){
+    sidebarSizeBias = 22;
+    tabItemHeightBias = -5;
+  }
 
   return vertical
     ? `
+    .sidebar {
+      height: ${width}px !important;
+      overflow: hidden !important;
+    }
     .tab-item {
-      width: ${width - 2}px !important;
-      height: ${width - 5 + iconSize}px !important;
+      width: ${width - tabItemWidthBias}px !important;
+      height: ${width + iconSize + tabItemHeightBias}px !important;
       min-height: unset;
+      overflow: hidden !important;
     }
     .tab-item .tab-item__icon {
       width: ${width / 2 + iconSize}px !important;
@@ -131,6 +182,24 @@ function generateServiceRibbonWidthStyle(widthStr, iconSizeStr, vertical) {
     .sidebar__button {
       font-size: ${width / 3}px !important;
     }
+    .app .app__content {
+      padding-top: ${width + sidebarSizeBias}px !important;
+    }
+    .workspaces-drawer {
+      margin-top: -${width}px !important;
+    }
+    .darwin .sidebar {
+      height: ${width + sidebarSizeBias}px !important;
+    }
+    .darwin .sidebar .sidebar__button--workspaces.is-active {
+      height: ${width - sidebarSizeBias}px !important;
+    }
+    .tab-item .tab-item__label{
+      font-size: ${fontSize}px !important;
+    }
+    .tab-item div{
+      overflow: hidden !important;
+    }
   `
     : `
     .sidebar {
@@ -138,7 +207,7 @@ function generateServiceRibbonWidthStyle(widthStr, iconSizeStr, vertical) {
     }
     .tab-item {
       width: ${width}px !important;
-      height: ${width - 5 + iconSize}px !important;
+      height: min-content !important;
     }
     .tab-item .tab-item__icon {
       width: ${width / 2 + iconSize}px !important;
@@ -229,6 +298,7 @@ function generateStyle(settings) {
     showDragArea,
     useVerticalStyle,
     alwaysShowWorkspaces,
+    showServiceName,
   } = settings;
 
   if (
@@ -244,6 +314,7 @@ function generateStyle(settings) {
       serviceRibbonWidth,
       iconSize,
       useVerticalStyle,
+      showServiceName
     );
   }
   if (showDragArea) {
@@ -281,6 +352,7 @@ export default function initAppearance(stores) {
       settings.all.app.showDragArea,
       settings.all.app.useVerticalStyle,
       settings.all.app.alwaysShowWorkspaces,
+      settings.all.app.showServiceName,
     ],
     () => {
       updateStyle(settings.all.app);
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index ab7cee08d..c5111fa91 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -54,6 +54,9 @@
     .tab-item__icon {
       margin-left: -4px;
     }
+    .tab-item__label {
+      margin-left: -4px;
+    }
   }
 
   &.is-label-enabled{
@@ -91,7 +94,7 @@
     align-items: center;
     background: $theme-brand-danger;
     border-radius: 20px;
-    bottom: 8px;
+    top: 8px;
     color: #fff;
     display: flex;
     font-size: 11px;
diff --git a/src/styles/vertical.scss b/src/styles/vertical.scss
index 426032bf6..083f98c3d 100644
--- a/src/styles/vertical.scss
+++ b/src/styles/vertical.scss
@@ -1,6 +1,8 @@
 @import './config.scss';
 
-$sidebar-width: 64px;
+$sidebar-width: 75px;
+$sidebar-bias: 22px;
+$tabitem-bias: 30px;
 
 .sidebar {
   width: 100vw;
@@ -10,6 +12,7 @@ $sidebar-width: 64px;
   top: 0;
   right: 0;
   padding-bottom: 0px;
+  overflow: hidden !important;
 
   &::after {
     top: -10px;
@@ -30,17 +33,32 @@ $sidebar-width: 64px;
     .tab-item {
       
       &.is-active {
-        border-left-width: 0px;
+        border-left-width: 0px !important;
         border-top-width: 4px;
         border-top-style: solid;
-        padding-left: 4px;
+        overflow: hidden;
+        height: $sidebar-width + 4;
       }
 
       &:not(.is-active) {
         padding-top: 4px;
       }
+
+      &.is-label-enabled{
+        min-width: 70px;
+        max-width: 140px;
+        height: $sidebar-width + 10;
+        width: max-content !important;
+        overflow: hidden;
+        padding-left: 4px;
+        padding-right: 4px;
+        padding-top: 8px;
+      }
     }
   }
+  div{
+    overflow: hidden !important;
+  }
 
   .sidebar__button--workspaces.is-active {
     position: absolute;
@@ -51,7 +69,7 @@ $sidebar-width: 64px;
 }
 
 .app .app__content {
-  padding-top: $sidebar-width;
+  padding-top: $sidebar-width + $sidebar-bias;
 }
 
 .workspaces-drawer {
@@ -86,9 +104,12 @@ $sidebar-width: 64px;
 }
 
 .darwin .sidebar {
-  height: $sidebar-width + 22px;
+  height: $sidebar-width + $sidebar-bias;
 
   .sidebar__button--workspaces.is-active {
-    height: $sidebar-width - 22px;
+    height: $sidebar-width - $sidebar-bias;
+  }
+  .tab-item .is-label-enabled{
+    height: $sidebar-width + $tabitem-bias;
   }
 }