Feat: implement window controls overlay

Eugeny · Jul 14, 2023 · 2f1c388 · 2f1c388
1 parent e7f7d9b
commit 2f1c388
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 27 deletions.
diff --git a/app/lib/window.ts b/app/lib/window.ts
@@ -94,12 +94,21 @@ export class Window {
         } else {
             if (process.platform === 'darwin') {
                 bwOptions.titleBarStyle = 'hidden'
+                // If not macOS and native appearance is not toggled, use WCO.
+            } else {
+                bwOptions.titleBarStyle = 'hidden',
+                bwOptions.titleBarOverlay = {
+                    color: '#00000000',
+                    symbolColor: '#ffffff',
+                    height: 32,
+                }
             }
         }
 
         if (process.platform === 'darwin') {
             this.window = new BrowserWindow(bwOptions) as GlasstronWindow
         } else {
+            // this.window = new BrowserWindow(bwOptions) as GlasstronWindow
             this.window = new glasstron.BrowserWindow(bwOptions)
         }
 
@@ -186,6 +195,7 @@ export class Window {
                 } catch (error) {
                     console.error('Failed to set window blur', error)
                 }
+            // }
             } else {
                 DwmEnableBlurBehindWindow(this.window.getNativeWindowHandle(), enabled)
             }

diff --git a/app/yarn.lock b/app/yarn.lock
@@ -138,13 +138,6 @@
   dependencies:
     debug "^4.3.2"
 
-"@tabby-gang/node-pty@^0.11.0-beta.203":
-  version "0.11.0-beta.204"
-  resolved "https://registry.yarnpkg.com/@tabby-gang/node-pty/-/node-pty-0.11.0-beta.204.tgz#80d4393c7a233d3298f47a4755467a246b0099f9"
-  integrity sha512-sNT5Z2MEkEIhToAdVAdZ/lfeQ9UgFE3h2ENlOux+WHBrl1k0BiUEIOd/jh/K3mNAGEfcZ44gNQQ50g5KXTQEmA==
-  dependencies:
-    nan "^2.16.0"
-
 "@tabby-gang/windows-blurbehind@^3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@tabby-gang/windows-blurbehind/-/windows-blurbehind-3.0.0.tgz#48d409c2eb14a12c867b70de5ee4d6769ef45e8f"
@@ -2264,7 +2257,7 @@ mz@^2.7.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-nan@^2.16.0, nan@^2.17.0, "nan@github:jkleinsc/nan#remove_accessor_signature":
+nan@^2.14.0, nan@^2.17.0, "nan@github:jkleinsc/nan#remove_accessor_signature":
   version "2.16.0"
   resolved "https://codeload.github.com/jkleinsc/nan/tar.gz/6a2f95a6a2209d8aa7542fb18099fd808a802059"
 
@@ -2352,6 +2345,13 @@ node-gyp@^5.0.2, node-gyp@^5.1.0:
     tar "^4.4.12"
     which "^1.3.1"
 
+node-pty@^0.11.0-beta32:
+  version "0.11.0-beta9"
+  resolved "https://registry.yarnpkg.com/node-pty/-/node-pty-0.11.0-beta9.tgz#38a899d62b1c5c395ca466dfac5203eff989d350"
+  integrity sha512-bU/2zYV6xBMVMHaMe+yr4WEw36PCA0hyZ7A0IBQFWy5l1vjsD52sZ9sGJk+dH7bw3xpuBLHMh9Eq4Di8rJz4IQ==
+  dependencies:
+    nan "^2.14.0"
+
 nopt@^4.0.1, nopt@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.3.tgz#a375cad9d02fd921278d954c2254d5aa57e15e48"

diff --git a/package.json b/package.json
@@ -39,7 +39,7 @@
     "cross-env": "7.0.3",
     "css-loader": "^6.7.3",
     "deep-equal": "2.0.5",
