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

feat(dashboard): autofocus on expanded avatar image

Browse Source
This commit is contained in:
Draconizations 2022-05-30 10:02:12 +02:00
parent 8113c83828
commit 5d8f42b537
1 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
dashboard/src/lib/CardsHeader.svelte
View File

@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { tick } from 'svelte';
import { Modal, CardHeader, CardTitle, Image, Spinner } from 'sveltestrap'; import { Modal, CardHeader, CardTitle, Image, Spinner } from 'sveltestrap';
import default_avatar from '../assets/default_avatar.png'; import default_avatar from '../assets/default_avatar.png';
import { toHTML } from 'discord-markdown'; import { toHTML } from 'discord-markdown';
@ -29,6 +30,11 @@
else if (item.tag) altText = "system avatar"; else if (item.tag) altText = "system avatar";
export let loading: boolean = false; export let loading: boolean = false;
async function focus(el) {
await tick();
el.focus();
}
</script> </script>
<CardTitle style="margin-top: 0px; margin-bottom: 0px; outline: none; align-items: center;" class="d-flex justify-content-between align-middle w-100"> <CardTitle style="margin-top: 0px; margin-bottom: 0px; outline: none; align-items: center;" class="d-flex justify-content-between align-middle w-100">
@ -50,7 +56,7 @@
</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={icon_url} thumbnail alt={altText}/> <img class="d-block m-auto img-thumbnail" src={icon_url} alt={altText} tabindex={0} use:focus/>
</div> </div>
</Modal> </Modal>
</CardTitle> </CardTitle>