cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-09-20 01:57:12 -04:00
Code Issues Projects Releases Packages Wiki Activity

Revamp Server Identity Popover

Browse source
This commit is contained in:
Snazzah 2021-09-03 17:32:50 +00:00 committed by GitHub
parent 240a60919a
commit 11f8d081ba
2 changed files with 76 additions and 42 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;
}
}

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

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