.

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

@@ -1,21 +1,12 @@
-title-bar(*ngIf='!config.store.appearance.useNativeFrame && config.store.appearance.dock == "off"')
+//title-bar(*ngIf='!config.store.appearance.useNativeFrame && config.store.appearance.dock == "off"')
 
 .content(
     [class.tabs-on-top]='config.store.appearance.tabsOnTop'    
 )
     .tab-bar(*ngIf='app.tabs.length > 0')
-        button.btn.btn-secondary(
-            *ngFor='let button of getLeftToolbarButtons()',
-            [title]='button.title',
-            (click)='button.click()',
-        )
-            i.fa([class]='"fa fa-" + button.icon')
-                
         .tabs
             tab-header(
                 *ngFor='let tab of app.tabs; let idx = index',
-                [class.pre-selected]='idx == app.tabs.indexOf(app.activeTab) - 1',
-                [class.post-selected]='idx == app.tabs.indexOf(app.activeTab) + 1',
                 [index]='idx',
                 [tab]='tab',
                 [active]='tab == app.activeTab',
@@ -24,6 +15,15 @@ title-bar(*ngIf='!config.store.appearance.useNativeFrame && config.store.appeara
                 (click)='app.selectTab(tab)',
                 (closeClicked)='app.closeTab(tab)',
             )
+        
+        button.btn.btn-secondary(
+            *ngFor='let button of getLeftToolbarButtons()',
+            [title]='button.title',
+            (click)='button.click()',
+        )
+            i.fa([class]='"fa fa-" + button.icon')
+                
+        .drag-space
 
         button.btn.btn-secondary(
             *ngFor='let button of getRightToolbarButtons()',

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

@@ -47,8 +47,15 @@ $tab-border-radius: 4px;
     }
 
     &>.tabs {
-        flex: auto;
+        flex: 0 1 auto;
         display: flex;
+        min-width: 0;
+    }
+
+    &>.drag-space {
+        min-width: 100px;
+        flex: 1 0 25%;
+        -webkit-app-region: drag;
     }
 }
 

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

@@ -23,16 +23,19 @@ import { AppService, IToolbarButton, ToolbarButtonProvider } from '../api'
         trigger('animateTab', [
             state('in', style({
                 'flex-grow': '1000',
+                'flex-basis': '200px',
             })),
             transition(':enter', [
                 style({
                     'flex-grow': '1',
+                    'flex-basis': '1px',
                 }),
                 animate('250ms ease-in-out')
             ]),
             transition(':leave', [
                 animate('250ms ease-in-out', style({
                     'flex-grow': '1',
+                    'flex-basis': '1px',
                 }))
             ])
         ])

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

@@ -1,4 +1,3 @@
-.wrapper
+.index {{index + 1}}
-    .index {{index + 1}}
+.name {{(tab.title$ || "Terminal") | async}}
-    .name {{(tab.title$ || "Terminal") | async}}
+button((click)='closeClicked.emit()') ×
-    button((click)='closeClicked.emit()') ×

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

@@ -4,67 +4,61 @@ $tabs-height: 40px;
     line-height: $tabs-height - 2px;
     cursor: pointer;
 
-    flex: auto;
+    flex: 1000 1 200px;
-    flex-basis: 0;
+    width: 200px;
-    flex-grow: 1000;
 
     display: flex;
+    flex-direction: row;
+    min-width: 0;
+
     overflow: hidden;
 
-    min-width: 0;
     transition: 0.25s ease-out all;
 
-    .wrapper {
+    border-top: 1px solid transparent;
-        display: flex;
+
-        flex-direction: row;
+    .index {
-        flex: auto;
+        flex: none;
-        min-width: 0;
+        font-weight: bold;
+
+        margin-left: 10px;
+        width: 20px;
+        border-radius: 10px;
+        line-height: 38px;
+        text-align: center;
         transition: 0.25s all;
-        border-top: 1px solid transparent;
+    }
 
-        .index {
+    .name {
-            flex: none;
+        flex: auto;
-            font-weight: bold;
+        margin: 0 1px 0 10px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        min-width: 0;
+    }
 
-            margin-left: 10px;
+    button {
-            width: 20px;
+        display: block;
-            border-radius: 10px;
+        flex: none;
-            line-height: 38px;
+        background: transparent;
-            text-align: center;
+        opacity: 0;
-            transition: 0.25s all;
-        }
 
-        .name {
+        $button-size: $tabs-height * 0.6;
-            flex: auto;
+        width: $button-size;
-            margin: 0 1px 0 10px;
+        height: $button-size;
-            overflow: hidden;
+        border-radius: $button-size / 2;
-            white-space: nowrap;
+        line-height: $button-size * 0.8;
-            text-overflow: ellipsis;
+        margin-top: ($tabs-height - $button-size) * 0.4;
-            min-width: 0;
+        margin-right: 10px;
-        }
 
-        button {
+        text-align: center;
-            display: block;
+        font-size: 20px;
-            flex: none;
+    }
-            background: transparent;
-            opacity: 0;
 
-            $button-size: $tabs-height * 0.6;
+    &:hover button {
-            width: $button-size;
+        transition: 0.25s opacity;
-            height: $button-size;
+        display: block;
-            border-radius: $button-size / 2;
+        opacity: 1;
-            line-height: $button-size * 0.8;
-            margin-top: ($tabs-height - $button-size) * 0.4;
-            margin-right: 10px;
-
-            text-align: center;
-            font-size: 20px;
-        }
-
-        &:hover button {
-            transition: 0.25s opacity;
-            display: block;
-            opacity: 1;
-        }
     }
 }

