Merge pull request #8707 from FeroTheFox/master

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

@@ -1,16 +1,20 @@
 title-bar(
   *ngIf='ready && !hostWindow.isFullscreen && config.store.appearance.frame == "full" && config.store.appearance.dock == "off"',
   (dblclick)='hostWindow.toggleMaximize()',
+  [hideControls]='hostApp.platform !== Platform.Linux && !hostWindow.isFullscreen',
   [class.inset]='hostApp.platform == Platform.macOS && !hostWindow.isFullscreen'
 )
 
 .content(
     *ngIf='ready',
     [class.tabs-on-top]='config.store.appearance.tabsLocation == "top" || config.store.appearance.tabsLocation == "left"',
-    [class.tabs-on-side]='hasVerticalTabs()',
+    [class.tabs-on-left]='hasVerticalTabs() && config.store.appearance.tabsLocation == "left"',
+    [class.tabs-titlebar-enabled]='config.store.appearance.frame == "full"',
+    [class.tabs-on-right]='hasVerticalTabs() && config.store.appearance.tabsLocation == "right"',
 )
     .tab-bar(
         *ngIf='!hostWindow.isFullscreen || config.store.appearance.tabsInFullscreen',
+        [class.tab-bar-no-controls-overlay]='hostApp.platform == Platform.macOS',
         (dblclick)='hostWindow.toggleMaximize()'
     )
         .inset.background(*ngIf='hostApp.platform == Platform.macOS \
@@ -81,9 +85,12 @@ title-bar(
 
         window-controls.background(
             *ngIf='config.store.appearance.frame == "thin" \
-            && (hostApp.platform == Platform.Windows || hostApp.platform == Platform.Linux)',
+            && (hostApp.platform == Platform.Linux)',
         )
 
+        div.window-controls-spacer(
+            *ngIf='config.store.appearance.frame == "thin" && (hostApp.platform == Platform.Windows) && (config.store.appearance.tabsLocation == "top")',
+        )
     .content
         start-page.content-tab.content-tab-active(*ngIf='ready && app.tabs.length == 0')
 

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

@@ -35,17 +35,16 @@ $tab-border-radius: 4px;
         flex-direction: column;
     }
 
-    &.tabs-on-side {
+    &.tabs-on-right {
         flex-direction: row-reverse;
-
-        &.tabs-on-top {
-            flex-direction: row;
-        }
     }
 
+    &.tabs-on-left {
+        flex-direction: row;
+    }
 }
 
-.content.tabs-on-side > .tab-bar {
+.content.tabs-on-left > .tab-bar, .content.tabs-on-right > .tab-bar {
     height: 100%;
     width: var(--side-tab-width);
     overflow-y: auto;
@@ -76,6 +75,18 @@ $tab-border-radius: 4px;
     }
 }
 
+.content.tabs-on-left > .tab-bar.tab-bar-no-controls-overlay, .content.tabs-titlebar-enabled {
+    .tabs {
+        padding-top: 0 !important;
+    }
+}
+
+.content.tabs-on-right > .tab-bar {
+    .tabs {
+        // Account for WCO on Windows.
+        padding-top: 36px;
+    }
+}
 
 .tab-bar {
     flex: none;
@@ -125,10 +136,17 @@ $tab-border-radius: 4px;
         }
 
         &.persistent {
-          min-width: 72px; // 2 x 36 px height, ie 2 squares
+        //   min-width: 72px; // 2 x 36 px height, ie 2 squares
+        // Given WCO on Windows, the min-width of the window buttons is about 138px.
+            min-width: 138px;
         }
     }
 
+    &>.window-controls-spacer {
+        min-width: 138px;
+        height: 100%;
+    }
+
     & > .inset {
         width: calc(70px + 15px * var(--spaciness));
         height: var(--tabs-height);

tabby-core/src/components/titleBar.component.pug

@@ -1,2 +1,2 @@
 .title((dblclick)='hostWindow.toggleMaximize()') Tabby
-window-controls
+window-controls(*ngIf="!hideControls")

tabby-core/src/components/titleBar.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core'
+import { Component, Input } from '@angular/core'
 import { HostWindowService } from '../api'
 
 /** @hidden */
@@ -8,5 +8,7 @@ import { HostWindowService } from '../api'
     styleUrls: ['./titleBar.component.scss'],
 })
 export class TitleBarComponent {
+    @Input() hideControls: boolean
+
     constructor (public hostWindow: HostWindowService) { }
 }