Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-02 18:39:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix window opacity bug (#1283)

Browse Source 
With the tab refactor, we introduced a regression that prevented window
transparency from working. Rather than applying overrides of the app
background color (where we record window opacity) to the body of the
document, we were applying it to the main div. This meant that while the
main div was transparent, the body was not (since the default background
color we set for the body is opaque). With this change, we update the
body background directly.
This commit is contained in:
Evan Simkowitz 2024-11-13 20:48:02 -08:00 committed by GitHub
parent 14249b33b2
commit 255cb51944
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/app/app.tsx
View File

@ -121,7 +121,7 @@ function AppSettingsUpdater() {
(windowSettings?.["window:transparent"] || windowSettings?.["window:blur"]) ?? false; (windowSettings?.["window:transparent"] || windowSettings?.["window:blur"]) ?? false;
const opacity = util.boundNumber(windowSettings?.["window:opacity"] ?? 0.8, 0, 1); const opacity = util.boundNumber(windowSettings?.["window:opacity"] ?? 0.8, 0, 1);
let baseBgColor = windowSettings?.["window:bgcolor"]; let baseBgColor = windowSettings?.["window:bgcolor"];
let mainDiv = document.getElementById("main"); const mainDiv = document.getElementById("main");
// console.log("window settings", windowSettings, isTransparentOrBlur, opacity, baseBgColor, mainDiv); // console.log("window settings", windowSettings, isTransparentOrBlur, opacity, baseBgColor, mainDiv);
if (isTransparentOrBlur) { if (isTransparentOrBlur) {
mainDiv.classList.add("is-transparent"); mainDiv.classList.add("is-transparent");
@ -131,10 +131,10 @@ function AppSettingsUpdater() {
} }
const color = new Color(baseBgColor); const color = new Color(baseBgColor);
const rgbaColor = color.alpha(opacity).string(); const rgbaColor = color.alpha(opacity).string();
mainDiv.style.backgroundColor = rgbaColor; document.body.style.backgroundColor = rgbaColor;
} else { } else {
mainDiv.classList.remove("is-transparent"); mainDiv.classList.remove("is-transparent");
mainDiv.style.opacity = null; document.body.style.backgroundColor = "var(--main-bg-color)";
} }
}, [windowSettings]); }, [windowSettings]);
return null; return null;