cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-21 22:50:59 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #179 from Snazzah/server-identity-revamp

Browse source
This commit is contained in:
Paul Makles 2021-09-09 21:03:43 +01:00 committed by GitHub
commit da7a27f325
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 85 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/context/intermediate/popovers/ServerIdentityModal.module.scss Normal file
View file

@ -0,0 +1,17 @@
.identityMain {
display: flex;
flex-direction: row;
gap: 10px;
> div {
display: flex;
flex-direction: column;
gap: 10px;
}
.buttons {
display: flex;
flex-direction: row;
gap: 10px;
}
}

109
src/context/intermediate/popovers/ServerIdentityModal.tsx
View file

@ -1,13 +1,14 @@
import { observer } from "mobx-react-lite";
import { Server } from "revolt.js/dist/maps/Servers";
import styles from "./ServerIdentityModal.module.scss";
import { Text } from "preact-i18n";
import { useEffect, useState } from "preact/hooks";
import Button from "../../../components/ui/Button";
import InputBox from "../../../components/ui/InputBox";
import Modal from "../../../components/ui/Modal";
import Overline from "../../../components/ui/Overline";
import Tip from "../../../components/ui/Tip";
import { FileUploader } from "../../revoltjs/FileUploads";
import { useClient } from "../../revoltjs/RevoltClient";
@ -27,49 +28,75 @@ export const ServerIdentityModal = observer(({ server, onClose }: Props) => {
if (!member) return null;
const [nickname, setNickname] = useState("");
useEffect(() => setNickname(member.nickname ?? ""), [member.nickname]);
const [currentNickname, setCurrentNickname] = useState("");
useEffect(() => {
setNickname(member.nickname ?? "");
setCurrentNickname(member.nickname ?? "");
}, [member.nickname]);
return (
<Modal visible={true} onClose={onClose}>
<Tip warning hideSeparator>
This section is under construction.
</Tip>
<Overline type="subtle">Nickname</Overline>
<p>
<InputBox
value={nickname}
onChange={(e) => setNickname(e.currentTarget.value)}
<Modal
visible={true}
title={
<Text
id={"app.special.popovers.server_identity.title"}
fields={{ server: server.name }}
/>
</p>
<p>
<Button onClick={() => member.edit({ nickname })}>Save</Button>
</p>
<p>
<Button onClick={() => member.edit({ remove: "Nickname" })}>
Remove
</Button>
</p>
<Overline type="subtle">Avatar</Overline>
<FileUploader
width={80}
height={80}
style="icon"
fileType="avatars"
behaviour="upload"
maxFileSize={4_000_000}
onUpload={(avatar) => member.edit({ avatar })}
remove={() => member.edit({ remove: "Avatar" })}
defaultPreview={client.generateFileURL(
member.avatar ?? undefined,
{ max_side: 256 },
true,
)}
previewURL={client.generateFileURL(
member.avatar ?? undefined,
{ max_side: 256 },
true,
)}
/>
}
onClose={onClose}>
<div className={styles.identityMain}>
<div>
<Overline type="subtle">
<Text id="app.special.popovers.server_identity.avatar" />
</Overline>
<FileUploader
width={80}
height={80}
style="icon"
fileType="avatars"
behaviour="upload"
maxFileSize={4_000_000}
onUpload={(avatar) => member.edit({ avatar })}
remove={() => member.edit({ remove: "Avatar" })}
defaultPreview={client.generateFileURL(
member.avatar ?? undefined,
{ max_side: 256 },
true,
)}
previewURL={client.generateFileURL(
member.avatar ?? undefined,
{ max_side: 256 },
true,
)}
/>
</div>
<div>
<Overline type="subtle">
<Text id="app.special.popovers.server_identity.nickname" />
</Overline>
<InputBox
value={nickname}
placeholder={client.user!.username}
onChange={(e) => setNickname(e.currentTarget.value)}
/>
<div className={styles.buttons}>
<Button
disabled={nickname === currentNickname}
onClick={() => member.edit({ nickname })}>
<Text id="app.special.modals.actions.save" />
</Button>
{currentNickname !== "" && (
<Button
plain
onClick={() =>
member.edit({ remove: "Nickname" })
}>
<Text id="app.special.modals.actions.remove" />
</Button>
)}
</div>
</div>
</div>
</Modal>
);
});