terminus-core/src/theme.scss

@@ -98,75 +98,47 @@ app-root  {
                 }
             }
 
+            .drag-space {
+                background: $body-bg2;
+            }
+
             &>.tabs {
                 &:empty {
                     background: $body-bg2;
                 }
 
                 tab-header {
-                    background: $body-bg;
+                    background: $body-bg2;
 
-                    .wrapper {
+                    .index {
-                        background: $body-bg2;
+                        color: #555;
+                    }
 
-                        .index {
+                    button {
-                            color: #555;
+                        color: $body-color;
-                        }
+                        border: none;
+                        transition: 0.25s all;
 
-                        button {
+                        &:hover { background: $button-hover-bg !important; }
-                            color: $body-color;
+                        &:active { background: $button-active-bg !important; }
-                            border: none;
-                            transition: 0.25s all;
-
-                            &:hover { background: $button-hover-bg !important; }
-                            &:active { background: $button-active-bg !important; }
-                        }
                     }
 
                     &.active {
-                        background: $body-bg2;
+                        background: $body-bg;
-
-                        .wrapper {
-                            background: $body-bg;
-                        }
-                    }
-
-                    &.has-activity:not(.active) {
-                        /*
-                        .wrapper .index {
-                            background: $blue;
-                            color: white;
-                            text-shadow: 0 1px 1px rgba(0,0,0,.95);
-                        }
-                        */
                     }
                 }
             }
         }
 
         &.tabs-on-top .tab-bar {
-            margin-top: 5px;
-
             tab-header {
-                .wrapper {
+                border-top: 1px solid transparent;
-                    border-top: 1px solid transparent;
-                    border-top-left-radius: $tab-border-radius;
-                    border-top-right-radius: $tab-border-radius;
-                }
 
-                &.pre-selected .wrapper {
+                &.active {
-                    border-bottom-right-radius: $tab-border-radius;
-                }
-
-                &.post-selected .wrapper {
-                    border-bottom-left-radius: $tab-border-radius;
-                }
-
-                &.active .wrapper {
                     border-top: 1px solid $teal;
                 }
 
-                &.has-activity:not(.active) .wrapper {
+                &.has-activity:not(.active) {
                     border-top: 1px solid $green;
                 }
             }
@@ -176,25 +148,13 @@ app-root  {
             margin-bottom: 3px;
 
             tab-header {
-                .wrapper {
+                border-bottom: 1px solid transparent;
-                    border-bottom: 1px solid transparent;
-                    border-bottom-left-radius: $tab-border-radius;
-                    border-bottom-right-radius: $tab-border-radius;
-                }
 
-                &.pre-selected .wrapper {
+                &.active {
-                    border-top-right-radius: $tab-border-radius;
-                }
-
-                &.post-selected .wrapper {
-                    border-top-left-radius: $tab-border-radius;
-                }
-
-                &.active .wrapper {
                     border-bottom: 1px solid $teal;
                 }
 
-                &.has-activity:not(.active) .wrapper {
+                &.has-activity:not(.active) {
                     border-bottom: 1px solid $green;
                 }
             }

terminus-terminal/src/components/terminalSettingsTab.component.ts

@@ -45,7 +45,7 @@ export class TerminalSettingsTabComponent {
         }
         if (this.hostApp.platform == Platform.Linux) {
             exec('fc-list :spacing=mono').then(([stdout, _]) => {
-                this.fonts = stdout
+                this.fonts = stdout.toString()
                     .split('\n')
                     .filter(x => !!x)
                     .map(x => x.split(':')[1].trim())

webpack.config.js

@@ -5,5 +5,6 @@ module.exports = [
   require('./terminus-terminal/webpack.config.js'),
   require('./terminus-clickable-links/webpack.config.js'),
   require('./terminus-community-color-schemes/webpack.config.js'),
+  require('./terminus-plugin-manager/webpack.config.js'),
   require('./terminus-theme-hype/webpack.config.js'),
 ]