mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-10 01:03:36 -05:00
Revamp Server Identity Popover
This commit is contained in:
parent
240a60919a
commit
11f8d081ba
2 changed files with 76 additions and 42 deletions
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -1,13 +1,13 @@
|
|||
import { observer } from "mobx-react-lite";
|
||||
import { Server } from "revolt.js/dist/maps/Servers";
|
||||
|
||||
import styles from "./ServerIdentityModal.module.scss";
|
||||
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,28 +27,19 @@ 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)}
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<Button onClick={() => member.edit({ nickname })}>Save</Button>
|
||||
</p>
|
||||
<p>
|
||||
<Button onClick={() => member.edit({ remove: "Nickname" })}>
|
||||
Remove
|
||||
</Button>
|
||||
</p>
|
||||
<Modal
|
||||
visible={true}
|
||||
title={`Change Identity on ${server.name}`}
|
||||
onClose={onClose}>
|
||||
<div className={styles.identityMain}>
|
||||
<div>
|
||||
<Overline type="subtle">Avatar</Overline>
|
||||
<FileUploader
|
||||
width={80}
|
||||
|
@ -70,6 +61,32 @@ export const ServerIdentityModal = observer(({ server, onClose }: Props) => {
|
|||
true,
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Overline type="subtle">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 })}>
|
||||
Save
|
||||
</Button>
|
||||
{currentNickname !== "" && (
|
||||
<Button
|
||||
plain
|
||||
onClick={() =>
|
||||
member.edit({ remove: "Nickname" })
|
||||
}>
|
||||
Remove
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue