diff --git a/package.json b/package.json index 4c49b2da8b65..e06306c4fbe3 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,7 @@ "fs-xattr": "0.3.0" }, "dependencies": { - "@indutny/frameless-titlebar": "2.2.0", + "@indutny/frameless-titlebar": "2.3.0-rc.1", "@popperjs/core": "2.9.2", "@react-spring/web": "9.4.5", "@signalapp/libsignal-client": "0.17.0", diff --git a/stylesheets/_titlebar.scss b/stylesheets/_titlebar.scss index 3cda13aa6dbf..f41d079f5f82 100644 --- a/stylesheets/_titlebar.scss +++ b/stylesheets/_titlebar.scss @@ -2,27 +2,30 @@ // SPDX-License-Identifier: AGPL-3.0-only body { + // Overriden by ts/background.ts + --zoom-factor: 1; + // These should match the logic in `ts/types/Settings.ts`'s `getTitleBarVisibility`. // // It'd be great if we could use the `:fullscreen` selector here, but that does not seem // to work with Electron, at least on macOS. --title-bar-drag-area-height: 0px; // Needs to have a unit to work with `calc()`. --draggable-app-region: initial; - &.os-macos:not(.full-screen) { - --title-bar-drag-area-height: 28px; + &.os-windows:not(.full-screen) { + --title-bar-drag-area-height: calc(28px / var(--zoom-factor)); --draggable-app-region: drag; } --window-height: 100vh; --titlebar-height: 0px; - &.os-windows:not(.full-screen) { - --titlebar-height: 28px; + &.os-macos:not(.full-screen) { + --titlebar-height: calc(28px / var(--zoom-factor)); // Account for border eating one pixel out of the titlebar and making it // look unbalanced &.os-windows-11 { - --titlebar-height: calc(28px + 1px); + --titlebar-height: calc((28px + 1px) / var(--zoom-factor)); } --window-height: calc(100vh - var(--titlebar-height)); diff --git a/stylesheets/components/TitleBarContainer.scss b/stylesheets/components/TitleBarContainer.scss index fbdfcd402b81..2ad010720b05 100644 --- a/stylesheets/components/TitleBarContainer.scss +++ b/stylesheets/components/TitleBarContainer.scss @@ -10,8 +10,10 @@ position: fixed; top: 0; left: 0; - width: 100%; + width: calc(100vw * var(--zoom-factor)); z-index: $z-index-window-controls; + transform: scale(calc(1 / var(--zoom-factor))); + transform-origin: 0 0; // This matches the inline styles of frameless-titlebar font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, diff --git a/ts/background.ts b/ts/background.ts index 6ac47cdb395a..231b11a94a8f 100644 --- a/ts/background.ts +++ b/ts/background.ts @@ -700,7 +700,16 @@ export async function startApp(): Promise { }, }); - webFrame.setZoomFactor(window.Events.getZoomFactor()); + const zoomFactor = window.Events.getZoomFactor(); + webFrame.setZoomFactor(zoomFactor); + document.body.style.setProperty('--zoom-factor', zoomFactor.toString()); + + window.addEventListener('resize', () => { + document.body.style.setProperty( + '--zoom-factor', + webFrame.getZoomFactor().toString() + ); + }); // How long since we were last running? const lastHeartbeat = toDayMillis(window.storage.get('lastHeartbeat', 0)); diff --git a/ts/components/TitleBarContainer.tsx b/ts/components/TitleBarContainer.tsx index 065d66fed610..43b20d84abf0 100644 --- a/ts/components/TitleBarContainer.tsx +++ b/ts/components/TitleBarContainer.tsx @@ -171,6 +171,12 @@ export const TitleBarContainer = (props: PropsType): JSX.Element => { opacity: 0, }, }, + + // Zoom support + enableOverflow: false, + scalingFunction(value: string) { + return `calc(${value} * var(--zoom-factor))`; + }, }; return ( diff --git a/yarn.lock b/yarn.lock index 77d1e297c5f4..6cdc6ed8433b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1378,10 +1378,10 @@ resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6" integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw== -"@indutny/frameless-titlebar@2.2.0": - version "2.2.0" - resolved "https://registry.yarnpkg.com/@indutny/frameless-titlebar/-/frameless-titlebar-2.2.0.tgz#600ad754dda50105d2c4fe0de8bb25837eca1a8c" - integrity sha512-TJQ3ZJyUdtOAVIdGSV8GxXPPpt6WdlFtqwDAvgV2SbOXng5/uioSBd7iySyDA48suR7XCaa41V4/xp/E/5uVpg== +"@indutny/frameless-titlebar@2.3.0-rc.1": + version "2.3.0-rc.1" + resolved "https://registry.yarnpkg.com/@indutny/frameless-titlebar/-/frameless-titlebar-2.3.0-rc.1.tgz#95b11a29aecec025605a77b283f9494724566217" + integrity sha512-QT8sZyjQ1fqeSon7Oop1uf5Zl2CmaXE82HD+b2QtkUUsNFpvwTD705hRSeaxjIkdnLOr0Q9FD5EgWqq72qP6+A== dependencies: classnames "^2.2.6" deepmerge "^4.2.2"