HMC/handmade-revolt
2
0
Fork 0
forked from abner/for-legacy-web
Code Pull Requests Actions Activity

Add tooltips to advanced settings.

Browse Source 
Add click to copy theme.
This commit is contained in:
Paul
2021-07-08 20:57:52 +01:00
parent ee9aab07a9
commit b9d07152c8
2 changed files with 50 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/pages/settings/panes/Appearance.tsx
View File

@@ -38,6 +38,7 @@ import notoSVG from "../assets/noto_emoji.svg";
import openmojiSVG from "../assets/openmoji_emoji.svg";
import twemojiSVG from "../assets/twemoji_emoji.svg";
import { Reset, Import } from "@styled-icons/boxicons-regular";
import Tooltip from "../../../components/common/Tooltip";
interface Props {
settings: Settings;
@@ -246,28 +247,41 @@ export function Component(props: Props) {
<Text id="app.settings.pages.appearance.overrides" />
</h3>
<div className={styles.actions}>
<Button contrast iconbutton onClick={() => setTheme({ custom: {} })}>
<Reset size={22}/>
</Button>
<div className={styles.code}>Text</div>
<Button
contrast
iconbutton
onClick={async () => {
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 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" />}>
{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>
</div>
<div className={styles.overrides}>
{(