revite/src/pages/settings/panes/Appearance.tsx

467 lines
18 KiB
TypeScript
Raw Normal View History

import { Reset, Import } from "@styled-icons/boxicons-regular";
import { Pencil } from "@styled-icons/boxicons-solid";
2021-08-05 09:47:00 -04:00
// @ts-expect-error shade-blend-color does not have typings.
2021-07-05 06:23:23 -04:00
import pSBC from "shade-blend-color";
2021-06-19 17:37:12 -04:00
import styles from "./Panes.module.scss";
2021-07-05 06:23:23 -04:00
import { Text } from "preact-i18n";
import { useCallback, useContext, useEffect, useState } from "preact/hooks";
import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
2021-06-19 17:37:12 -04:00
import { debounce } from "../../../lib/debounce";
2021-07-05 06:23:23 -04:00
import { dispatch } from "../../../redux";
2021-06-19 17:37:12 -04:00
import { connectState } from "../../../redux/connector";
import { EmojiPacks, Settings } from "../../../redux/reducers/settings";
2021-07-05 06:23:23 -04:00
import {
2021-07-05 06:25:20 -04:00
DEFAULT_FONT,
DEFAULT_MONO_FONT,
2021-08-05 09:47:00 -04:00
Fonts,
2021-07-05 06:25:20 -04:00
FONTS,
FONT_KEYS,
2021-08-05 09:47:00 -04:00
MonospaceFonts,
MONOSPACE_FONTS,
MONOSPACE_FONT_KEYS,
2021-07-05 06:25:20 -04:00
Theme,
ThemeContext,
ThemeOptions,
2021-07-05 06:23:23 -04:00
} from "../../../context/Theme";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
2021-07-05 06:23:23 -04:00
import CollapsibleSection from "../../../components/common/CollapsibleSection";
import Tooltip from "../../../components/common/Tooltip";
2021-07-05 06:23:23 -04:00
import Button from "../../../components/ui/Button";
2021-08-05 09:47:00 -04:00
import Checkbox from "../../../components/ui/Checkbox";
2021-07-05 06:23:23 -04:00
import ColourSwatches from "../../../components/ui/ColourSwatches";
import ComboBox from "../../../components/ui/ComboBox";
import InputBox from "../../../components/ui/InputBox";
import darkSVG from "../assets/dark.svg";
import lightSVG from "../assets/light.svg";
import mutantSVG from "../assets/mutant_emoji.svg";
import notoSVG from "../assets/noto_emoji.svg";
import openmojiSVG from "../assets/openmoji_emoji.svg";
import twemojiSVG from "../assets/twemoji_emoji.svg";
2021-06-19 17:37:12 -04:00
interface Props {
2021-07-05 06:25:20 -04:00
settings: Settings;
2021-06-19 17:37:12 -04:00
}
// ! FIXME: code needs to be rewritten to fix jittering
export function Component(props: Props) {
2021-07-05 06:25:20 -04:00
const theme = useContext(ThemeContext);
const { writeClipboard, openScreen } = useIntermediate();
2021-06-19 17:37:12 -04:00
2021-07-05 06:25:20 -04:00
function setTheme(theme: ThemeOptions) {
dispatch({
type: "SETTINGS_SET_THEME",
theme,
});
}
2021-06-19 17:37:12 -04:00
2021-08-05 09:47:00 -04:00
const pushOverride = useCallback((custom: Partial<Theme>) => {
2021-07-05 06:25:20 -04:00
dispatch({
type: "SETTINGS_SET_THEME_OVERRIDE",
custom,
});
2021-08-05 09:47:00 -04:00
}, []);
2021-06-19 17:37:12 -04:00
2021-07-05 06:25:20 -04:00
function setAccent(accent: string) {
setOverride({
accent,
"scrollbar-thumb": pSBC(-0.2, accent),
});
}
2021-06-19 17:37:12 -04:00
2021-07-05 06:25:20 -04:00
const emojiPack = props.settings.appearance?.emojiPack ?? "mutant";
function setEmojiPack(emojiPack: EmojiPacks) {
dispatch({
type: "SETTINGS_SET_APPEARANCE",
options: {
emojiPack,
},
});
}
2021-06-19 17:37:12 -04:00
2021-08-05 09:47:00 -04:00
// eslint-disable-next-line react-hooks/exhaustive-deps
const setOverride = useCallback(
debounce(pushOverride as (...args: unknown[]) => void, 200),
[pushOverride],
) as (custom: Partial<Theme>) => void;
2021-07-05 06:25:20 -04:00
const [css, setCSS] = useState(props.settings.theme?.custom?.css ?? "");
2021-06-19 17:37:12 -04:00
2021-08-05 09:47:00 -04:00
useEffect(() => setOverride({ css }), [setOverride, css]);
2021-06-19 17:37:12 -04:00
2021-07-05 06:25:20 -04:00
const selected = props.settings.theme?.preset ?? "dark";
return (
<div className={styles.appearance}>
<h3>
<Text id="app.settings.pages.appearance.theme" />
</h3>
<div className={styles.themes}>
<div className={styles.theme}>
<img
loading="eager"
2021-07-05 06:25:20 -04:00
src={lightSVG}
2021-07-10 12:39:01 -04:00
draggable={false}
2021-07-05 06:25:20 -04:00
data-active={selected === "light"}
onClick={() =>
selected !== "light" &&
setTheme({ preset: "light" })
}
onContextMenu={(e) => e.preventDefault()}
2021-07-05 06:25:20 -04:00
/>
<h4>
<Text id="app.settings.pages.appearance.color.light" />
</h4>
</div>
<div className={styles.theme}>
<img
loading="eager"
2021-07-05 06:25:20 -04:00
src={darkSVG}
draggable={false}
2021-07-05 06:25:20 -04:00
data-active={selected === "dark"}
onClick={() =>
selected !== "dark" && setTheme({ preset: "dark" })
}
onContextMenu={(e) => e.preventDefault()}
2021-07-05 06:25:20 -04:00
/>
<h4>
<Text id="app.settings.pages.appearance.color.dark" />
</h4>
</div>
</div>
2021-07-05 18:06:03 -04:00
{/*<Checkbox
checked={props.settings.theme?.ligatures === true}
onChange={() =>
setTheme({
ligatures: !props.settings.theme?.ligatures,
})
}>
Use the system theme
</Checkbox>*/}
2021-06-19 17:37:12 -04:00
2021-07-05 06:25:20 -04:00
<h3>
<Text id="app.settings.pages.appearance.accent_selector" />
</h3>
<ColourSwatches value={theme.accent} onChange={setAccent} />
2021-06-19 17:37:12 -04:00
2021-07-05 06:25:20 -04:00
{/*<h3>
2021-06-19 17:37:12 -04:00
<Text id="app.settings.pages.appearance.message_display" />
</h3>
<div className={styles.display}>
<Radio
description={
<Text id="app.settings.pages.appearance.display.default_description" />
}
checked
>
<Text id="app.settings.pages.appearance.display.default" />
</Radio>
<Radio
description={
<Text id="app.settings.pages.appearance.display.compact_description" />
}
disabled
>
<Text id="app.settings.pages.appearance.display.compact" />
</Radio>
</div>*/}
2021-07-05 06:25:20 -04:00
<h3>
<Text id="app.settings.pages.appearance.font" />
</h3>
<ComboBox
value={theme.font ?? DEFAULT_FONT}
onChange={(e) =>
2021-08-05 09:47:00 -04:00
pushOverride({ font: e.currentTarget.value as Fonts })
2021-07-05 06:25:20 -04:00
}>
{FONT_KEYS.map((key) => (
2021-08-05 09:47:00 -04:00
<option value={key} key={key}>
2021-07-05 06:25:20 -04:00
{FONTS[key as keyof typeof FONTS].name}
</option>
))}
</ComboBox>
2021-08-05 09:47:00 -04:00
{/* TOFIX: Only show when a font with ligature support is selected, i.e.: Inter.*/}
2021-07-05 06:25:20 -04:00
<p>
<Checkbox
checked={props.settings.theme?.ligatures === true}
onChange={() =>
setTheme({
ligatures: !props.settings.theme?.ligatures,
})
}
description={
<Text id="app.settings.pages.appearance.ligatures_desc" />
}>
<Text id="app.settings.pages.appearance.ligatures" />
</Checkbox>
2021-08-05 09:47:00 -04:00
</p>
2021-07-05 06:25:20 -04:00
<h3>
<Text id="app.settings.pages.appearance.emoji_pack" />
</h3>
<div className={styles.emojiPack}>
<div className={styles.row}>
<div>
<div
className={styles.button}
onClick={() => setEmojiPack("mutant")}
data-active={emojiPack === "mutant"}>
<img
loading="eager"
src={mutantSVG}
draggable={false}
onContextMenu={(e) => e.preventDefault()}
/>
2021-07-05 06:25:20 -04:00
</div>
<h4>
Mutant Remix{" "}
<a
href="https://mutant.revolt.chat"
target="_blank"
rel="noreferrer">
2021-07-05 06:25:20 -04:00
(by Revolt)
</a>
</h4>
</div>
<div>
<div
className={styles.button}
onClick={() => setEmojiPack("twemoji")}
data-active={emojiPack === "twemoji"}>
<img
loading="eager"
src={twemojiSVG}
draggable={false}
onContextMenu={(e) => e.preventDefault()}
/>
2021-07-05 06:25:20 -04:00
</div>
<h4>Twemoji</h4>
</div>
</div>
<div className={styles.row}>
<div>
<div
className={styles.button}
onClick={() => setEmojiPack("openmoji")}
data-active={emojiPack === "openmoji"}>
<img
loading="eager"
src={openmojiSVG}
draggable={false}
onContextMenu={(e) => e.preventDefault()}
/>
2021-07-05 06:25:20 -04:00
</div>
<h4>Openmoji</h4>
</div>
<div>
<div
className={styles.button}
onClick={() => setEmojiPack("noto")}
data-active={emojiPack === "noto"}>
<img
loading="eager"
src={notoSVG}
draggable={false}
onContextMenu={(e) => e.preventDefault()}
/>
2021-07-05 06:25:20 -04:00
</div>
<h4>Noto Emoji</h4>
</div>
</div>
</div>
2021-06-19 17:37:12 -04:00
2021-07-05 06:25:20 -04:00
<CollapsibleSection
defaultValue={false}
2021-07-08 16:51:12 -04:00
id="settings_overrides"
summary={<Text id="app.settings.pages.appearance.overrides" />}>
2021-07-05 06:25:20 -04:00
<div className={styles.actions}>
<Tooltip
content={
<Text id="app.settings.pages.appearance.reset_overrides" />
}>
<Button
contrast
iconbutton
onClick={() => setTheme({ custom: {} })}>
<Reset size={22} />
</Button>
</Tooltip>
<div
className={styles.code}
onClick={() => writeClipboard(JSON.stringify(theme))}>
<Tooltip content={<Text id="app.special.copy" />}>
{" "}
{/*TOFIX: Try to put the tooltip above the .code div without messing up the css challenge */}
{JSON.stringify(theme)}
</Tooltip>
</div>
<Tooltip
content={
<Text id="app.settings.pages.appearance.import" />
}>
<Button
contrast
iconbutton
onClick={async () => {
try {
const text =
await navigator.clipboard.readText();
setOverride(JSON.parse(text));
} catch (err) {
openScreen({
id: "_input",
question: (
<Text id="app.settings.pages.appearance.import_theme" />
),
field: (
<Text id="app.settings.pages.appearance.theme_data" />
),
callback: async (string) =>
setOverride(JSON.parse(string)),
});
}
}}>
<Import size={22} />
</Button>
</Tooltip>
2021-07-05 06:25:20 -04:00
</div>
<h3>App</h3>
2021-07-05 06:25:20 -04:00
<div className={styles.overrides}>
{(
[
"accent",
"background",
"foreground",
"primary-background",
"primary-header",
"secondary-background",
"secondary-foreground",
"secondary-header",
"tertiary-background",
"tertiary-foreground",
"block",
"message-box",
"mention",
"scrollbar-thumb",
"scrollbar-track",
"status-online",
"status-away",
"status-busy",
"status-streaming",
"status-invisible",
"success",
"warning",
"error",
"hover",
] as const
).map((x) => (
<div
className={styles.entry}
key={x}
2021-07-08 16:51:12 -04:00
style={{ backgroundColor: theme[x] }}>
<div className={styles.input}>
<input
type="color"
value={theme[x]}
onChange={(v) =>
setOverride({
[x]: v.currentTarget.value,
})
}
/>
</div>
<span
2021-08-17 20:11:17 -04:00
style={`color: ${getContrastingColour(
theme[x],
theme["primary-background"],
)}`}>
{x}
</span>
2021-07-05 06:25:20 -04:00
<div className={styles.override}>
<div
className={styles.picker}
onClick={(e) =>
e.currentTarget.parentElement?.parentElement
?.querySelector("input")
?.click()
}>
2021-07-08 16:51:12 -04:00
<Pencil size={24} />
2021-07-05 06:25:20 -04:00
</div>
<InputBox
2021-07-08 16:51:12 -04:00
type="text"
2021-07-05 06:25:20 -04:00
className={styles.text}
value={theme[x]}
onChange={(y) =>
setOverride({
[x]: y.currentTarget.value,
})
}
/>
</div>
</div>
))}
</div>
2021-07-08 16:51:12 -04:00
</CollapsibleSection>
2021-07-08 16:51:12 -04:00
<CollapsibleSection
id="settings_advanced_appearance"
defaultValue={false}
summary={<Text id="app.settings.pages.appearance.advanced" />}>
2021-07-05 06:25:20 -04:00
<h3>
<Text id="app.settings.pages.appearance.mono_font" />
</h3>
<ComboBox
value={theme.monospaceFont ?? DEFAULT_MONO_FONT}
2021-07-05 06:25:20 -04:00
onChange={(e) =>
pushOverride({
2021-08-05 09:47:00 -04:00
monospaceFont: e.currentTarget
.value as MonospaceFonts,
2021-07-05 06:25:20 -04:00
})
}>
{MONOSPACE_FONT_KEYS.map((key) => (
2021-08-05 09:47:00 -04:00
<option value={key} key={key}>
2021-07-05 06:25:20 -04:00
{
MONOSPACE_FONTS[
key as keyof typeof MONOSPACE_FONTS
2021-07-05 06:25:20 -04:00
].name
}
</option>
))}
</ComboBox>
2021-07-05 06:25:20 -04:00
<h3>
<Text id="app.settings.pages.appearance.custom_css" />
</h3>
<TextAreaAutoSize
maxRows={20}
minHeight={480}
code
value={css}
onChange={(ev) => setCSS(ev.currentTarget.value)}
/>
</CollapsibleSection>
</div>
);
2021-06-19 17:37:12 -04:00
}
2021-07-05 06:23:23 -04:00
export const Appearance = connectState(Component, (state) => {
2021-07-05 06:25:20 -04:00
return {
settings: state.settings,
};
2021-07-05 06:23:23 -04:00
});
2021-08-15 14:14:10 -04:00
2021-08-17 20:11:17 -04:00
function getContrastingColour(hex: string, fallback: string): string {
try {
hex = hex.replace("#", "");
const r = parseInt(hex.substr(0, 2), 16);
const g = parseInt(hex.substr(2, 2), 16);
const b = parseInt(hex.substr(4, 2), 16);
const cc = (r * 299 + g * 587 + b * 114) / 1000;
return cc >= 175 ? "black" : "white";
} catch (e) {
return getContrastingColour(fallback, "#fffff");
}
2021-08-15 14:14:10 -04:00
}