From 4474d2ec566b8a8b979e6f9a3aa62574383ba769 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Thu, 8 Jul 2021 21:51:12 +0100
Subject: [PATCH] Re-design theme overrides.
---
external/lang | 2 +-
src/pages/settings/panes/Appearance.tsx | 44 +++++++------
src/pages/settings/panes/Panes.module.scss | 74 ++++++++++++++++------
3 files changed, 82 insertions(+), 38 deletions(-)
diff --git a/external/lang b/external/lang
index 39359e7..b18d44b 160000
--- a/external/lang
+++ b/external/lang
@@ -1 +1 @@
-Subproject commit 39359e76b961fa7ee9f83a0cabdc811ccecdb600
+Subproject commit b18d44b56037d09bd2fac68be04e42723e50a3d7
diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx
index ccc8a13..8a90630 100644
--- a/src/pages/settings/panes/Appearance.tsx
+++ b/src/pages/settings/panes/Appearance.tsx
@@ -37,7 +37,7 @@ import mutantSVG from "../assets/mutant_emoji.svg";
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 { Reset, Import, Pencil } from "@styled-icons/boxicons-regular";
import Tooltip from "../../../components/common/Tooltip";
interface Props {
@@ -240,12 +240,9 @@ export function Component(props: Props) {
</div>
<CollapsibleSection
- id="settings_advanced_appearance"
defaultValue={false}
- summary={<Text id="app.settings.pages.appearance.advanced" />}>
- <h3>
- <Text id="app.settings.pages.appearance.overrides" />
- </h3>
+ id="settings_overrides"
+ summary={<Text id="app.settings.pages.appearance.overrides" />}>
<div className={styles.actions}>
<Tooltip content={<Text id="app.settings.pages.appearance.reset_overrides" />}>
<Button contrast iconbutton onClick={() => setTheme({ custom: {} })}>
@@ -312,23 +309,27 @@ export function Component(props: Props) {
"hover",
] as const
).map((x) => (
- <div className={styles.entry} key={x}>
+ <div className={styles.entry} key={x}
+ style={{ backgroundColor: theme[x] }}>
+ <div className={styles.input}>
+ <input
+ type="color"
+ value={theme[x]}
+ onChange={(v) =>
+ setOverride({
+ [x]: v.currentTarget.value,
+ })
+ }
+ />
+ </div>
<span>{x}</span>
<div className={styles.override}>
- <div
- className={styles.picker}
- style={{ backgroundColor: theme[x] }}>
- <input
- type="color"
- value={theme[x]}
- onChange={(v) =>
- setOverride({
- [x]: v.currentTarget.value,
- })
- }
- />
+ <div className={styles.picker}
+ onClick={e => e.currentTarget.parentElement?.parentElement?.querySelector('input')?.click()}>
+ <Pencil size={24} />
</div>
<InputBox
+ type="text"
className={styles.text}
value={theme[x]}
onChange={(y) =>
@@ -341,7 +342,12 @@ export function Component(props: Props) {
</div>
))}
</div>
+ </CollapsibleSection>
+ <CollapsibleSection
+ id="settings_advanced_appearance"
+ defaultValue={false}
+ summary={<Text id="app.settings.pages.appearance.advanced" />}>
<h3>
<Text id="app.settings.pages.appearance.mono_font" />
</h3>
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index 85f3855..f8e9689 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -252,7 +252,7 @@
.actions {
gap: 8px;
display: flex;
- margin-bottom: 8px;
+ margin: 8px 0;
.code {
cursor: pointer;
@@ -274,28 +274,74 @@
}
.overrides {
+ row-gap: 8px;
display: grid;
- grid-template-columns: 1fr 1fr;
+ column-gap: 16px;
+ grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
.entry {
- gap: 8px;
padding: 12px;
margin-top: 8px;
border-radius: 6px;
-
- .override {
- display: flex;
- }
+ border: 1px solid black;
span {
flex: 1;
display: block;
- font-size: .875rem;
font-weight: 600;
- margin-bottom: 4px;
+ font-size: .875rem;
+ margin-bottom: 8px;
text-transform: capitalize;
+
+ color: transparent;
+ background: inherit;
+ background-clip: text;
+ -webkit-background-clip: text;
+ filter: sepia(1) invert(1) contrast(9) grayscale(1);
}
+ .override {
+ gap: 16px;
+ display: flex;
+
+ .picker {
+ width: 38px;
+ height: 38px;
+ display: grid;
+ cursor: pointer;
+ border-radius: 6px;
+ place-items: center;
+ background: var(--primary-background);
+ }
+
+ input[type="text"] {
+ width: 0;
+ min-width: 0;
+ flex-grow: 1;
+ }
+ }
+
+ .input {
+ width: 0;
+ height: 0;
+ position: relative;
+
+ input {
+ opacity: 0;
+ border: none;
+ display: block;
+ cursor: pointer;
+ position: relative;
+
+ top: 48px;
+ }
+ }
+
+ /*.override {
+ display: flex;
+ }
+
+
.picker {
width: 30px;
height: 30px;
@@ -307,20 +353,12 @@
//TOFIX - Looks wonky on Chromium
border: 1px solid black;
- input {
- opacity: 0;
- width: 30px;
- height: 30px;
- border: none;
- display: block;
- cursor: pointer;
- }
}
.text {
border-radius: 4px;
padding: 0 4px 0;
- }
+ }*/
}
}
}
--
GitLab