fix: fix group icons in list

This commit is contained in:
Spectralitree 2021-12-18 20:09:23 +01:00
parent 05b590e7b9
commit daed5e744b

View File

@ -5,6 +5,8 @@
export let item: any; export let item: any;
let icon_url = item.avatar_url ? item.avatar_url : item.icon ? item.icon : default_avatar;
let avatarOpen = false; let avatarOpen = false;
const toggleAvatarModal = () => (avatarOpen = !avatarOpen); const toggleAvatarModal = () => (avatarOpen = !avatarOpen);
@ -22,15 +24,15 @@
{#if loading} {#if loading}
<div class="d-inline-block mr-5" style="vertical-align: middle;"><Spinner color="primary" /></div> <div class="d-inline-block mr-5" style="vertical-align: middle;"><Spinner color="primary" /></div>
{/if} {/if}
{#if item && item.avatar_url} {#if item && (item.avatar_url || item.icon)}
<img tabindex={0} on:keyup={(event) => {if (event.key === "Enter") avatarOpen = true}} on:click={toggleAvatarModal} class="rounded-circle avatar" src={item.avatar_url} alt="Icon" /> <img tabindex={0} on:keyup={(event) => {if (event.key === "Enter") avatarOpen = true}} on:click={toggleAvatarModal} class="rounded-circle avatar" src={icon_url} alt="Icon" />
{:else} {:else}
<img class="rounded-circle avatar" src={default_avatar} alt="your system avatar (default)" /> <img class="rounded-circle avatar" src={default_avatar} alt="your system avatar (default)" />
{/if} {/if}
</div> </div>
<Modal isOpen={avatarOpen} toggle={toggleAvatarModal}> <Modal isOpen={avatarOpen} toggle={toggleAvatarModal}>
<div slot="external" on:click={toggleAvatarModal} style="height: 100%; max-width: 640px; width: 100%; margin-left: auto; margin-right: auto; display: flex;"> <div slot="external" on:click={toggleAvatarModal} style="height: 100%; max-width: 640px; width: 100%; margin-left: auto; margin-right: auto; display: flex;">
<Image style="display: block; margin: auto;" src={item.avatar_url} thumbnail alt="Your system avatar" /> <Image style="display: block; margin: auto;" src={icon_url} thumbnail alt="Your system avatar" />
</div> </div>
</Modal> </Modal>
</CardTitle> </CardTitle>