abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-07 01:15:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): fixes for mobile UI, settings and sessions pages (#451)

Browse Source 
Co-authored-by: trashtemp <96388163+trashtemp@users.noreply.github.com>
This commit is contained in:
Paul Makles
2021-12-20 20:48:37 +00:00
committed by GitHub
parent e18f6adc49
commit e6f6ddc772
15 changed files with 251 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/pages/settings/panes/Account.tsx
View File

@@ -4,6 +4,7 @@ import {
HelpCircle,
Lock,
Trash,
Pencil,
} from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { useHistory } from "react-router-dom";
@@ -153,7 +154,7 @@ export const Account = observer(() => {
)
}
account
action="chevron"
action={<Pencil size={20} />}
onClick={() =>
openScreen({
id: "modify_account",
@@ -181,7 +182,7 @@ export const Account = observer(() => {
</h5>
<CategoryButton
icon={<Lock size={24} color="var(--error)" />}
description={"Set up 2FA Authentication on your account."}
description={"Set up 2FA on your account."}
disabled
action="chevron">
Set up Two-factor authentication

76
src/pages/settings/panes/Appearance.tsx
View File

@@ -1,5 +1,16 @@
import { Reset, Import } from "@styled-icons/boxicons-regular";
import { Pencil, Store } from "@styled-icons/boxicons-solid";
import {
Reset,
Import,
FontFamily,
CodeAlt,
} from "@styled-icons/boxicons-regular";
import {
Pencil,
Store,
Palette,
HappyBeaming,
QuoteLeft,
} from "@styled-icons/boxicons-solid";
import { Link } from "react-router-dom";
// @ts-expect-error shade-blend-color does not have typings.
import pSBC from "shade-blend-color";
@@ -175,7 +186,39 @@ export function Component(props: Props) {
<Text id="app.settings.pages.appearance.display.compact" />
</Radio>
</div>*/}
<hr />
{/*<CategoryButton
icon={<Palette size={24} />}
description={"Customize the look of your app using themes."}
action="chevron">
Themes
</CategoryButton>
<CategoryButton
icon={<FontFamily size={24} />}
description={"Change the font and size used in the app."}
action="chevron">
{`Font & text size`}
</CategoryButton>
<CategoryButton
icon={<QuoteLeft size={24} />}
description={"Change the look of your messages."}
action="chevron">
Message Display
</CategoryButton>
<CategoryButton
icon={<HappyBeaming size={24} />}
description={"Personalize your client with an emoji pack."}
action="chevron">
Emoji Packs
</CategoryButton>
<h3>Advanced</h3>
<CategoryButton
icon={<CodeAlt size={24} />}
description={"Customize the client CSS to your heart's content"}
action="chevron">
Custom CSS
</CategoryButton>*/}
<h3>
<Text id="app.settings.pages.appearance.font" />
</h3>
@@ -191,20 +234,19 @@ export function Component(props: Props) {
))}
</ComboBox>
{/* TOFIX: Only show when a font with ligature support is selected, i.e.: Inter.*/}
<p>
<Checkbox
checked={props.settings.theme?.ligatures === true}
onChange={() =>
setTheme({
ligatures: !props.settings.theme?.ligatures,
})
}
description={
<Text id="app.settings.pages.appearance.ligatures_desc" />
}>
<Text id="app.settings.pages.appearance.ligatures" />
</Checkbox>
</p>
<Checkbox
checked={props.settings.theme?.ligatures === true}
onChange={() =>
setTheme({
ligatures: !props.settings.theme?.ligatures,
})
}
description={
<Text id="app.settings.pages.appearance.ligatures_desc" />
}>
<Text id="app.settings.pages.appearance.ligatures" />
</Checkbox>
<hr />
<h3>
<Text id="app.settings.pages.appearance.emoji_pack" />
@@ -279,7 +321,7 @@ export function Component(props: Props) {
</div>
</div>
</div>
<hr />
<CollapsibleSection
defaultValue={false}
id="settings_overrides"

35
src/pages/settings/panes/Audio.tsx
View File

@@ -12,6 +12,11 @@ import Button from "../../../components/ui/Button";
import ComboBox from "../../../components/ui/ComboBox";
import Overline from "../../../components/ui/Overline";
import Tip from "../../../components/ui/Tip";
import opusSVG from "../assets/opus_logo.svg";
{
/*import OpusSVG from "../assets/opus_logo.svg";*/
}
const constraints = { audio: true };
@@ -141,6 +146,19 @@ export function Component() {
);
})}
</ComboBox>
{/*TOFIX: add logic to sound notches*/}
{/*<div className={styles.notches}>
<div />
<div />
<div />
<div />
<div />
<div />
<div />
<div />
<div />
<div />
</div>*/}
{!permission && (
<Button
compact
@@ -191,9 +209,26 @@ export function Component() {
);
})}
</ComboBox>
{/*<div className={styles.notches}>
<div />
<div />
<div />
<div />
<div />
<div />
<div />
<div />
<div />
<div />
</div>*/}
</div>
</div>
</div>
<hr />
<div className={styles.opus}>
<img height="20" src={opusSVG} draggable={false} />
Audio codec powered by Opus
</div>
</>
);
}

