cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-22 15:10:57 -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 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}>
{(

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

@ -252,17 +252,24 @@
.actions {
gap: 8px;
display: flex;
flex-wrap: wrap;
margin-bottom: 8px;
.code {
display: flex;
cursor: pointer;
min-width: 0;
flex-grow: 1;
border-radius: 4px;
padding: 8px;
background: var(--secondary-background);
align-items: center;
border-radius: 4px;
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 {
gap: 8px;
padding: 2px;
padding: 12px;
margin-top: 8px;
border-radius: 6px;
.override {
display: flex;