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

Simplify app transparency and background color handling (#1331)

Browse Source
This commit is contained in:
Evan Simkowitz 2024-11-21 10:30:02 -08:00 committed by GitHub
parent d41d96c621
commit 11b257d7a3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/app/app.less
View File

@ -12,7 +12,7 @@ body {
color: var(--main-text-color); color: var(--main-text-color);
font: var(--base-font); font: var(--base-font);
overflow: hidden; overflow: hidden;
background: var(--main-bg-color); background: rgb(from var(--main-bg-color) r g b / var(--window-opacity));
-webkit-font-smoothing: auto; -webkit-font-smoothing: auto;
backface-visibility: hidden; backface-visibility: hidden;
transform: translateZ(0); transform: translateZ(0);

20
frontend/app/app.tsx
View File

@ -17,7 +17,6 @@ import { getElemAsStr } from "@/util/focusutil";
import * as keyutil from "@/util/keyutil"; import * as keyutil from "@/util/keyutil";
import * as util from "@/util/util"; import * as util from "@/util/util";
import clsx from "clsx"; import clsx from "clsx";
import Color from "color";
import debug from "debug"; import debug from "debug";
import { Provider, useAtomValue } from "jotai"; import { Provider, useAtomValue } from "jotai";
import "overlayscrollbars/overlayscrollbars.css"; import "overlayscrollbars/overlayscrollbars.css";
@ -130,21 +129,24 @@ function AppSettingsUpdater() {
const isTransparentOrBlur = const isTransparentOrBlur =
(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"]; const baseBgColor = windowSettings?.["window:bgcolor"];
const 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");
const rootStyles = getComputedStyle(document.documentElement); if (opacity != null) {
if (baseBgColor == null) { document.body.style.setProperty("--window-opacity", `${opacity}`);
baseBgColor = rootStyles.getPropertyValue("--main-bg-color").trim(); } else {
document.body.style.removeProperty("--window-opacity");
} }
const color = new Color(baseBgColor);
const rgbaColor = color.alpha(opacity).string();
document.body.style.backgroundColor = rgbaColor;
} else { } else {
mainDiv.classList.remove("is-transparent"); mainDiv.classList.remove("is-transparent");
document.body.style.backgroundColor = "var(--main-bg-color)"; document.body.style.removeProperty("--window-opacity");
}
if (baseBgColor != null) {
document.body.style.setProperty("--main-bg-color", baseBgColor);
} else {
document.body.style.removeProperty("--main-bg-color");
} }
}, [windowSettings]); }, [windowSettings]);
return null; return null;

1
frontend/app/theme.less
View File

@ -7,6 +7,7 @@
:root { :root {
--main-text-color: #f7f7f7; --main-text-color: #f7f7f7;
--title-font-size: 18px; --title-font-size: 18px;
--window-opacity: 1;
--secondary-text-color: rgb(195, 200, 194); --secondary-text-color: rgb(195, 200, 194);
--grey-text-color: #666; --grey-text-color: #666;
--main-bg-color: rgb(34, 34, 34); --main-bg-color: rgb(34, 34, 34);