mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-10 01:03:36 -05:00
Add tooltips to advanced settings.
Add click to copy theme.
This commit is contained in:
parent
ee9aab07a9
commit
b9d07152c8
2 changed files with 50 additions and 28 deletions
|
@ -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}>
|
||||
{(
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue