cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-22 23:20:58 -05:00
Code Issues Projects Releases Packages Wiki 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
Show stats 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 openmojiSVG from "../assets/openmoji_emoji.svg";
import twemojiSVG from "../assets/twemoji_emoji.svg"; import twemojiSVG from "../assets/twemoji_emoji.svg";
import { Reset, Import } from "@styled-icons/boxicons-regular"; import { Reset, Import } from "@styled-icons/boxicons-regular";
import Tooltip from "../../../components/common/Tooltip";
interface Props { interface Props {
settings: Settings; settings: Settings;
@ -246,28 +247,41 @@ export function Component(props: Props) {
<Text id="app.settings.pages.appearance.overrides" /> <Text id="app.settings.pages.appearance.overrides" />
</h3> </h3>
<div className={styles.actions}> <div className={styles.actions}>
<Button contrast iconbutton onClick={() => setTheme({ custom: {} })}> <Tooltip content={<Text id="app.settings.pages.appearance.reset_overrides" />}>
<Reset size={22}/> <Button contrast iconbutton onClick={() => setTheme({ custom: {} })}>
</Button> <Reset size={22}/>
<div className={styles.code}>Text</div> </Button>
<Button </Tooltip>
contrast <div className={styles.code} onClick={() => writeClipboard(JSON.stringify(theme))}>
iconbutton <Tooltip content={<Text id="app.special.copy" />}>
onClick={async () => { {JSON.stringify(theme)}
openScreen({ </Tooltip>
id: "_input", </div>
question: ( <Tooltip content={<Text id="app.settings.pages.appearance.import" />}>
<Text id="app.settings.pages.appearance.import_theme" /> <Button
), contrast
field: ( iconbutton
<Text id="app.settings.pages.appearance.theme_data" /> onClick={async () => {
), try {
callback: async (string) => const text = await navigator.clipboard.readText();
setOverride(JSON.parse(string)), setOverride(JSON.parse(text));
}); } catch (err) {
}}> openScreen({
<Import size={22}/> id: "_input",
</Button> 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>
<div className={styles.overrides}> <div className={styles.overrides}>
{( {(

20
src/pages/settings/panes/Panes.module.scss
View file

@ -252,17 +252,24 @@
.actions { .actions {
gap: 8px; gap: 8px;
display: flex; display: flex;
flex-wrap: wrap;
margin-bottom: 8px; margin-bottom: 8px;
.code { .code {
display: flex; cursor: pointer;
min-width: 0;
flex-grow: 1; flex-grow: 1;
border-radius: 4px;
padding: 8px; padding: 8px;
background: var(--secondary-background); border-radius: 4px;
align-items: center;
font-family: var(--codeblock-font); font-family: var(--codeblock-font);
background: var(--secondary-background);
> div {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
} }
} }
@ -272,8 +279,9 @@
.entry { .entry {
gap: 8px; gap: 8px;
padding: 2px; padding: 12px;
margin-top: 8px; margin-top: 8px;
border-radius: 6px;
.override { .override {
display: flex; display: flex;