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
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)";
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)";
export let loading: boolean = false;
async function focus(el) {
await tick();
@@ -46,9 +44,6 @@
<span bind:this={nameElement} style="vertical-align: middle;">{@html htmlName} ({item.id})</span>
</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)}
<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}

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

@@ -1,5 +1,5 @@
<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 moment from 'moment-timezone';
import { currentUser } from '../../stores';
@@ -11,7 +11,7 @@
export let editMode: boolean;
export let user: System;
export let loading: boolean;
let loading: boolean;
let err: string[] = [];
@@ -92,4 +92,5 @@
<br>
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={user.description} aria-label="system description"/>
</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 isPublic = true;
let loading = false;
let editMode = false;
</script>
<Card class="mb-4">
<CardHeader>
<CardsHeader bind:item={user} bind:loading>
<CardsHeader bind:item={user}>
<FaAddressCard slot="icon" />
</CardsHeader>
</CardHeader>
@@ -25,7 +24,7 @@
{#if !editMode}
<Body bind:user bind:editMode bind:isPublic/>
{:else}
<Edit bind:user bind:editMode bind:loading />
<Edit bind:user bind:editMode />
{/if}
</CardBody>
</Card>