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 { 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,28 +27,19 @@ 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
|
|
||||||
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>
|
|
||||||
<Overline type="subtle">Avatar</Overline>
|
<Overline type="subtle">Avatar</Overline>
|
||||||
<FileUploader
|
<FileUploader
|
||||||
width={80}
|
width={80}
|
||||||
|
@ -70,6 +61,32 @@ export const ServerIdentityModal = observer(({ server, onClose }: Props) => {
|
||||||
true,
|
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>
|
</Modal>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue