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

16
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,14 +247,25 @@ 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}>
<Tooltip content={<Text id="app.settings.pages.appearance.reset_overrides" />}>
<Button contrast iconbutton onClick={() => setTheme({ custom: {} })}> <Button contrast iconbutton onClick={() => setTheme({ custom: {} })}>
<Reset size={22}/> <Reset size={22}/>
</Button> </Button>
<div className={styles.code}>Text</div> </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 <Button
contrast contrast
iconbutton iconbutton
onClick={async () => { onClick={async () => {
try {
const text = await navigator.clipboard.readText();
setOverride(JSON.parse(text));
} catch (err) {
openScreen({ openScreen({
id: "_input", id: "_input",
question: ( question: (
@ -265,9 +277,11 @@ export function Component(props: Props) {
callback: async (string) => callback: async (string) =>
setOverride(JSON.parse(string)), setOverride(JSON.parse(string)),
}); });
}
}}> }}>
<Import size={22}/> <Import size={22}/>
</Button> </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;