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

feat: change emojis page from grid to list

Browse source
This commit is contained in:
Paul Makles 2022-09-02 14:17:42 +01:00
parent dfbba41be4
commit f6be6d7cf8
4 changed files with 21 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
external/components vendored

@ -1 +1 @@
Subproject commit fd7ad8b8712d24977c1c47dc5705a32487ace0ed
Subproject commit 557094115d17a363eb6fb8f27c6e697e049ce623

2
external/lang vendored

@ -1 +1 @@
Subproject commit 429734c32b3584dd9c23124bd0682bba31834eb8
Subproject commit 05e7213b2290dfced3d41d54cb85f49670404cf2

1
src/components/settings/customisation/EmojiUploader.tsx
View file

@ -19,6 +19,7 @@ export function EmojiUploader({ server }: Props) {
<h3>
<Text id="app.settings.server_pages.emojis.upload" />
</h3>
{fileId}
<Form
schema={{
name: "text",

63
src/pages/settings/server/Emojis.tsx
View file

@ -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>
<UserShort user={emoji.creator} />
</UserInfo>
<Button
palette="plain"
onClick={() =>
modalController.writeText(emoji._id)
}>
<Text id="app.context_menu.copy_id" />
{emoji.map((emoji) => (
<Emoji key={emoji._id} centred>
<Stacked>
<Preview src={emoji.imageURL} />
</Stacked>
<span>{`:${emoji.name}:`}</span>
<Row centred>
<UserShort user={emoji.creator} />
</Row>
{server.havePermission("ManageCustomisation") && (
<Button palette="plain" onClick={() => emoji.delete()}>
<Text id="app.special.modals.actions.delete" />
</Button>
{server.havePermission("ManageCustomisation") && (
<Button
palette="plain"
onClick={() => emoji.delete()}>
<Text id="app.special.modals.actions.delete" />
</Button>
)}
</Emoji>
))}
</List>
)}
</Emoji>
))}
</Column>
);
});