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

feat: move loading spinner from top of card to submit button

Browse Source
This commit is contained in:
Spectralitree 2021-12-30 10:22:08 +01:00
parent 6deb792afa
commit 85a758ee15
8 changed files with 23 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/lib/group/Body.svelte
View File

@ -13,8 +13,6 @@
let editMode: boolean = false; let editMode: boolean = false;
let memberMode: boolean = false; let memberMode: boolean = false;
export let isPublic: boolean; export let isPublic: boolean;
export let loading: boolean = false;
let privacyLoading = false;
export let members: Member[]; export let members: Member[];
let htmlDescription: string; let htmlDescription: string;
@ -88,10 +86,10 @@
<b>Privacy:</b> <Button size="sm" color="secondary" on:click={togglePrivacyModal}>Edit</Button> <b>Privacy:</b> <Button size="sm" color="secondary" on:click={togglePrivacyModal}>Edit</Button>
<Modal size="lg" isOpen={privacyOpen} toggle={togglePrivacyModal}> <Modal size="lg" isOpen={privacyOpen} toggle={togglePrivacyModal}>
<ModalHeader toggle={togglePrivacyModal}> <ModalHeader toggle={togglePrivacyModal}>
{#if privacyLoading}<div style="float: left; width: 3rem;"><Spinner color="primary" /></div>{/if} Edit privacy Edit privacy
</ModalHeader> </ModalHeader>
<ModalBody> <ModalBody>
<Privacy on:update bind:group bind:privacyOpen={privacyOpen} bind:loading={privacyLoading} /> <Privacy on:update bind:group bind:privacyOpen={privacyOpen}/>
</ModalBody> </ModalBody>
</Modal> </Modal>
</Col> </Col>
@ -108,8 +106,8 @@
<Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button> <Button style="flex: 0" color="secondary" on:click={() => memberMode = true}>Members</Button> <Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button> <Button style="flex: 0" color="secondary" on:click={() => memberMode = true}>Members</Button>
{/if} {/if}
{:else if editMode} {:else if editMode}
<Edit on:update bind:loading bind:group bind:editMode /> <Edit on:update bind:group bind:editMode />
{:else if memberMode} {:else if memberMode}
<MemberEdit on:update bind:loading bind:group bind:memberMode bind:members /> <MemberEdit on:update bind:group bind:memberMode bind:members />
{/if} {/if}
</CardBody> </CardBody>

7
src/lib/group/Edit.svelte
View File

@ -1,11 +1,11 @@
<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 { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import Group from '../../api/group'; import Group from '../../api/group';
import PKAPI from '../../api'; import PKAPI from '../../api';
import autosize from 'svelte-autosize'; import autosize from 'svelte-autosize';
export let loading: boolean = false; let loading: boolean = false;
export let group: Group; export let group: Group;
export let editMode: boolean; export let editMode: boolean;
@ -81,4 +81,5 @@
<b>Description:</b><br /> <b>Description:</b><br />
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={group.description}/> <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={group.description}/>
</div> </div>
<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false}>Back</Button> {#if !loading}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false}>Back</Button>
{:else}<Button style="flex: 0" color="primary" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button>{/if}

11
src/lib/group/List.svelte
View File

@ -161,9 +161,6 @@
'member-list': memberListRenderer 'member-list': memberListRenderer
}); });
let itemLoading: boolean[] = [];
$: itemLoading.length = slicedList.length;
function updateList(event: any) { function updateList(event: any) {
list = list.map(group => group.id !== event.detail.id ? group : event.detail) list = list.map(group => group.id !== event.detail.id ? group : event.detail)
} }
@ -274,17 +271,17 @@
{#each slicedList as group, index (group.id)} {#each slicedList as group, index (group.id)}
{#if (!isPublic && group.privacy.visibility === "public") || isPublic} {#if (!isPublic && group.privacy.visibility === "public") || isPublic}
<AccordionItem> <AccordionItem>
<CardsHeader bind:item={group} loading={itemLoading[index]} slot="header"> <CardsHeader bind:item={group} slot="header">
<FaUsers slot="icon" /> <FaUsers slot="icon" />
</CardsHeader> </CardsHeader>
<Body on:update={updateList} bind:members bind:group bind:isPublic={isPublic} bind:loading={itemLoading[index]}/> <Body on:update={updateList} bind:members bind:group bind:isPublic={isPublic}/>
</AccordionItem> </AccordionItem>
{:else} {:else}
<AccordionItem> <AccordionItem>
<CardsHeader bind:item={group} loading={itemLoading[index]} slot="header"> <CardsHeader bind:item={group} slot="header">
<FaLock slot="icon" /> <FaLock slot="icon" />
</CardsHeader> </CardsHeader>
<Body on:update={updateList} bind:members bind:group bind:isPublic={isPublic} bind:loading={itemLoading[index]}/> <Body on:update={updateList} bind:members bind:group bind:isPublic={isPublic}/>
</AccordionItem> </AccordionItem>
{/if} {/if}
{/each} {/each}

2
src/lib/group/MemberEdit.svelte
View File

@ -11,7 +11,7 @@
import FaUserMinus from 'svelte-icons/fa/FaUserMinus.svelte' import FaUserMinus from 'svelte-icons/fa/FaUserMinus.svelte'
import Svelecte, { addFormatter } from 'svelecte'; import Svelecte, { addFormatter } from 'svelecte';
export let loading: boolean; let loading: boolean = false;
export let group: Group; export let group: Group;
export let memberMode: boolean = true; export let memberMode: boolean = true;
export let members: Member[]; export let members: Member[];

6
src/lib/group/Privacy.svelte
View File

@ -9,7 +9,7 @@
const togglePrivacyModal = () => (privacyOpen = !privacyOpen); const togglePrivacyModal = () => (privacyOpen = !privacyOpen);
let err: string; let err: string;
export let loading = false; let loading = false;
let allPrivacy: string; let allPrivacy: string;
@ -93,4 +93,6 @@
</Input> </Input>
</Col> </Col>
</Row> </Row>
<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={togglePrivacyModal}>Back</Button> {#if !loading}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={togglePrivacyModal}>Back</Button>
{:else}<Button style="flex: 0" color="primary" disabled><Spinner size="sm"/>></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button>
{/if}

6
src/lib/member/Body.svelte
View File

@ -10,12 +10,10 @@
export let groups: Group[] = []; export let groups: Group[] = [];
export let member: Member; export let member: Member;
export let loading: boolean;
export let isPublic: boolean = false; export let isPublic: boolean = false;
let editMode: boolean = false; let editMode: boolean = false;
let groupMode: boolean = false; let groupMode: boolean = false;
let privacyLoading = false;
let htmlDescription: string; let htmlDescription: string;
$: if (member.description) { $: if (member.description) {
@ -105,7 +103,7 @@
<b>Privacy:</b> <Button size="sm" color="secondary" on:click={togglePrivacyModal}>Edit</Button> <b>Privacy:</b> <Button size="sm" color="secondary" on:click={togglePrivacyModal}>Edit</Button>
<Modal size="lg" isOpen={privacyOpen} toggle={togglePrivacyModal}> <Modal size="lg" isOpen={privacyOpen} toggle={togglePrivacyModal}>
<ModalHeader toggle={togglePrivacyModal}> <ModalHeader toggle={togglePrivacyModal}>
{#if privacyLoading}<div style="float: left; width: 3rem;"><Spinner color="primary" /></div>{/if} Edit privacy Edit privacy
</ModalHeader> </ModalHeader>
<ModalBody> <ModalBody>
whoops! this is yet to be added. whoops! this is yet to be added.
@ -127,6 +125,6 @@
{:else if editMode} {:else if editMode}
editing tba o_o editing tba o_o
{:else if groupMode} {:else if groupMode}
<GroupEdit bind:loading bind:member bind:groups bind:groupMode /> <GroupEdit on:update bind:member bind:groups bind:groupMode />
{/if} {/if}
</CardBody> </CardBody>

2
src/lib/member/GroupEdit.svelte
View File

@ -15,7 +15,7 @@
export let member: Member; export let member: Member;
export let groups: Group[] = []; export let groups: Group[] = [];
export let loading: boolean = false; let loading: boolean = false;
export let groupMode: boolean = true; export let groupMode: boolean = true;
let groupsWithMember: Group[]; let groupsWithMember: Group[];

8
src/lib/member/List.svelte
View File

@ -14,7 +14,6 @@
import Body from './Body.svelte'; import Body from './Body.svelte';
export let isPublic: boolean; export let isPublic: boolean;
let itemLoading: boolean[] = [];
export let list: Member[] = []; export let list: Member[] = [];
export let groups: Group[] = []; export let groups: Group[] = [];
@ -275,17 +274,16 @@
{#each slicedList as member, index (member.id)} {#each slicedList as member, index (member.id)}
{#if (!isPublic && member.privacy.visibility === "public") || isPublic} {#if (!isPublic && member.privacy.visibility === "public") || isPublic}
<AccordionItem> <AccordionItem>
<CardsHeader bind:item={member} loading={itemLoading[index]} slot="header">
<FaUserCircle slot="icon" /> <FaUserCircle slot="icon" />
</CardsHeader> </CardsHeader>
<Body on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member loading={itemLoading[index]} /> <Body on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member />
</AccordionItem> </AccordionItem>
{:else} {:else}
<AccordionItem> <AccordionItem>
<CardsHeader bind:item={member} loading={itemLoading[index]} slot="header"> <CardsHeader bind:item={member} slot="header">
<FaLock slot="icon" /> <FaLock slot="icon" />
</CardsHeader> </CardsHeader>
<Body on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member loading={itemLoading[index]} /> <Body on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member />
</AccordionItem> </AccordionItem>
{/if} {/if}
{/each} {/each}