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
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 memberMode: boolean = false;
export let isPublic: boolean;
export let loading: boolean = false;
let privacyLoading = false;
export let members: Member[];
let htmlDescription: string;
@@ -88,10 +86,10 @@
<b>Privacy:</b> <Button size="sm" color="secondary" on:click={togglePrivacyModal}>Edit</Button>
<Modal size="lg" isOpen={privacyOpen} toggle={togglePrivacyModal}>
<ModalHeader toggle={togglePrivacyModal}>
{#if privacyLoading}<div style="float: left; width: 3rem;"><Spinner color="primary" /></div>{/if} Edit privacy
Edit privacy
</ModalHeader>
<ModalBody>
<Privacy on:update bind:group bind:privacyOpen={privacyOpen} bind:loading={privacyLoading} />
<Privacy on:update bind:group bind:privacyOpen={privacyOpen}/>
</ModalBody>
</Modal>
</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>
{/if}
{:else if editMode}
<Edit on:update bind:loading bind:group bind:editMode />
<Edit on:update bind:group bind:editMode />
{:else if memberMode}
<MemberEdit on:update bind:loading bind:group bind:memberMode bind:members />
<MemberEdit on:update bind:group bind:memberMode bind:members />
{/if}
</CardBody>

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

@@ -1,11 +1,11 @@
<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 Group from '../../api/group';
import PKAPI from '../../api';
import autosize from 'svelte-autosize';
export let loading: boolean = false;
let loading: boolean = false;
export let group: Group;
export let editMode: boolean;
@@ -81,4 +81,5 @@
<b>Description:</b><br />
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={group.description}/>
</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
});
let itemLoading: boolean[] = [];
$: itemLoading.length = slicedList.length;
function updateList(event: any) {
list = list.map(group => group.id !== event.detail.id ? group : event.detail)
}
@@ -274,17 +271,17 @@
{#each slicedList as group, index (group.id)}
{#if (!isPublic && group.privacy.visibility === "public") || isPublic}
<AccordionItem>
<CardsHeader bind:item={group} loading={itemLoading[index]} slot="header">
<CardsHeader bind:item={group} slot="header">
<FaUsers slot="icon" />
</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>
{:else}
<AccordionItem>
<CardsHeader bind:item={group} loading={itemLoading[index]} slot="header">
<CardsHeader bind:item={group} slot="header">
<FaLock slot="icon" />
</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>
{/if}
{/each}

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

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

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

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

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

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

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

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