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

feat(dashboard): consistent loading spinners

Browse Source
This commit is contained in:
Jake/Rads 2022-06-23 22:25:49 +02:00
parent 2e69de1b1b
commit 9efa8d4289
3 changed files with 6 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,8 +29,6 @@
if (item.icon) altText = item.name ? `group ${item.name} icon (full size)` : "group icon (full size)"; if (item.icon) altText = item.name ? `group ${item.name} icon (full size)` : "group icon (full size)";
else if (item.proxy_tags) altText = item.name ? `member ${item.name} avatar (full size)` : "member avatar (full size)"; else if (item.proxy_tags) altText = item.name ? `member ${item.name} avatar (full size)` : "member avatar (full size)";
else if (item.tag) altText = item.name ? `system ${item.name} avatar (full size)` : "system avatar (full size)"; else if (item.tag) altText = item.name ? `system ${item.name} avatar (full size)` : "system avatar (full size)";
export let loading: boolean = false;
async function focus(el) { async function focus(el) {
await tick(); await tick();
@ -46,9 +44,6 @@
<span bind:this={nameElement} style="vertical-align: middle;">{@html htmlName} ({item.id})</span> <span bind:this={nameElement} style="vertical-align: middle;">{@html htmlName} ({item.id})</span>
</div> </div>
<div> <div>
{#if loading}
<div class="d-inline-block mr-5" style="vertical-align: middle;"><Spinner color="primary" /></div>
{/if}
{#if item && (item.avatar_url || item.icon)} {#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={icon_url} alt={altText} /> <img tabindex={0} on:keyup={(event) => {if (event.key === "Enter") avatarOpen = true}} on:click={toggleAvatarModal} class="rounded-circle avatar" src={icon_url} alt={altText} />
{:else} {:else}

7
dashboard/src/lib/system/Edit.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { Row, Col, Input, Button, Label, Alert } from 'sveltestrap'; import { Row, Col, Input, Button, Label, Alert, Spinner } from 'sveltestrap';
import autosize from 'svelte-autosize'; import autosize from 'svelte-autosize';
// import moment from 'moment-timezone'; // import moment from 'moment-timezone';
import { currentUser } from '../../stores'; import { currentUser } from '../../stores';
@ -11,7 +11,7 @@
export let editMode: boolean; export let editMode: boolean;
export let user: System; export let user: System;
export let loading: boolean; let loading: boolean;
let err: string[] = []; let err: string[] = [];
@ -92,4 +92,5 @@
<br> <br>
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={user.description} aria-label="system description"/> <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={user.description} aria-label="system description"/>
</div> </div>
<Button style="flex: 0" color="primary" on:click={submit} aria-label="submit edits">Submit</Button> <Button style="flex: 0" color="light" on:click={() => editMode = false} aria-label="cancel edits" >Back</Button> {#if !loading}<Button style="flex: 0" color="primary" on:click={submit} aria-label="submit edits" >Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false} aria-label="cancel edits">Back</Button>
{:else}<Button style="flex: 0" color="primary" disabled aria-label="submit edits"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled aria-label="cancel edits">Back</Button>{/if}

5
dashboard/src/lib/system/Main.svelte
View File

@ -10,14 +10,13 @@
export let user: System; export let user: System;
export let isPublic = true; export let isPublic = true;
let loading = false;
let editMode = false; let editMode = false;
</script> </script>
<Card class="mb-4"> <Card class="mb-4">
<CardHeader> <CardHeader>
<CardsHeader bind:item={user} bind:loading> <CardsHeader bind:item={user}>
<FaAddressCard slot="icon" /> <FaAddressCard slot="icon" />
</CardsHeader> </CardsHeader>
</CardHeader> </CardHeader>
@ -25,7 +24,7 @@
{#if !editMode} {#if !editMode}
<Body bind:user bind:editMode bind:isPublic/> <Body bind:user bind:editMode bind:isPublic/>
{:else} {:else}
<Edit bind:user bind:editMode bind:loading /> <Edit bind:user bind:editMode />
{/if} {/if}
</CardBody> </CardBody>
</Card> </Card>