liz/PluralKit
liz/PluralKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(dashboard): add proxy avatar viewing and editing

Browse Source
This commit is contained in:
Jake Fulmine 2023-05-15 15:26:57 +02:00
parent 66544b9d40
commit 666535fc58
3 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
dashboard/src/api/types.ts
View File

@ -57,6 +57,7 @@ export interface Member {
birthday?: string; birthday?: string;
pronouns?: string; pronouns?: string;
avatar_url?: string; avatar_url?: string;
webhook_avatar_url?: string;
banner?: string; banner?: string;
description?: string; description?: string;
created?: string; created?: string;

13
dashboard/src/components/member/Body.svelte
View File

@ -48,6 +48,9 @@
let bannerOpen = false; let bannerOpen = false;
const toggleBannerModal = () => (bannerOpen = !bannerOpen); const toggleBannerModal = () => (bannerOpen = !bannerOpen);
let proxyAvatarOpen = false;
const toggleProxyAvatarModal = () => (proxyAvatarOpen = !proxyAvatarOpen);
let privacyOpen = false; let privacyOpen = false;
const togglePrivacyModal = () => (privacyOpen = !privacyOpen); const togglePrivacyModal = () => (privacyOpen = !privacyOpen);
@ -131,6 +134,16 @@
<b>Color:</b> {member.color} <b>Color:</b> {member.color}
</Col> </Col>
{/if} {/if}
{#if member.webhook_avatar_url}
<Col xs={12} lg={4} class="mb-2">
<b>Proxy Avatar:</b> <Button size="sm" color="secondary" on:click={toggleProxyAvatarModal} aria-label="view member proxy avatar">View</Button>
<Modal isOpen={proxyAvatarOpen} toggle={toggleProxyAvatarModal}>
<div slot="external" on:click={toggleProxyAvatarModal} style="height: 100%; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; display: flex;">
<img class="img-thumbnail d-block m-auto" src={member.webhook_avatar_url} tabindex={0} alt={`Member ${member.name} proxy avatar (full size)`} use:focus/>
</div>
</Modal>
</Col>
{/if}
{#if member.banner} {#if member.banner}
<Col xs={12} lg={4} class="mb-2"> <Col xs={12} lg={4} class="mb-2">
<b>Banner:</b> <Button size="sm" color="secondary" on:click={toggleBannerModal} aria-label="view member banner">View</Button> <b>Banner:</b> <Button size="sm" color="secondary" on:click={toggleBannerModal} aria-label="view member banner">View</Button>

4
dashboard/src/components/member/Edit.svelte
View File

@ -153,6 +153,10 @@
<Label>Avatar url:</Label> <Label>Avatar url:</Label>
<Input bind:value={input.avatar_url} maxlength={256} type="url" placeholder={member.avatar_url} aria-label="member avatar url"/> <Input bind:value={input.avatar_url} maxlength={256} type="url" placeholder={member.avatar_url} aria-label="member avatar url"/>
</Col> </Col>
<Col xs={12} lg={4} class="mb-2">
<Label>Proxy avatar url:</Label>
<Input bind:value={input.webhook_avatar_url} maxlength={256} type="url" placeholder={member.webhook_avatar_url} aria-label="member proxy avatar url"/>
</Col>
<Col xs={12} lg={4} class="mb-2"> <Col xs={12} lg={4} class="mb-2">
<Label>Banner url:</Label> <Label>Banner url:</Label>
<Input bind:value={input.banner} maxlength={256} type="url" placeholder={member.banner} aria-label="member banner url"/> <Input bind:value={input.banner} maxlength={256} type="url" placeholder={member.banner} aria-label="member banner url"/>