Merge pull request #3084 from TakuroOnoda/feature/sidetab

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

@@ -4,11 +4,15 @@ title-bar(
 )
 
 .content(
-    [class.tabs-on-top]='config.store.appearance.tabsLocation == "top"'
+    [class.tabs-on-top]='config.store.appearance.tabsLocation == "top" || 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"')
+        .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 != "bottom"'
             dnd-sortable-container,
             [sortableData]='app.tabs',
         )
@@ -24,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',
@@ -87,7 +92,8 @@ title-bar(
             )
 
         window-controls.background(
-            *ngIf='config.store.appearance.frame == "thin" && (hostApp.platform == Platform.Windows || hostApp.platform == Platform.Linux)',
+            *ngIf='config.store.appearance.frame == "thin" \
+            && (hostApp.platform == Platform.Windows || hostApp.platform == Platform.Linux)',
         )
 
     start-page(*ngIf='ready && app.tabs.length == 0')

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

@@ -15,10 +15,18 @@
 
 $tabs-height: 38px;
 $tab-border-radius: 4px;
+$side-tab-width: 200px;
 
+.wrap {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  flex-direction: row;
+}
 
 .content {
-    height: 100%;
+    width: 100vw;
+    height: 100vh;
     flex: auto;
     display: flex;
     flex-direction: column-reverse;
@@ -26,15 +34,50 @@ $tab-border-radius: 4px;
     &.tabs-on-top {
         flex-direction: column;
     }
+
+    &.tabs-on-side {
+        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%;
 
     .btn-tab-bar {
         line-height: $tabs-height + 2px;
+        height: $tabs-height;
         cursor: pointer;
 
         display: flex;
@@ -74,7 +117,10 @@ $tab-border-radius: 4px;
 
     & > .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-core/src/components/tabHeader.component.scss

@@ -13,6 +13,11 @@ $tabs-height: 38px;
 
     overflow: hidden;
 
+    &.vertical {
+      flex: none;
+      height: $tabs-height;
+    }
+
     .index {
         flex: none;
         font-weight: bold;

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

@@ -43,14 +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"'
+                        )
+                        | Left
+                    label.btn.btn-secondary(ngbButtonLabel)
+                        input(
+                            type='radio',
+                            ngbButton,
+                            [value]='"right"'
+                        )
+                        | Right
 
             .form-line
                 .header

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

@@ -65,7 +65,7 @@ export class SettingsTabComponent extends BaseTabComponent {
         const onConfigChange = () => {
             this.configFile = config.readRaw()
             this.padWindowControls = hostApp.platform === Platform.macOS
-                && config.store.appearance.tabsLocation === 'bottom'
+                && config.store.appearance.tabsLocation !== 'top'
         }
 
         this.configSubscription = config.changed$.subscribe(onConfigChange)

terminus-ssh/package.json

@@ -10,9 +10,7 @@
   "scripts": {
     "build": "webpack --progress --color",
     "watch": "webpack --progress --color --watch",
-    "postinstall": "run-script-os",
-    "postinstall:win32": "xcopy /i node_modules\\ssh2\\util\\pagent.exe util\\",
-    "postinstall:darwin:linux": "exit"
+    "postinstall": "xcopy /i /y node_modules\\ssh2\\util\\pagent.exe util\\"
   },
   "files": [
     "dist",

terminus-terminal/src/api/baseTerminalTab.component.ts

@@ -360,7 +360,7 @@ export class BaseTerminalTabComponent extends BaseTabComponent implements OnInit
 
         this.topPadded = this.hostApp.platform === Platform.macOS
             && this.config.store.appearance.frame === 'thin'
-            && this.config.store.appearance.tabsLocation === 'bottom'
+            && this.config.store.appearance.tabsLocation !== 'top'
 
         if (this.config.store.terminal.background === 'colorScheme') {
             if (this.config.store.terminal.colorScheme.background) {