mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-22 07:00:58 -05:00
feat: change emojis page from grid to list
This commit is contained in:
parent
dfbba41be4
commit
f6be6d7cf8
4 changed files with 21 additions and 47 deletions
2
external/components
vendored
2
external/components
vendored
|
@ -1 +1 @@
|
|||
Subproject commit fd7ad8b8712d24977c1c47dc5705a32487ace0ed
|
||||
Subproject commit 557094115d17a363eb6fb8f27c6e697e049ce623
|
2
external/lang
vendored
2
external/lang
vendored
|
@ -1 +1 @@
|
|||
Subproject commit 429734c32b3584dd9c23124bd0682bba31834eb8
|
||||
Subproject commit 05e7213b2290dfced3d41d54cb85f49670404cf2
|
|
@ -19,6 +19,7 @@ export function EmojiUploader({ server }: Props) {
|
|||
<h3>
|
||||
<Text id="app.settings.server_pages.emojis.upload" />
|
||||
</h3>
|
||||
{fileId}
|
||||
<Form
|
||||
schema={{
|
||||
name: "text",
|
||||
|
|
|
@ -8,40 +8,24 @@ import { Button, Column, Row, Stacked } from "@revoltchat/ui";
|
|||
|
||||
import UserShort from "../../../components/common/user/UserShort";
|
||||
import { EmojiUploader } from "../../../components/settings/customisation/EmojiUploader";
|
||||
import { modalController } from "../../../controllers/modals/ModalController";
|
||||
|
||||
interface Props {
|
||||
server: Server;
|
||||
}
|
||||
|
||||
const List = styled.div`
|
||||
gap: 8px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
`;
|
||||
|
||||
const Emoji = styled(Column)`
|
||||
const Emoji = styled(Row)`
|
||||
padding: 8px;
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--secondary-background);
|
||||
`;
|
||||
|
||||
const Preview = styled.img`
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
object-fit: contain;
|
||||
border-radius: var(--border-radius);
|
||||
`;
|
||||
|
||||
const UserInfo = styled(Row)`
|
||||
font-size: 12px;
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Emojis = observer(({ server }: Props) => {
|
||||
const emoji = [...server.client.emojis.values()].filter(
|
||||
(x) => x.parent.type === "Server" && x.parent.id === server._id,
|
||||
|
@ -57,33 +41,22 @@ export const Emojis = observer(({ server }: Props) => {
|
|||
{" – "}
|
||||
{emoji.length}
|
||||
</h3>
|
||||
<List>
|
||||
{emoji.map((emoji) => (
|
||||
<Emoji key={emoji._id} centred>
|
||||
<Stacked>
|
||||
<Preview src={emoji.imageURL} />
|
||||
</Stacked>
|
||||
<span>{`:${emoji.name}:`}</span>
|
||||
<UserInfo centred>
|
||||
<Row centred>
|
||||
<UserShort user={emoji.creator} />
|
||||
</UserInfo>
|
||||
<Button
|
||||
palette="plain"
|
||||
onClick={() =>
|
||||
modalController.writeText(emoji._id)
|
||||
}>
|
||||
<Text id="app.context_menu.copy_id" />
|
||||
</Button>
|
||||
</Row>
|
||||
{server.havePermission("ManageCustomisation") && (
|
||||
<Button
|
||||
palette="plain"
|
||||
onClick={() => emoji.delete()}>
|
||||
<Button palette="plain" onClick={() => emoji.delete()}>
|
||||
<Text id="app.special.modals.actions.delete" />
|
||||
</Button>
|
||||
)}
|
||||
</Emoji>
|
||||
))}
|
||||
</List>
|
||||
</Column>
|
||||
);
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue