refined vertical tabs

terminus-core/src/components/appRoot.component.pug

@@ -3,45 +3,16 @@ title-bar(
   [class.inset]='hostApp.platform == Platform.macOS'
 )
 
-.wrap
+.content(
-  .tab-bar.vertical(
-    *ngIf='config.store.appearance.tabsLocation == "left"'
-  )
-      .inset.background(*ngIf='hostApp.platform == Platform.macOS \
-        && config.store.appearance.frame == "thin"')
-      .tabs.vertical(
-          dnd-sortable-container,
-          [sortableData]='app.tabs',
-      )
-          tab-header(
-              *ngFor='let tab of app.tabs; let idx = index',
-              dnd-sortable,
-              [sortableIndex]='idx',
-              (onDragStart)='onTabDragStart()',
-              (onDragEnd)='onTabDragEnd()',
-
-              [index]='idx',
-              [tab]='tab',
-              [active]='tab == app.activeTab',
-              [hasActivity]='tab.activity$|async',
-              @animateTab,
-              (click)='app.selectTab(tab)',
-              [class.fully-draggable]='hostApp.platform != Platform.macOS',
-              [class.drag-region]='hostApp.platform == Platform.macOS && !tabsDragging',
-              [class.vertical]='true',
-          )
-
-
-  .content(
     [class.tabs-on-top]='config.store.appearance.tabsLocation == "top" || config.store.appearance.tabsLocation == "left"',
-      [class.with-side-tab]='config.store.appearance.tabsLocation == "left"',
+    [class.tabs-on-side]='hasVerticalTabs()',
-  )
+)
     .tab-bar
         .inset.background(*ngIf='hostApp.platform == Platform.macOS \
         && config.store.appearance.frame == "thin" \
         && (config.store.appearance.tabsLocation == "top" || config.store.appearance.tabsLocation == "left")')
         .tabs(
-              *ngIf='config.store.appearance.tabsLocation != "left"'
+            *ngIf='config.store.appearance.tabsLocation != "bottom"'
             dnd-sortable-container,
             [sortableData]='app.tabs',
         )
@@ -57,6 +28,7 @@ title-bar(
                 [active]='tab == app.activeTab',
                 [hasActivity]='tab.activity$|async',
                 @animateTab,
+                [@.disabled]='hasVerticalTabs()',
                 (click)='app.selectTab(tab)',
                 [class.fully-draggable]='hostApp.platform != Platform.macOS',
                 [class.drag-region]='hostApp.platform == Platform.macOS && !tabsDragging',

terminus-core/src/components/appRoot.component.scss

@@ -35,26 +35,49 @@ $side-tab-width: 200px;
         flex-direction: column;
     }
 
-    &.with-side-tab {
+    &.tabs-on-side {
-        width: calc(100% - #{$side-tab-width});
+        flex-direction: row-reverse;
+
+        &.tabs-on-top {
+            flex-direction: row;
+        }
     }
 
 }
 
+.content.tabs-on-side > .tab-bar {
+    height: 100%;
+    width: $side-tab-width;
+    overflow-y: auto;
+    overflow-x: hidden;
+    flex-direction: column;
+    background: rgba(0, 0, 0, 0.25);
+
+    .tabs {
+        width: $side-tab-width;
+        flex: none;
+        flex-direction: column;
+
+        tab-header {
+            flex: 0 0 $tabs-height;
+        }
+    }
+
+    .drag-space {
+        flex: auto;
+    }
+}
+
+
 .tab-bar {
     flex: none;
     height: $tabs-height;
     display: flex;
     width: 100%;
-    &.vertical {
-        height: 100%;
-        width: $side-tab-width;
-        overflow-y: auto;
-        overflow-x: hidden;
-    }
 
     .btn-tab-bar {
         line-height: $tabs-height + 2px;
+        height: $tabs-height;
         cursor: pointer;
 
         display: flex;
@@ -79,12 +102,6 @@ $side-tab-width: 200px;
         flex: 0 1 auto;
         display: flex;
         min-width: 0;
-
-        &.vertical {
-          width: $side-tab-width;
-          flex: auto;
-          flex-direction: column;
-        }
     }
 
     &>.drag-space {
@@ -100,7 +117,10 @@ $side-tab-width: 200px;
 
     & > .inset {
         width: 85px;
+        height: $tabs-height;
         flex: none;
+        opacity: 0;
+        -webkit-app-region: drag;
     }
 
     window-controls {

terminus-core/src/components/appRoot.component.ts

@@ -184,6 +184,10 @@ export class AppRootComponent {
         return false
     }
 
+    hasVerticalTabs () {
+        return this.config.store.appearance.tabsLocation === 'left' || this.config.store.appearance.tabsLocation === 'right'
+    }
+
     async updateApp () {
         if ((await this.electron.showMessageBox(
             this.hostApp.getWindow(),

terminus-settings/src/components/settingsTab.component.pug

@@ -43,21 +43,28 @@ ngb-tabset.vertical(type='pills', [activeId]='activeTab')
                             ngbButton,
                             [value]='"top"'
                         )
-                        | On the top
+                        | Top
                     label.btn.btn-secondary(ngbButtonLabel)
                         input(
                             type='radio',
                             ngbButton,
                             [value]='"bottom"'
                         )
-                        | At the bottom
+                        | Bottom
                     label.btn.btn-secondary(ngbButtonLabel)
                         input(
                             type='radio',
                             ngbButton,
                             [value]='"left"'
                         )
-                        | At the left
+                        | Left
+                    label.btn.btn-secondary(ngbButtonLabel)
+                        input(
+                            type='radio',
+                            ngbButton,
+                            [value]='"right"'
+                        )
+                        | Right
 
             .form-line
                 .header