mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-09 16:53:36 -05:00
fix(ui): fixes for mobile UI, settings and sessions pages (#451)
Co-authored-by: trashtemp <96388163+trashtemp@users.noreply.github.com>
This commit is contained in:
Paul Makles
GitHub
parent
e7459790c5
commit
6e4c4f3ae2
15 changed files with 251 additions and 72 deletions
|
|
@ -16,7 +16,7 @@ import UserIcon from "./UserIcon";
|
|||
|
||||
const BotBadge = styled.div`
|
||||
display: inline-block;
|
||||
|
||||
flex-shrink: 0;
|
||||
height: 1.4em;
|
||||
padding: 0 4px;
|
||||
font-size: 0.6em;
|
||||
|
|
|
|||
|
|
@ -98,6 +98,8 @@
|
|||
background: var(--block);
|
||||
border-radius: var(--border-radius);
|
||||
font-family: var(--monospace-font), monospace;
|
||||
border-radius: 3px;
|
||||
-webkit-box-decoration-break: clone;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
|
|
|
|||
|
|
@ -18,9 +18,13 @@ export const GenericSidebarBase = styled.div<{
|
|||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
border-end-start-radius: 8px;
|
||||
/*border-end-start-radius: 8px;*/
|
||||
background: var(--secondary-background);
|
||||
|
||||
> :nth-child(1) {
|
||||
border-end-start-radius: 8px;
|
||||
}
|
||||
|
||||
${(props) =>
|
||||
props.mobilePadding &&
|
||||
isTouchscreenDevice &&
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@ const ServerBase = styled.div`
|
|||
flex-direction: column;
|
||||
background: var(--secondary-background);
|
||||
border-start-start-radius: 8px;
|
||||
border-end-start-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
${isTouchscreenDevice &&
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { ListCheck, ListUl } from "@styled-icons/boxicons-regular";
|
||||
import { ListUl } from "@styled-icons/boxicons-regular";
|
||||
import { InfoCircle } from "@styled-icons/boxicons-solid";
|
||||
import { Route, Switch, useHistory, useParams } from "react-router-dom";
|
||||
|
||||
import { Text } from "preact-i18n";
|
||||
|
|
@ -55,14 +56,14 @@ export default function ChannelSettings() {
|
|||
/>
|
||||
),
|
||||
id: "overview",
|
||||
icon: <ListUl size={20} />,
|
||||
icon: <InfoCircle size={20} />,
|
||||
title: (
|
||||
<Text id="app.settings.channel_pages.overview.title" />
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "permissions",
|
||||
icon: <ListCheck size={20} />,
|
||||
icon: <ListUl size={20} />,
|
||||
title: (
|
||||
<Text id="app.settings.channel_pages.permissions.title" />
|
||||
),
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
import { ListUl } from "@styled-icons/boxicons-regular";
|
||||
import {
|
||||
ListUl,
|
||||
ListCheck,
|
||||
ListMinus,
|
||||
InfoCircle,
|
||||
Group,
|
||||
FlagAlt,
|
||||
Envelope,
|
||||
UserX,
|
||||
Trash,
|
||||
} from "@styled-icons/boxicons-regular";
|
||||
import { XSquare, Share, Group } from "@styled-icons/boxicons-solid";
|
||||
} from "@styled-icons/boxicons-solid";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Route, Switch, useHistory, useParams } from "react-router-dom";
|
||||
|
||||
|
|
@ -50,14 +52,14 @@ export default observer(() => {
|
|||
{
|
||||
category: <Category variant="uniform" text={server.name} />,
|
||||
id: "overview",
|
||||
icon: <ListUl size={20} />,
|
||||
icon: <InfoCircle size={20} />,
|
||||
title: (
|
||||
<Text id="app.settings.server_pages.overview.title" />
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "categories",
|
||||
icon: <ListMinus size={20} />,
|
||||
icon: <ListUl size={20} />,
|
||||
title: (
|
||||
<Text id="app.settings.server_pages.categories.title" />
|
||||
),
|
||||
|
|
@ -72,19 +74,19 @@ export default observer(() => {
|
|||
},
|
||||
{
|
||||
id: "invites",
|
||||
icon: <Share size={20} />,
|
||||
icon: <Envelope size={20} />,
|
||||
title: (
|
||||
<Text id="app.settings.server_pages.invites.title" />
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "bans",
|
||||
icon: <XSquare size={20} />,
|
||||
icon: <UserX size={20} />,
|
||||
title: <Text id="app.settings.server_pages.bans.title" />,
|
||||
},
|
||||
{
|
||||
id: "roles",
|
||||
icon: <ListCheck size={20} />,
|
||||
icon: <FlagAlt size={20} />,
|
||||
title: <Text id="app.settings.server_pages.roles.title" />,
|
||||
hideTitle: true,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -193,6 +193,7 @@
|
|||
padding: 80px 32px;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
details {
|
||||
|
|
@ -205,6 +206,14 @@
|
|||
}
|
||||
}*/
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
width: calc(100% - 10px);
|
||||
background: var(--secondary-header);
|
||||
margin: 18px auto;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
line-height: 1rem;
|
||||
|
|
|
|||
10
src/pages/settings/assets/opus_logo.svg
Normal file
10
src/pages/settings/assets/opus_logo.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_13_24)">
|
||||
<path d="M10.854 3.12557C10.258 2.62938 9.34037 2.29717 8.1035 2.12772L7.1946 5.01762C7.17497 5.12361 7.1412 5.244 7.08884 5.38272C6.99612 5.61457 6.88442 5.80557 6.75317 5.95588C6.62176 6.10658 6.47468 6.22408 6.31175 6.30973C6.14865 6.39489 5.97141 6.45368 5.77985 6.48609C5.58829 6.51826 5.39005 6.52839 5.1853 6.51649C4.98031 6.50458 4.80596 6.47668 4.66249 6.43269C4.51886 6.38878 4.38681 6.31592 4.26642 6.21395C4.1774 6.11382 4.12561 5.9825 4.11145 5.81973C4.09722 5.65696 4.13662 5.45566 4.22975 5.21585C4.31298 5.0074 4.41834 4.82565 4.54604 4.67133C4.67367 4.51684 4.82293 4.39701 4.99358 4.31209C5.15659 4.22693 5.33183 4.16991 5.51945 4.1412C5.70658 4.11273 5.91471 4.10517 6.14318 4.11844C6.33233 4.12962 6.50845 4.15744 6.67187 4.20272C6.74939 4.22403 6.81727 4.25202 6.87629 4.28579L7.5741 2.06692C7.40184 2.05068 7.22564 2.03644 7.0426 2.02591C5.28132 1.92305 3.80103 2.12651 2.60108 2.63517C1.40137 3.14423 0.601437 3.89897 0.20191 4.89932C0.0820034 5.20604 0.0175866 5.49507 0.00809705 5.76665L0.00729267 5.76625C-0.107386 7.73356 1.1569 8.84191 1.93794 9.33473C2.25133 9.54454 2.52999 9.64845 2.52999 9.64845L2.88794 8.50447L2.99377 8.22332C3.46496 8.31243 3.98897 8.37443 4.56784 8.40813C6.34134 8.51155 7.82799 8.30905 9.02777 7.79983C10.2273 7.29117 11.0206 6.54222 11.4075 5.55273C11.794 4.56397 11.6097 3.75478 10.854 3.12557Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_13_24">
|
||||
<rect width="11.6" height="11.6" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
3
src/pages/settings/assets/revolt_r.svg
Normal file
3
src/pages/settings/assets/revolt_r.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.8908 7.94093C16.8908 9.74273 15.9104 10.8243 13.8182 10.8243H10.3541V5.12282H13.8188C15.9104 5.12282 16.8908 6.23674 16.8908 7.94093ZM1.41162 0.470581L4.76544 5.13381V23.4686H10.3547V14.788H11.6949L16.4677 23.4706H22.7761L17.4809 14.362C18.9593 14.0014 20.2705 13.1455 21.1976 11.9361C22.1246 10.7267 22.6119 9.23623 22.5787 7.71142C22.5787 3.71409 19.768 0.470581 14.1458 0.470581H4.76544H1.41162Z" fill="#FF4654" stroke="#FF4654" stroke-width="0.102222"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 574 B |
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue