cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-23 22:22:07 -05:00
Code Issues Projects Releases Packages Wiki Activity

Re-design theme overrides.

Browse source
This commit is contained in:
Paul 2021-07-08 21:51:12 +01:00
parent b9d07152c8
commit 4474d2ec56
3 changed files with 82 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
external/lang vendored

@ -1 +1 @@
Subproject commit 39359e76b961fa7ee9f83a0cabdc811ccecdb600
Subproject commit b18d44b56037d09bd2fac68be04e42723e50a3d7

44
src/pages/settings/panes/Appearance.tsx
View file

@ -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>

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

@ -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;
}
}*/
}
}
}