diff --git a/app/lib/window.ts b/app/lib/window.ts index b5264b6972..7db05ebb2f 100644 --- a/app/lib/window.ts +++ b/app/lib/window.ts @@ -92,8 +92,11 @@ export class Window { if (this.configStore.appearance?.frame === 'native') { bwOptions.frame = true } else { - if (process.platform === 'darwin') { - bwOptions.titleBarStyle = 'hidden' + bwOptions.titleBarStyle = 'hidden' + if (process.platform === 'win32') { + bwOptions.titleBarOverlay = { + color: '#00000000', + } } } @@ -384,6 +387,21 @@ export class Window { this.setVibrancy(enabled, type) }) + ipcMain.on('window-set-window-controls-color', (event, theme) => { + if (!this.window || event.sender !== this.window.webContents) { + return + } + + const symbolColor: string = theme.foreground + + this.window.setTitleBarOverlay( + { + symbolColor: symbolColor, + height: 32, + }, + ) + }) + ipcMain.on('window-set-title', (event, title) => { if (!this.window || event.sender !== this.window.webContents) { return diff --git a/package.json b/package.json index 2b026a0ebc..3ad709a73e 100644 --- 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 index 4b1d87d976..ae7ffc3c3a 100644 --- 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()', + [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') diff --git a/tabby-core/src/components/appRoot.component.scss b/tabby-core/src/components/appRoot.component.scss index 6c21cc890f..1ec365a744 100644 --- 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,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); diff --git a/tabby-core/src/components/titleBar.component.pug b/tabby-core/src/components/titleBar.component.pug index 45324e7929..cf5c07eec2 100644 --- a/tabby-core/src/components/titleBar.component.pug +++ b/tabby-core/src/components/titleBar.component.pug @@ -1,2 +1,2 @@ .title((dblclick)='hostWindow.toggleMaximize()') Tabby -window-controls +window-controls(*ngIf="!hideControls") diff --git a/tabby-core/src/components/titleBar.component.ts b/tabby-core/src/components/titleBar.component.ts index 9ad6e1d86c..6b546f9676 100644 --- a/tabby-core/src/components/titleBar.component.ts +++ b/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) { } } diff --git a/tabby-electron/src/index.ts b/tabby-electron/src/index.ts index 11d2476333..5664b613ba 100644 --- a/tabby-electron/src/index.ts +++ b/tabby-electron/src/index.ts @@ -99,6 +99,7 @@ export default class ElectronModule { }) this.registerGlobalHotkey() this.updateVibrancy() + this.updateWindowControlsColor() }) config.changed$.subscribe(() => { @@ -131,6 +132,8 @@ export default class ElectronModule { config.changed$.subscribe(() => this.updateVibrancy()) + config.changed$.subscribe(() => this.updateWindowControlsColor()) + config.ready$.toPromise().then(() => { dockMenu.update() }) @@ -169,6 +172,15 @@ export default class ElectronModule { this.hostWindow.setOpacity(this.config.store.appearance.opacity) } + + private updateWindowControlsColor () { + // if windows and not using native frame, WCO does not exist, return. + if (this.hostApp.platform === Platform.Windows && this.config.store.appearance.frame === 'native') { + return + } + + this.electron.ipcRenderer.send('window-set-window-controls-color', this.config.store.terminal.colorScheme) + } } export { ElectronHostWindow, ElectronHostAppService, ElectronService } diff --git a/yarn.lock b/yarn.lock index fa7b20581f..22e72e7569 100644 --- 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: