cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-24 22:52:09 -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 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, Pencil } from "@styled-icons/boxicons-regular";
import Tooltip from "../../../components/common/Tooltip"; import Tooltip from "../../../components/common/Tooltip";
interface Props { interface Props {
@ -240,12 +240,9 @@ export function Component(props: Props) {
</div> </div>
<CollapsibleSection <CollapsibleSection
id="settings_advanced_appearance"
defaultValue={false} defaultValue={false}
summary={<Text id="app.settings.pages.appearance.advanced" />}> id="settings_overrides"
<h3> summary={<Text id="app.settings.pages.appearance.overrides" />}>
<Text id="app.settings.pages.appearance.overrides" />
</h3>
<div className={styles.actions}> <div className={styles.actions}>
<Tooltip content={<Text id="app.settings.pages.appearance.reset_overrides" />}> <Tooltip content={<Text id="app.settings.pages.appearance.reset_overrides" />}>
<Button contrast iconbutton onClick={() => setTheme({ custom: {} })}> <Button contrast iconbutton onClick={() => setTheme({ custom: {} })}>
@ -312,23 +309,27 @@ export function Component(props: Props) {
"hover", "hover",
] as const ] as const
).map((x) => ( ).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> <span>{x}</span>
<div className={styles.override}> <div className={styles.override}>
<div <div className={styles.picker}
className={styles.picker} onClick={e => e.currentTarget.parentElement?.parentElement?.querySelector('input')?.click()}>
style={{ backgroundColor: theme[x] }}> <Pencil size={24} />
<input
type="color"
value={theme[x]}
onChange={(v) =>
setOverride({
[x]: v.currentTarget.value,
})
}
/>
</div> </div>
<InputBox <InputBox
type="text"
className={styles.text} className={styles.text}
value={theme[x]} value={theme[x]}
onChange={(y) => onChange={(y) =>
@ -341,7 +342,12 @@ export function Component(props: Props) {
</div> </div>
))} ))}
</div> </div>
</CollapsibleSection>
<CollapsibleSection
id="settings_advanced_appearance"
defaultValue={false}
summary={<Text id="app.settings.pages.appearance.advanced" />}>
<h3> <h3>
<Text id="app.settings.pages.appearance.mono_font" /> <Text id="app.settings.pages.appearance.mono_font" />
</h3> </h3>

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

@ -252,7 +252,7 @@
.actions { .actions {
gap: 8px; gap: 8px;
display: flex; display: flex;
margin-bottom: 8px; margin: 8px 0;
.code { .code {
cursor: pointer; cursor: pointer;
@ -274,28 +274,74 @@
} }
.overrides { .overrides {
row-gap: 8px;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; column-gap: 16px;
grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
.entry { .entry {
gap: 8px;
padding: 12px; padding: 12px;
margin-top: 8px; margin-top: 8px;
border-radius: 6px; border-radius: 6px;
border: 1px solid black;
.override {
display: flex;
}
span { span {
flex: 1; flex: 1;
display: block; display: block;
font-size: .875rem;
font-weight: 600; font-weight: 600;
margin-bottom: 4px; font-size: .875rem;
margin-bottom: 8px;
text-transform: capitalize; 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 { .picker {
width: 30px; width: 30px;
height: 30px; height: 30px;
@ -307,20 +353,12 @@
//TOFIX - Looks wonky on Chromium //TOFIX - Looks wonky on Chromium
border: 1px solid black; border: 1px solid black;
input {
opacity: 0;
width: 30px;
height: 30px;
border: none;
display: block;
cursor: pointer;
}
} }
.text { .text {
border-radius: 4px; border-radius: 4px;
padding: 0 4px 0; padding: 0 4px 0;
} }*/
} }
} }
} }