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

Merge branch 'master' into cleanup

Browse Source
This commit is contained in:
bree
2021-07-04 21:06:30 -04:00
parent a4051330a3 b19479f1b1
commit 3c2a85a3e4
50 changed files with 686 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/settings/Settings.module.scss
View File

@@ -93,7 +93,7 @@
margin: 1rem 12px 0;
font-size: 10px;
color: var(--secondary-foreground);
font-family: "Fira Mono", monospace;
font-family: var(--monoscape-font), monospace;
user-select: text;
display: grid;

19
src/pages/settings/Settings.tsx
View File

@@ -10,22 +10,19 @@ import {
Bell,
Palette,
Coffee,
Globe,
IdCard,
LogOut,
Sync as SyncIcon,
Shield,
Vial,
User
} from "@styled-icons/boxicons-regular";
import { Brush, Megaphone } from "@styled-icons/boxicons-solid";
CheckShield,
Flask,
User,
Megaphone
} from "@styled-icons/boxicons-solid";
import { Sync as SyncIcon, Globe, LogOut } from "@styled-icons/boxicons-regular";
import { Gitlab } from "@styled-icons/boxicons-logos";
import { GIT_BRANCH, GIT_REVISION, REPO_URL } from "../../revision";
import LineDivider from "../../components/ui/LineDivider";
import RequiresOnline from "../../context/revoltjs/RequiresOnline";
import ButtonItem from "../../components/navigation/items/ButtonItem";
import { AppContext, OperationsContext } from "../../context/revoltjs/RevoltClient";
import { Account } from "./panes/Account";
import { Profile } from "./panes/Profile";
import { Sessions } from "./panes/Sessions";
@@ -64,7 +61,7 @@ export default function Settings() {
},
{
id: 'sessions',
icon: <Shield size={20} />,
icon: <CheckShield size={20} />,
title: <Text id="app.settings.pages.sessions.title" />
},
{
@@ -91,7 +88,7 @@ export default function Settings() {
{
divider: true,
id: 'experiments',
icon: <Vial size={20} />,
icon: <Flask size={20} />,
title: <Text id="app.settings.pages.experiments.title" />
},
{

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

@@ -5,7 +5,8 @@ import Button from "../../../components/ui/Button";
import { Users } from "revolt.js/dist/api/objects";
import { Link, useHistory } from "react-router-dom";
import Overline from "../../../components/ui/Overline";
import { At, Key, Envelope } from "@styled-icons/boxicons-regular";
import { Envelope, Key } from "@styled-icons/boxicons-solid";
import { At } from "@styled-icons/boxicons-regular";
import { useContext, useEffect, useState } from "preact/hooks";
import UserIcon from "../../../components/common/user/UserIcon";
import { useForceUpdate, useSelf } from "../../../context/revoltjs/hooks";
@@ -47,9 +48,7 @@ export function Account() {
return (
<div className={styles.user}>
<div className={styles.banner}>
<Link to="/settings/profile">
<UserIcon target={user} size={72} />
</Link>
<UserIcon className={styles.avatar} target={user} size={72} onClick={() => switchPage("profile")}/>
<div className={styles.username}>@{user.username}</div>
</div>
<div className={styles.details}>

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

@@ -2,15 +2,18 @@ import { Text } from "preact-i18n";
import styles from "./Panes.module.scss";
import { debounce } from "../../../lib/debounce";
import Button from "../../../components/ui/Button";
import Checkbox from "../../../components/ui/Checkbox";
import ComboBox from "../../../components/ui/ComboBox";
import InputBox from "../../../components/ui/InputBox";
import { connectState } from "../../../redux/connector";
import { WithDispatcher } from "../../../redux/reducers";
import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
import ColourSwatches from "../../../components/ui/ColourSwatches";
import { EmojiPacks, Settings } from "../../../redux/reducers/settings";
import { Theme, ThemeContext, ThemeOptions } from "../../../context/Theme";
import { useCallback, useContext, useEffect, useState } from "preact/hooks";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import CollapsibleSection from "../../../components/common/CollapsibleSection";
import { FONTS, FONT_KEYS, MONOSCAPE_FONTS, MONOSCAPE_FONT_KEYS, Theme, ThemeContext, ThemeOptions } from "../../../context/Theme";
// @ts-ignore
import pSBC from 'shade-blend-color';
@@ -129,6 +132,25 @@ export function Component(props: Props & WithDispatcher) {
</Radio>
</div>*/}
<h3>
<Text id="app.settings.pages.appearance.font" />
</h3>
<ComboBox value={theme.font} onChange={e => setTheme({ custom: { font: e.currentTarget.value as any } })}>
{
FONT_KEYS
.map(key =>
<option value={key}>{ FONTS[key as keyof typeof FONTS].name }</option>
)
}
</ComboBox>
<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>
<h3>
<Text id="app.settings.pages.appearance.emoji_pack" />
</h3>
@@ -171,11 +193,7 @@ export function Component(props: Props & WithDispatcher) {
</div>
</div>
<details>
<summary>
<Text id="app.settings.pages.appearance.advanced" />
<div className={styles.divider}></div>
</summary>
<CollapsibleSection id="settings_advanced_appearance" defaultValue={false} summary={<Text id="app.settings.pages.appearance.advanced" />}>
<h3>
<Text id="app.settings.pages.appearance.overrides" />
</h3>
@@ -263,6 +281,19 @@ export function Component(props: Props & WithDispatcher) {
</div>
))}
</div>
<h3>
<Text id="app.settings.pages.appearance.mono_font" />
</h3>
<ComboBox value={theme.monoscapeFont} onChange={e => setTheme({ custom: { monoscapeFont: e.currentTarget.value as any } })}>
{
MONOSCAPE_FONT_KEYS
.map(key =>
<option value={key}>{ MONOSCAPE_FONTS[key as keyof typeof MONOSCAPE_FONTS].name }</option>
)
}
</ComboBox>
<h3>
<Text id="app.settings.pages.appearance.custom_css" />
</h3>
@@ -272,7 +303,7 @@ export function Component(props: Props & WithDispatcher) {
code
value={css}
onChange={ev => setCSS(ev.currentTarget.value)} />
</details>
</CollapsibleSection>
</div>
);
}

8
src/pages/settings/panes/Notifications.tsx
View File

@@ -39,6 +39,7 @@ export function Component({ options, dispatcher }: Props & WithDispatcher) {
<Checkbox
disabled={!("Notification" in window)}
checked={options?.desktopEnabled ?? false}
description={<Text id="app.settings.pages.notifications.descriptions.enable_desktop" />}
onChange={async desktopEnabled => {
if (desktopEnabled) {
let permission = await Notification.requestPermission();
@@ -57,13 +58,11 @@ export function Component({ options, dispatcher }: Props & WithDispatcher) {
}}
>
<Text id="app.settings.pages.notifications.enable_desktop" />
<p>
<Text id="app.settings.pages.notifications.descriptions.enable_desktop" />
</p>
</Checkbox>
<Checkbox
disabled={typeof pushEnabled === "undefined"}
checked={pushEnabled ?? false}
description={<Text id="app.settings.pages.notifications.descriptions.enable_push" />}
onChange={async pushEnabled => {
try {
const reg = await navigator.serviceWorker?.getRegistration();
@@ -99,9 +98,6 @@ export function Component({ options, dispatcher }: Props & WithDispatcher) {
}}
>
<Text id="app.settings.pages.notifications.enable_push" />
<p>
<Text id="app.settings.pages.notifications.descriptions.enable_push" />
</p>
</Checkbox>
<h3>
<Text id="app.settings.pages.notifications.sounds" />

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

@@ -8,16 +8,18 @@
align-items: center;
background: var(--secondary-header);
.avatar {
cursor: pointer;
transition: 0.2s ease filter;
&:hover {
filter: brightness(80%);
}
}
.username {
font-size: 24px;
}
a {
transition: 0.2s ease filter;
}
a:hover {
filter: brightness(80%);
font-weight: 600;
}
}
@@ -32,6 +34,10 @@
display: flex;
align-items: center;
flex-direction: row;
> svg {
flex-shrink: 0;
}
}
.detail {
@@ -321,30 +327,16 @@
}
}
.notifications {
label {
margin-top: 12px;
}
p {
margin-top: 0;
font-size: 0.9em;
color: var(--secondary-foreground);
}
}
.languages {
.list {
margin-bottom: 1em;
.entry {
padding: 2px 8px;
height: 50px;
border-radius: 4px;
}
.entry > span > span {
gap: 8px;
gap: 20px;
display: flex;
align-items: center;
flex-direction: row;

4
src/pages/settings/panes/Sync.tsx
View File

@@ -25,6 +25,7 @@ export function Component(props: Props & WithDispatcher) {
([ key, title ]) =>
<Checkbox
checked={(props.options?.disabled ?? []).indexOf(key) === -1}
description={<Text id={`app.settings.pages.sync.descriptions.${key}`} />}
onChange={enabled => {
props.dispatcher({
type: enabled ? 'SYNC_ENABLE_KEY' : 'SYNC_DISABLE_KEY',
@@ -33,9 +34,6 @@ export function Component(props: Props & WithDispatcher) {
}}
>
<Text id={`app.settings.pages.${title}`} />
<p>
<Text id={`app.settings.pages.sync.descriptions.${key}`} />
</p>
</Checkbox>
)
}

3
src/pages/settings/server/Members.tsx
View File

@@ -1,7 +1,6 @@
import styles from './Panes.module.scss';
import { useEffect, useState } from "preact/hooks";
import { Servers } from "revolt.js/dist/api/objects";
import UserIcon from "../../../components/common/user/UserIcon";
import { useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
interface Props {
@@ -23,7 +22,7 @@ export function Members({ server }: Props) {
return (
<div className={styles.members}>
<div className={styles.subtitle}>
X Members
{ members?.length ?? 0 } Members
</div>
{ members && members.length > 0 && users?.map(x => x &&
<div className={styles.member}>

60
src/pages/settings/server/Overview.tsx
View File

@@ -1,10 +1,13 @@
import { Text } from "preact-i18n";
import isEqual from "lodash.isequal";
import styles from './Panes.module.scss';
import Button from "../../../components/ui/Button";
import { Servers } from "revolt.js/dist/api/objects";
import InputBox from "../../../components/ui/InputBox";
import ComboBox from "../../../components/ui/ComboBox";
import { Servers, Server } from "revolt.js/dist/api/objects";
import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
import { useContext, useEffect, useState } from "preact/hooks";
import { getChannelName } from "../../../context/revoltjs/util";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { FileUploader } from "../../../context/revoltjs/FileUploads";
@@ -17,16 +20,18 @@ export function Overview({ server }: Props) {
const [name, setName] = useState(server.name);
const [description, setDescription] = useState(server.description ?? '');
const [systemMessages, setSystemMessages] = useState(server.system_messages);
useEffect(() => setName(server.name), [ server.name ]);
useEffect(() => setDescription(server.description ?? ''), [ server.description ]);
useEffect(() => setSystemMessages(server.system_messages), [ server.system_messages ]);
const [ changed, setChanged ] = useState(false);
function save() {
let changes: any = {};
let changes: Partial<Pick<Servers.Server, 'name' | 'description' | 'system_messages'>> = {};
if (name !== server.name) changes.name = name;
if (description !== server.description)
changes.description = description;
if (description !== server.description) changes.description = description;
if (!isEqual(systemMessages, server.system_messages)) changes.system_messages = systemMessages;
client.servers.edit(server._id, changes);
setChanged(false);
@@ -76,11 +81,6 @@ export function Overview({ server }: Props) {
if (!changed) setChanged(true)
}}
/>
<p>
<Button onClick={save} contrast disabled={!changed}>
<Text id="app.special.modals.actions.save" />
</Button>
</p>
<h3>
<Text id="app.main.servers.custom_banner" />
@@ -95,6 +95,48 @@ export function Overview({ server }: Props) {
previewURL={client.servers.getBannerURL(server._id, { width: 1000 }, true)}
remove={() => client.servers.edit(server._id, { remove: 'Banner' })}
/>
<h3>
<Text id="app.settings.server_pages.overview.system_messages" />
</h3>
{[
[ 'User Joined', 'user_joined' ],
[ 'User Left', 'user_left' ],
[ 'User Kicked', 'user_kicked' ],
[ 'User Banned', 'user_banned' ]
].map(([ i18n, key ]) =>
// ! FIXME: temporary code just so we can expose the options
<p style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
<span style={{ flexShrink: '0', flex: `25%` }}>{i18n}</span>
<ComboBox value={systemMessages?.[key as keyof typeof systemMessages] ?? 'disabled'}
onChange={e => {
if (!changed) setChanged(true)
const v = e.currentTarget.value;
if (v === 'disabled') {
const { [key as keyof typeof systemMessages]: _, ...other } = systemMessages;
setSystemMessages(other);
} else {
setSystemMessages({
...systemMessages,
[key]: v
});
}
}}>
<option value='disabled'><Text id="general.disabled" /></option>
{ server.channels.map(id => {
const channel = client.channels.get(id);
if (!channel) return null;
return <option value={id}>{ getChannelName(client, channel, true) }</option>;
}) }
</ComboBox>
</p>
)}
<p>
<Button onClick={save} contrast disabled={!changed}>
<Text id="app.special.modals.actions.save" />
</Button>
</p>
</div>
);
}

2
src/pages/settings/server/Roles.tsx
View File

@@ -49,7 +49,7 @@ export function Roles({ server }: Props) {
<div className={styles.list}>
<div className={styles.title}>
<h1><Text id="app.settings.server_pages.roles.title" /></h1>
<Plus size={16} onClick={() =>
<Plus size={22} onClick={() =>
openScreen({ id: 'special_input', type: 'create_role', server: server._id, callback: id => setRole(id) })} />
</div>
{ [ 'default', ...Object.keys(roles) ]