From b9d07152c80efc94a242c72403f234c0edf79feb Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Thu, 8 Jul 2021 20:57:52 +0100
Subject: [PATCH] Add tooltips to advanced settings. Add click to copy theme.
---
src/pages/settings/panes/Appearance.tsx | 58 ++++++++++++++--------
src/pages/settings/panes/Panes.module.scss | 20 +++++---
2 files changed, 50 insertions(+), 28 deletions(-)
diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx
index e8647a8..ccc8a13 100644
--- a/src/pages/settings/panes/Appearance.tsx
+++ b/src/pages/settings/panes/Appearance.tsx
@@ -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}>
{(
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index dd3b64a..85f3855 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -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;
--
GitLab