72
src/pages/settings/panes/MyBots.tsx
View File

@@ -554,38 +554,46 @@ export const MyBots = observer(() => {
</a>
.
</h5>
{bots?.map((bot) => {
return (
<BotCard
key={bot._id}
bot={bot}
onDelete={() =>
setBots(bots.filter((x) => x._id !== bot._id))
}
onUpdate={(changes: Changes) =>
setBots(
bots.map((x) => {
if (x._id === bot._id) {
if (
"public" in changes &&
typeof changes.public === "boolean"
)
x.public = changes.public;
if ("interactions_url" in changes)
x.interactions_url =
changes.interactions_url;
if (
changes.remove === "InteractionsURL"
)
x.interactions_url = undefined;
}
return x;
}),
)
}
/>
);
})}
<hr />
<h3>
<Text id="app.settings.pages.bots.title" />
</h3>
<div className={styles.botList}>
{bots?.map((bot) => {
return (
<BotCard
key={bot._id}
bot={bot}
onDelete={() =>
setBots(bots.filter((x) => x._id !== bot._id))
}
onUpdate={(changes: Changes) =>
setBots(
bots.map((x) => {
if (x._id === bot._id) {
if (
"public" in changes &&
typeof changes.public ===
"boolean"
)
x.public = changes.public;
if ("interactions_url" in changes)
x.interactions_url =
changes.interactions_url;
if (
changes.remove ===
"InteractionsURL"
)
x.interactions_url = undefined;
}
return x;
}),
)
}
/>
);
})}
</div>
</div>
);
});

16
src/pages/settings/panes/Native.tsx
View File

@@ -1,7 +1,12 @@
import { Refresh } from "@styled-icons/boxicons-regular";
import { useEffect, useState } from "preact/hooks";
import Button from "../../../components/ui/Button";
import Checkbox from "../../../components/ui/Checkbox";
import Tip from "../../../components/ui/Tip";
import CategoryButton from "../../../components/ui/fluent/CategoryButton";
import RLogo from "../assets/revolt_r.svg";
export function Native() {
if (typeof window.native === "undefined") return null;
@@ -20,9 +25,9 @@ export function Native() {
}, []);
return (
<div>
<div style={{ marginTop: "10px" }}>
<Tip hideSeparator>Some options might require a restart.</Tip>
<h3>App Behavior</h3>
<h5>Some options might require a restart.</h5>
<Checkbox
checked={autoStart ?? false}
disabled={typeof autoStart === "undefined"}
@@ -175,6 +180,13 @@ export function Native() {
</p>
</>
)}
<hr />
<CategoryButton
icon={<img src={RLogo} draggable={false} />}
description={<span>version {window.nativeVersion}</span>}
action={<Refresh size={24} />}>
Revolt for Desktop
</CategoryButton>
</div>
);
}

57
src/pages/settings/panes/Panes.module.scss
View File

@@ -196,6 +196,14 @@
margin-top: 8px;
gap: 4px;
svg {
flex-shrink: 0;
}
a:hover {
text-decoration: underline;
}
h5 {
margin: 0;
}
@@ -229,8 +237,11 @@
}
.audio {
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 20px;
.audioRow {
margin-top: 20px;
display: flex;
gap: 20px;
@@ -242,10 +253,11 @@
.audioBox {
display: flex;
flex-direction: column;
gap: 15px;
/*gap: 15px;*/
align-items: center;
> button {
margin-top: 20px;
width: 100%;
}
}
@@ -261,6 +273,36 @@
}
}
.opus {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
opacity: 0.5;
margin-top: -12px;
> img {
height: 24px;
}
}
.notches {
margin: 10px 2px 0;
display: flex;
width: 100%;
border-radius: 60px;
overflow: hidden;
justify-content: space-between;
gap: 5px;
> div {
height: 8px;
width: 24px;
background: var(--secondary-background);
border-radius: 2px;
}
}
.appearance {
.theme {
min-width: 0;
@@ -499,7 +541,7 @@
&[data-active="true"] {
color: var(--primary-background);
background: var(--accent);
margin-bottom: 20px;
margin-bottom: 25px;
.session .detail .info > input {
&:focus {
@@ -653,12 +695,19 @@
}
.myBots {
margin-top: 10px;
.botList {
display: flex;
flex-direction: column;
margin-top: 8px;
gap: 16px;
}
.botCard {
display: flex;
flex-direction: column;
gap: 10px;
background: var(--secondary-background);
margin: 8px 0;
padding: 12px;
border-radius: var(--border-radius);
}