mirror of
https://github.com/stoatchat/for-legacy-web.git
synced 2026-03-06 17:11:55 +00:00
Implement new auto-size text area.
Add bars + header + sidebar to channels.
This commit is contained in:
Paul
@@ -1,18 +1,15 @@
|
||||
// ! FIXME: also TEMP CODE
|
||||
// ! RE-WRITE WITH STYLED-COMPONENTS
|
||||
|
||||
import { Text } from "preact-i18n";
|
||||
import { takeError } from "./util";
|
||||
import classNames from "classnames";
|
||||
import { AppContext } from "./RevoltClient";
|
||||
import styles from './FileUploads.module.scss';
|
||||
import Axios, { AxiosRequestConfig } from "axios";
|
||||
import { useContext, useState } from "preact/hooks";
|
||||
import { Edit, Plus, X } from "@styled-icons/feather";
|
||||
import Preloader from "../../components/ui/Preloader";
|
||||
import { determineFileSize } from "../../lib/fileSize";
|
||||
import IconButton from '../../components/ui/IconButton';
|
||||
import { Edit, Plus, X, XCircle } from "@styled-icons/feather";
|
||||
import { useIntermediate } from "../intermediate/Intermediate";
|
||||
import { AppContext } from "./RevoltClient";
|
||||
|
||||
type Props = {
|
||||
maxFileSize: number
|
||||
@@ -20,6 +17,7 @@ type Props = {
|
||||
fileType: 'backgrounds' | 'icons' | 'avatars' | 'attachments' | 'banners'
|
||||
} & (
|
||||
{ behaviour: 'ask', onChange: (file: File) => void } |
|
||||
{ behaviour: 'multi', onChange: (files: File[]) => void } |
|
||||
{ behaviour: 'upload', onUpload: (id: string) => Promise<void> }
|
||||
) & (
|
||||
{ style: 'icon' | 'banner', defaultPreview?: string, previewURL?: string, width?: number, height?: number } |
|
||||
@@ -40,6 +38,26 @@ export async function uploadFile(autumnURL: string, tag: string, file: File, con
|
||||
return res.data.id;
|
||||
}
|
||||
|
||||
export function grabFiles(maxFileSize: number, cb: (files: File[]) => void, tooLarge: () => void, multiple?: boolean) {
|
||||
const input = document.createElement("input");
|
||||
input.type = "file";
|
||||
input.multiple = multiple ?? false;
|
||||
|
||||
input.onchange = async e => {
|
||||
const files = (e.target as any)?.files;
|
||||
if (!files) return;
|
||||
for (let file of files) {
|
||||
if (file.size > maxFileSize) {
|
||||
return tooLarge();
|
||||
}
|
||||
}
|
||||
|
||||
cb(Array.from(files));
|
||||
};
|
||||
|
||||
input.click();
|
||||
}
|
||||
|
||||
export function FileUploader(props: Props) {
|
||||
const { fileType, maxFileSize, remove } = props;
|
||||
const { openScreen } = useIntermediate();
|
||||
@@ -50,35 +68,25 @@ export function FileUploader(props: Props) {
|
||||
function onClick() {
|
||||
if (uploading) return;
|
||||
|
||||
const input = document.createElement("input");
|
||||
input.type = "file";
|
||||
|
||||
input.onchange = async e => {
|
||||
grabFiles(maxFileSize, async files => {
|
||||
setUploading(true);
|
||||
|
||||
try {
|
||||
const files = (e.target as any)?.files;
|
||||
if (files && files[0]) {
|
||||
let file = files[0];
|
||||
|
||||
if (file.size > maxFileSize) {
|
||||
return openScreen({ id: "error", error: "FileTooLarge" });
|
||||
}
|
||||
|
||||
if (props.behaviour === 'ask') {
|
||||
await props.onChange(file);
|
||||
} else {
|
||||
await props.onUpload(await uploadFile(client.configuration!.features.autumn.url, fileType, file));
|
||||
}
|
||||
if (props.behaviour === 'multi') {
|
||||
props.onChange(files);
|
||||
} else if (props.behaviour === 'ask') {
|
||||
props.onChange(files[0]);
|
||||
} else {
|
||||
await props.onUpload(await uploadFile(client.configuration!.features.autumn.url, fileType, files[0]));
|
||||
}
|
||||
} catch (err) {
|
||||
return openScreen({ id: "error", error: takeError(err) });
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
input.click();
|
||||
}, () =>
|
||||
openScreen({ id: "error", error: "FileTooLarge" }),
|
||||
props.behaviour === 'multi');
|
||||
}
|
||||
|
||||
function removeOrUpload() {
|
||||
@@ -139,7 +147,7 @@ export function FileUploader(props: Props) {
|
||||
if (attached) return remove();
|
||||
onClick();
|
||||
}}>
|
||||
{ attached ? <X size={size} /> : <Plus size={size} />}
|
||||
{ uploading ? <XCircle size={size} /> : attached ? <X size={size} /> : <Plus size={size} />}
|
||||
</IconButton>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { decodeTime } from "ulid";
|
||||
import { AppContext } from "./RevoltClient";
|
||||
import { useTranslation } from "../../lib/i18n";
|
||||
import { Users } from "revolt.js/dist/api/objects";
|
||||
import { useContext, useEffect } from "preact/hooks";
|
||||
import { IntlContext, translate } from "preact-i18n";
|
||||
import { connectState } from "../../redux/connector";
|
||||
import { playSound } from "../../assets/sounds/Audio";
|
||||
import { Message, SYSTEM_USER_ID, User } from "revolt.js";
|
||||
@@ -25,7 +25,7 @@ async function createNotification(title: string, options: globalThis.Notificatio
|
||||
}
|
||||
|
||||
function Notifier(props: Props) {
|
||||
const { intl } = useContext(IntlContext) as any;
|
||||
const translate = useTranslation();
|
||||
const showNotification = props.options?.desktopEnabled ?? false;
|
||||
// const playIncoming = props.options?.soundEnabled ?? true;
|
||||
// const playOutgoing = props.options?.outgoingSoundEnabled ?? true;
|
||||
@@ -88,45 +88,37 @@ function Notifier(props: Props) {
|
||||
} else {
|
||||
let users = client.users;
|
||||
switch (msg.content.type) {
|
||||
// ! FIXME: update to support new replacements
|
||||
case "user_added":
|
||||
body = `${users.get(msg.content.id)?.username} ${translate(
|
||||
"app.main.channel.system.user_joined",
|
||||
"",
|
||||
intl.dictionary
|
||||
)} (${translate(
|
||||
"app.main.channel.system.added_by",
|
||||
"",
|
||||
intl.dictionary
|
||||
)} ${users.get(msg.content.by)?.username})`;
|
||||
icon = client.users.getAvatarURL(msg.content.id, { max_side: 256 });
|
||||
break;
|
||||
case "user_remove":
|
||||
body = `${users.get(msg.content.id)?.username} ${translate(
|
||||
"app.main.channel.system.user_left",
|
||||
"",
|
||||
intl.dictionary
|
||||
)} (${translate(
|
||||
"app.main.channel.system.added_by",
|
||||
"",
|
||||
intl.dictionary
|
||||
)} ${users.get(msg.content.by)?.username})`;
|
||||
body = translate(
|
||||
`app.main.channel.system.${msg.content.type === 'user_added' ? 'added_by' : 'removed_by'}`,
|
||||
{ user: users.get(msg.content.id)?.username, other_user: users.get(msg.content.by)?.username }
|
||||
);
|
||||
icon = client.users.getAvatarURL(msg.content.id, { max_side: 256 });
|
||||
break;
|
||||
case "user_joined":
|
||||
case "user_left":
|
||||
body = `${users.get(msg.content.id)?.username} ${translate(
|
||||
"app.main.channel.system.user_left",
|
||||
"",
|
||||
intl.dictionary
|
||||
)}`;
|
||||
case "user_kicked":
|
||||
case "user_banned":
|
||||
body = translate(
|
||||
`app.main.channel.system.${msg.content.type}`,
|
||||
{ user: users.get(msg.content.id)?.username }
|
||||
);
|
||||
icon = client.users.getAvatarURL(msg.content.id, { max_side: 256 });
|
||||
break;
|
||||
case "channel_renamed":
|
||||
body = `${users.get(msg.content.by)?.username} ${translate(
|
||||
"app.main.channel.system.channel_renamed",
|
||||
"",
|
||||
intl.dictionary
|
||||
)} ${msg.content.name}`;
|
||||
body = translate(
|
||||
`app.main.channel.system.channel_renamed`,
|
||||
{ user: users.get(msg.content.by)?.username, name: msg.content.name }
|
||||
);
|
||||
icon = client.users.getAvatarURL(msg.content.by, { max_side: 256 });
|
||||
break;
|
||||
case "channel_description_changed":
|
||||
case "channel_icon_changed":
|
||||
body = translate(
|
||||
`app.main.channel.system.${msg.content.type}`,
|
||||
{ user: users.get(msg.content.by)?.username }
|
||||
);
|
||||
icon = client.users.getAvatarURL(msg.content.by, { max_side: 256 });
|
||||
break;
|
||||
}
|
||||
@@ -173,20 +165,10 @@ function Notifier(props: Props) {
|
||||
let event;
|
||||
switch (user.relationship) {
|
||||
case Users.Relationship.Incoming:
|
||||
event = translate(
|
||||
"notifications.sent_request",
|
||||
"",
|
||||
intl.dictionary,
|
||||
{ person: user.username }
|
||||
);
|
||||
event = translate("notifications.sent_request", { person: user.username });
|
||||
break;
|
||||
case Users.Relationship.Friend:
|
||||
event = translate(
|
||||
"notifications.now_friends",
|
||||
"",
|
||||
intl.dictionary,
|
||||
{ person: user.username }
|
||||
);
|
||||
event = translate("notifications.now_friends", { person: user.username });
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
|
||||
Reference in New Issue
Block a user