-    "electron": "22.3.1",
+    "electron": "^25.3.0",
     "electron-builder": "^24.0.0-alpha.1",
     "electron-download": "^4.1.1",
     "electron-installer-snap": "^5.1.0",

diff --git a/tabby-core/src/components/appRoot.component.pug b/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()',
+  [class.hide-controls]='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,7 +85,7 @@ title-bar(
 
         window-controls.background(
             *ngIf='config.store.appearance.frame == "thin" \
-            && (hostApp.platform == Platform.Windows || hostApp.platform == Platform.Linux)',
+            && (hostApp.platform == Platform.Linux)',
         )
 
     .content

diff --git a/tabby-core/src/components/appRoot.component.scss b/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,7 +136,9 @@ $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;
         }
     }
 

diff --git a/tabby-core/src/components/titleBar.component.scss b/tabby-core/src/components/titleBar.component.scss
@@ -23,4 +23,11 @@ $titlebar-height: 30px;
             display: none;
         }
     }
+
+    // Account for WCO on Windows.
+    &.hide-controls {
+        window-controls {
+            display: none;
+        }
+    }
  }
diff --git a/yarn.lock b/yarn.lock
@@ -829,10 +829,10 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.3.1.tgz#e8a83f1aa8b649377bb1fb5d7bac5cb90e784dfe"
   integrity sha512-EhcH/wvidPy1WeML3TtYFGR83UzjxeWRen9V402T8aUGYsCHOmfoisV3ZSg03gAFIbLq8TnWOJ0f4cALtnSEUg==
 
-"@types/node@^16.11.26":
-  version "16.11.26"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.26.tgz#63d204d136c9916fb4dcd1b50f9740fe86884e47"
-  integrity sha512-GZ7bu5A6+4DtG7q9GsoHXy3ALcgeIHP4NnL0Vv2wu0uUB/yQex26v0tf6/na1mm0+bS9Uw+0DFex7aaKr2qawQ==
+"@types/node@^18.11.18":
+  version "18.16.19"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.16.19.tgz#cb03fca8910fdeb7595b755126a8a78144714eea"
+  integrity sha512-IXl7o+R9iti9eBW4Wg2hx1xQDig183jj7YLn8F7udNceyfkbn1ZxmzZXuak20gR40D7pIkIY1kYGx5VIGbaHKA==
 
 "@types/parse5@^5":
   version "5.0.3"
@@ -3066,13 +3066,13 @@ electron-to-chromium@^1.4.284:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.286.tgz#0e039de59135f44ab9a8ec9025e53a9135eba11f"
   integrity sha512-Vp3CVhmYpgf4iXNKAucoQUDcCrBQX3XLBtwgFqP9BUXuucgvAV9zWp1kYU7LL9j4++s9O+12cb3wMtN4SJy6UQ==
 
-electron@22.3.1:
-  version "22.3.1"
-  resolved "https://registry.yarnpkg.com/electron/-/electron-22.3.1.tgz#a09769e6592cadbf45d7629c9143ffa2ef8a3842"
-  integrity sha512-iDltL9j12bINK3aOp8ZoGq4NFBFjJhw1AYHelbWj93XUCAIT4fdA+PRsq0aaTHg3bthLLlLRvIZVgNsZPqWcqg==
+electron@^25.3.0:
+  version "25.3.0"
+  resolved "https://registry.yarnpkg.com/electron/-/electron-25.3.0.tgz#e818ab3ebd3e7a45f8fca0f47e607c9af2dc92c7"
+  integrity sha512-cyqotxN+AroP5h2IxUsJsmehYwP5LrFAOO7O7k9tILME3Sa1/POAg3shrhx4XEnaAMyMqMLxzGvkzCVxzEErnA==
   dependencies:
     "@electron/get" "^2.0.0"
-    "@types/node" "^16.11.26"
+    "@types/node" "^18.11.18"
     extract-zip "^2.0.1"
 
 elliptic@^6.5.3: