fix: force display title-bar when tab-bar on left/right

Eugeny · Nov 18, 2023 · b4777fd · b4777fd
1 parent 787936b
commit b4777fd
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 9 deletions.
diff --git a/tabby-core/src/components/appRoot.component.pug b/tabby-core/src/components/appRoot.component.pug
@@ -1,6 +1,6 @@
 title-bar(
-  *ngIf='ready && !hostWindow.isFullscreen && config.store.appearance.frame == "full" && config.store.appearance.dock == "off"',
-  (dblclick)='hostWindow.toggleMaximize()',
+  *ngIf='ready && !hostWindow.isFullscreen && config.store.appearance.dock == "off" && (config.store.appearance.frame == "full" || isTilteBarNeeded())',
+  (dblclick)='toggleMaximize()',
   [hideControls]='hostApp.platform !== Platform.Linux && !hostWindow.isFullscreen',
   [class.inset]='hostApp.platform == Platform.macOS && !hostWindow.isFullscreen'
 )
@@ -9,13 +9,13 @@ title-bar(
     *ngIf='ready',
     [class.tabs-on-top]='config.store.appearance.tabsLocation == "top" || config.store.appearance.tabsLocation == "left"',
     [class.tabs-on-left]='hasVerticalTabs() && config.store.appearance.tabsLocation == "left"',
-    [class.tabs-titlebar-enabled]='config.store.appearance.frame == "full"',
+    [class.tabs-titlebar-enabled]='config.store.appearance.frame == "full" || isTilteBarNeeded()',
     [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()'
+        (dblclick)='toggleMaximize(config.store.appearance.frame == "full" || isTilteBarNeeded())'
     )
         .inset.background(*ngIf='hostApp.platform == Platform.macOS \
         && !hostWindow.isFullscreen \
@@ -64,7 +64,12 @@ title-bar(
                     (transfersChange)='onTransfersChange()'
                 )
 
-        .drag-space.background([class.persistent]='config.store.appearance.frame == "thin"')
+        .btn-space.background(
+            [class.persistent]='config.store.appearance.frame == "thin"',
+            [class.drag]='config.store.appearance.frame == "thin" \
+            && config.store.appearance.tabsLocation != "left" \
+            && config.store.appearance.tabsLocation != "right"'
+        )
 
         .btn-group.background
             .d-flex(
@@ -84,7 +89,9 @@ title-bar(
 
         window-controls.background(
             *ngIf='config.store.appearance.frame == "thin" \
-            && (hostApp.platform == Platform.Linux)',
+            && config.store.appearance.tabsLocation != "left" \
+            && config.store.appearance.tabsLocation != "right" \
+            && hostApp.platform == Platform.Linux',
         )
 
         div.window-controls-spacer(

diff --git a/tabby-core/src/components/appRoot.component.scss b/tabby-core/src/components/appRoot.component.scss
@@ -62,7 +62,7 @@ $tab-border-radius: 4px;
         }
     }
 
-    .drag-space {
+    .btn-space {
         flex: auto;
     }
 
@@ -126,15 +126,18 @@ $tab-border-radius: 4px;
         min-width: 0;
     }
 
-    &>.drag-space {
+    &>.btn-space {
         min-width: 1px;
         flex: 1 0 1%;
-        -webkit-app-region: drag;
 
         .tabs-on-top & {
             margin-top: 2px; // for window resizing
         }
 
+        &.drag {
+            -webkit-app-region: drag;
+        }
+
         &.persistent {
         //   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.

diff --git a/tabby-core/src/components/appRoot.component.ts b/tabby-core/src/components/appRoot.component.ts
@@ -240,4 +240,14 @@ export class AppRootComponent {
         return (await this.commands.getCommands({ tab: this.app.activeTab ?? undefined }))
             .filter(x => x.locations?.includes(aboveZero ? CommandLocation.RightToolbar : CommandLocation.LeftToolbar))
     }
+
+    toggleMaximize (ignore=false): void {
+        if (!ignore) {
+            this.hostWindow.toggleMaximize()
+        }
+    }
+
+    isTilteBarNeeded (): boolean {
+        return this.config.store.appearance.frame == "thin" && this.config.store.appearance.tabsLocation != "top" && this.config.store.appearance.tabsLocation != "bottom"
+    }
 }