cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-09 16:53:36 -05: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> <h3>
<Text id="app.settings.server_pages.emojis.upload" /> <Text id="app.settings.server_pages.emojis.upload" />
</h3> </h3>
{fileId}
<Form <Form
schema={{ schema={{
name: "text", 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 UserShort from "../../../components/common/user/UserShort";
import { EmojiUploader } from "../../../components/settings/customisation/EmojiUploader"; import { EmojiUploader } from "../../../components/settings/customisation/EmojiUploader";
import { modalController } from "../../../controllers/modals/ModalController";
interface Props { interface Props {
server: Server; server: Server;
} }
const List = styled.div` const Emoji = styled(Row)`
gap: 8px;
display: flex;
flex-wrap: wrap;
`;
const Emoji = styled(Column)`
padding: 8px; padding: 8px;
border-radius: var(--border-radius); border-radius: var(--border-radius);
background: var(--secondary-background); background: var(--secondary-background);
`; `;
const Preview = styled.img` const Preview = styled.img`
width: 72px; width: 32px;
height: 72px; height: 32px;
object-fit: contain; object-fit: contain;
border-radius: var(--border-radius); border-radius: var(--border-radius);
`; `;
const UserInfo = styled(Row)`
font-size: 12px;
svg {
width: 14px;
height: 14px;
}
`;
export const Emojis = observer(({ server }: Props) => { export const Emojis = observer(({ server }: Props) => {
const emoji = [...server.client.emojis.values()].filter( const emoji = [...server.client.emojis.values()].filter(
(x) => x.parent.type === "Server" && x.parent.id === server._id, (x) => x.parent.type === "Server" && x.parent.id === server._id,
@ -57,33 +41,22 @@ export const Emojis = observer(({ server }: Props) => {
{" – "} {" – "}
{emoji.length} {emoji.length}
</h3> </h3>
<List> {emoji.map((emoji) => (
{emoji.map((emoji) => ( <Emoji key={emoji._id} centred>
<Emoji key={emoji._id} centred> <Stacked>
<Stacked> <Preview src={emoji.imageURL} />
<Preview src={emoji.imageURL} /> </Stacked>
</Stacked> <span>{`:${emoji.name}:`}</span>
<span>{`:${emoji.name}:`}</span> <Row centred>
<UserInfo centred> <UserShort user={emoji.creator} />
<UserShort user={emoji.creator} /> </Row>
</UserInfo> {server.havePermission("ManageCustomisation") && (
<Button <Button palette="plain" onClick={() => emoji.delete()}>
palette="plain" <Text id="app.special.modals.actions.delete" />
onClick={() =>
modalController.writeText(emoji._id)
}>
<Text id="app.context_menu.copy_id" />
</Button> </Button>
{server.havePermission("ManageCustomisation") && ( )}
<Button </Emoji>
palette="plain" ))}
onClick={() => emoji.delete()}>
<Text id="app.special.modals.actions.delete" />
</Button>
)}
</Emoji>
))}
</List>
</Column> </Column>
); );
}); });