feat(theme): add transparency effects toggle

This commit is contained in:
Paul Makles 2021-12-29 00:18:00 +00:00
parent 5974a2b83b
commit cc531705b4
6 changed files with 48 additions and 8 deletions

2
external/lang vendored

@ -1 +1 @@
Subproject commit b955e40611bc317851fe80fafdc3a26b9665d77e Subproject commit 1bf1a75b4dcc3b8543651c792ee0901b9db57e39

View file

@ -214,14 +214,44 @@ export const DisplayLigaturesShim = observer(() => {
/** /**
* Component providing a way to toggle seasonal themes. * Component providing a way to toggle seasonal themes.
*/ */
export const DisplaySeasonalShim = observer(() => {
const settings = useApplicationState().settings;
return (
<Checkbox
checked={settings.get("appearance:seasonal") ?? true}
onChange={(v) => settings.set("appearance:seasonal", v)}
description={
<Text id="app.settings.pages.appearance.theme_options.seasonal_desc" />
}>
<Text id="app.settings.pages.appearance.theme_options.seasonal" />
</Checkbox>
);
});
/**
* Component providing a way to toggle transparency effects.
*/
export const DisplayTransparencyShim = observer(() => {
const settings = useApplicationState().settings;
return (
<Checkbox
checked={settings.get("appearance:transparency") ?? true}
onChange={(v) => settings.set("appearance:transparency", v)}
description={
<Text id="app.settings.pages.appearance.theme_options.transparency_desc" />
}>
<Text id="app.settings.pages.appearance.theme_options.transparency" />
</Checkbox>
);
});
export const ThemeOptionsShim = observer(() => { export const ThemeOptionsShim = observer(() => {
const settings = useApplicationState().settings; const settings = useApplicationState().settings;
return ( return (
<> <>
<h3>
<Text id="app.settings.pages.appearance.theme_options.title" />
</h3>
{/* TOFIX: WIP feature - follows system theme */} {/* TOFIX: WIP feature - follows system theme */}
{/*<Checkbox {/*<Checkbox
checked={settings.get("appearance:seasonal") ?? true} checked={settings.get("appearance:seasonal") ?? true}

View file

@ -212,7 +212,7 @@ export default class State {
return; return;
} }
} catch (err) { } catch (err) {
reportError(err, "redux_migration"); reportError(err as any, "redux_migration");
} }
// Load MobX store. // Load MobX store.

View file

@ -29,6 +29,7 @@ export interface ISettings {
"appearance:emoji": EmojiPack; "appearance:emoji": EmojiPack;
"appearance:ligatures": boolean; "appearance:ligatures": boolean;
"appearance:seasonal": boolean; "appearance:seasonal": boolean;
"appearance:transparency": boolean;
"appearance:theme:base": "dark" | "light"; "appearance:theme:base": "dark" | "light";
"appearance:theme:overrides": Partial<Overrides>; "appearance:theme:overrides": Partial<Overrides>;
@ -140,6 +141,7 @@ export default class Settings
if (key === "appearance") { if (key === "appearance") {
this.remove("appearance:emoji"); this.remove("appearance:emoji");
this.remove("appearance:seasonal"); this.remove("appearance:seasonal");
this.remove("appearance:transparency");
} else { } else {
this.remove("appearance:ligatures"); this.remove("appearance:ligatures");
this.remove("appearance:theme:base"); this.remove("appearance:theme:base");
@ -169,6 +171,7 @@ export default class Settings
appearance: this.pullKeys([ appearance: this.pullKeys([
"appearance:emoji", "appearance:emoji",
"appearance:seasonal", "appearance:seasonal",
"appearance:transparency",
]), ]),
theme: this.pullKeys([ theme: this.pullKeys([
"appearance:ligatures", "appearance:ligatures",

View file

@ -95,7 +95,9 @@ export default class STheme {
...this.settings.get("appearance:theme:overrides"), ...this.settings.get("appearance:theme:overrides"),
light: this.isLight(), light: this.isLight(),
"min-opacity": 0, "min-opacity": this.settings.get("appearance:transparency", true)
? 0
: 1,
}; };
} }

View file

@ -14,7 +14,8 @@ import {
DisplayLigaturesShim, DisplayLigaturesShim,
DisplayEmojiShim, DisplayEmojiShim,
ThemeCustomCSSShim, ThemeCustomCSSShim,
ThemeOptionsShim, DisplaySeasonalShim,
DisplayTransparencyShim,
} from "../../../components/settings/AppearanceShims"; } from "../../../components/settings/AppearanceShims";
import ThemeOverrides from "../../../components/settings/appearance/ThemeOverrides"; import ThemeOverrides from "../../../components/settings/appearance/ThemeOverrides";
import ThemeTools from "../../../components/settings/appearance/ThemeTools"; import ThemeTools from "../../../components/settings/appearance/ThemeTools";
@ -27,7 +28,11 @@ export const Appearance = observer(() => {
<hr /> <hr />
<ThemeAccentShim /> <ThemeAccentShim />
<hr /> <hr />
<ThemeOptionsShim /> <h3>
<Text id="app.settings.pages.appearance.theme_options.title" />
</h3>
<DisplaySeasonalShim />
<DisplayTransparencyShim />
<hr /> <hr />
<DisplayFontShim /> <DisplayFontShim />
<DisplayLigaturesShim /> <DisplayLigaturesShim />