From 7d8bb1023ed1b57885672f2a94ae2157f8e3823c Mon Sep 17 00:00:00 2001 From: Sam <sam@sam.wf> Date: Sun, 19 Mar 2023 01:37:59 +0100 Subject: [PATCH] feat: add button to remove existing user/member avatar --- frontend/src/routes/edit/EditableField.svelte | 1 - .../src/routes/edit/member/[id]/+page.svelte | 5 +++- frontend/src/routes/edit/profile/+page.svelte | 29 ++++++++++--------- 3 files changed, 20 insertions(+), 15 deletions(-) diff --git a/frontend/src/routes/edit/EditableField.svelte b/frontend/src/routes/edit/EditableField.svelte index 72b1ad0..683b9f7 100644 --- a/frontend/src/routes/edit/EditableField.svelte +++ b/frontend/src/routes/edit/EditableField.svelte @@ -47,7 +47,6 @@ tooltip="Move field right" click={() => moveField(false)} /> - <!-- <InputGroupText>Name</InputGroupText> --> <Input bind:value={field.name} /> <Button color="danger" on:click={() => deleteField()}>Delete field</Button> </InputGroup> diff --git a/frontend/src/routes/edit/member/[id]/+page.svelte b/frontend/src/routes/edit/member/[id]/+page.svelte index 2cdf312..ce6c7e8 100644 --- a/frontend/src/routes/edit/member/[id]/+page.svelte +++ b/frontend/src/routes/edit/member/[id]/+page.svelte @@ -317,7 +317,9 @@ <h4>Avatar</h4> <div class="row"> <div class="col-md text-center"> - {#if avatar} + {#if avatar === ""} + <FallbackImage alt="Current avatar" urls={[]} width={200} /> + {:else if avatar} <img width={200} src={avatar} alt="New avatar" class="rounded-circle img-fluid" /> {:else} <FallbackImage alt="Current avatar" urls={memberAvatars(data.member)} width={200} /> @@ -335,6 +337,7 @@ <Icon name="info-circle-fill" /> Only PNG, JPEG, GIF, and WebP can be used as avatars. Avatars cannot be larger than 1 MB, and animated avatars will be made static. </p> + <a href="" on:click={() => (avatar = "")}>Remove avatar</a> </div> </div> </div> diff --git a/frontend/src/routes/edit/profile/+page.svelte b/frontend/src/routes/edit/profile/+page.svelte index eae1a32..ebe1ac8 100644 --- a/frontend/src/routes/edit/profile/+page.svelte +++ b/frontend/src/routes/edit/profile/+page.svelte @@ -12,15 +12,7 @@ } from "$lib/api/entities"; import FallbackImage from "$lib/components/FallbackImage.svelte"; import { userStore } from "$lib/store"; - import { - Alert, - Button, - ButtonDropdown, - DropdownToggle, - FormGroup, - Icon, - Input, - } from "sveltestrap"; + import { Alert, Button, ButtonGroup, FormGroup, Icon, Input } from "sveltestrap"; import { encode } from "base64-arraybuffer"; import { apiFetchClient } from "$lib/api/fetch"; import IconButton from "$lib/components/IconButton.svelte"; @@ -248,9 +240,15 @@ <h1> Edit profile - {#if modified} - <Button color="success" on:click={() => updateUser()}>Save changes</Button> - {/if} + <ButtonGroup> + <Button color="secondary" href="/@{$userStore?.name}"> + <Icon name="chevron-left" /> + Back to your profile + </Button> + {#if modified} + <Button color="success" on:click={() => updateUser()}>Save changes</Button> + {/if} + </ButtonGroup> </h1> {#if error} @@ -266,7 +264,9 @@ <h4>Avatar</h4> <div class="row"> <div class="col-md text-center"> - {#if avatar} + {#if avatar === ""} + <FallbackImage alt="Current avatar" urls={[]} width={200} /> + {:else if avatar} <img width={200} src={avatar} alt="New avatar" class="rounded-circle img-fluid" /> {:else} <FallbackImage alt="Current avatar" urls={userAvatars($userStore)} width={200} /> @@ -284,6 +284,9 @@ <Icon name="info-circle-fill" /> Only PNG, JPEG, GIF, and WebP images can be used as avatars. Avatars cannot be larger than 1 MB, and animated avatars will be made static. </p> + <p> + <a href="" on:click={() => (avatar = "")}>Remove avatar</a> + </p> </div> </div> </div>