diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/AppHeader.svelte | 15 | ||||
| -rw-r--r-- | src/lib/store.js | 4 | ||||
| -rw-r--r-- | src/routes/[username]/settings/+page.svelte | 14 | ||||
| -rw-r--r-- | src/routes/[username]/settings/_account.svelte | 48 |
4 files changed, 46 insertions, 35 deletions
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte index 8b10f19e..d6ef6158 100644 --- a/src/components/AppHeader.svelte +++ b/src/components/AppHeader.svelte @@ -25,7 +25,12 @@ } }; - $: background = $tempProfileFiles && $tempProfileFiles.banner ? `url(${$tempProfileFiles.banner})` : $user?.banner ? `url(/api/public/${$user.username}-banner.png)` : undefined; + $: background = + $tempProfileFiles && $tempProfileFiles.banner + ? `url(${$tempProfileFiles.banner})` + : $user?.banner + ? `url(/api/public/${$user.username}-banner.png)` + : undefined; </script> <header class="bg-gradient-to-r {$colorTheme} h-[175px] w-full relative" style:background> @@ -92,9 +97,13 @@ {/if} </nav> {#if $user.profile} - <div class="absolute top-[calc(175px-48px)] {avatarPosition} rounded-full overflow-hidden text-center w-24 h-24 my-auto"> + <div + class="absolute top-[calc(175px-48px)] {avatarPosition} rounded-full overflow-hidden text-center w-24 h-24 my-auto" + > <img - src={$tempProfileFiles && $tempProfileFiles.profile ? $tempProfileFiles.profile : `/api/public/${$user.username}-profile.png`} + src={$tempProfileFiles && $tempProfileFiles.profile + ? $tempProfileFiles.profile + : `/api/public/${$user.username}-profile.png`} class="absolute w-full h-full object-cover object-center visible overflow-hidden" /> </div> diff --git a/src/lib/store.js b/src/lib/store.js index 1412c4e3..3cbd9038 100644 --- a/src/lib/store.js +++ b/src/lib/store.js @@ -38,5 +38,5 @@ export const invoices = writable({}); export const newPayment = persistLocal('newPayment'); export const colorTheme = writable('from-primary to-gradient'); export const tempProfileFiles = writable(); -export const avatarUpload = writable() -export const bannerUpload = writable() +export const avatarUpload = writable(); +export const bannerUpload = writable(); diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte index 997d95d1..4821d50a 100644 --- a/src/routes/[username]/settings/+page.svelte +++ b/src/routes/[username]/settings/+page.svelte @@ -20,16 +20,14 @@ $: ({ comp } = tabs.find((t) => t.name === tab)); let save = async () => { - try { await put('/user', $user); -if ($avatarUpload) { - - await upload($avatarUpload.file, $avatarUpload.type, $avatarUpload.progress); -} -if ($bannerUpload) { - await upload($bannerUpload.file, $bannerUpload.type, $bannerUpload.progress); -} + if ($avatarUpload) { + await upload($avatarUpload.file, $avatarUpload.type, $avatarUpload.progress); + } + if ($bannerUpload) { + await upload($bannerUpload.file, $bannerUpload.type, $bannerUpload.progress); + } success('Settings saved'); } catch (e) { failure('Something went wrong'); diff --git a/src/routes/[username]/settings/_account.svelte b/src/routes/[username]/settings/_account.svelte index c478a5dc..aec336c7 100644 --- a/src/routes/[username]/settings/_account.svelte +++ b/src/routes/[username]/settings/_account.svelte @@ -1,6 +1,13 @@ <script> import { tick } from 'svelte'; - import { user, colorTheme, rates, tempProfileFiles, avatarUpload, bannerUpload } from '$lib/store'; + import { + user, + colorTheme, + rates, + tempProfileFiles, + avatarUpload, + bannerUpload + } from '$lib/store'; import { Icon, Toggle, LocaleSelector } from '$comp'; import { t } from '$lib/translations'; import { upload } from '$lib/upload'; @@ -13,7 +20,7 @@ $: profile = files.profile.src || user.profile; $: banner = files.banner.src || user.banner; -$: $tempProfileFiles = {profile: files.profile.src, banner: files.banner.src} + $: $tempProfileFiles = { profile: files.profile.src, banner: files.banner.src }; let colorThemes = [ { theme: 1, color1: 'from-[#F5F7FA]', color2: 'to-[#C3CFE2]' }, @@ -42,15 +49,13 @@ $: $tempProfileFiles = {profile: files.profile.src, banner: files.banner.src} files[type].src = e.target.result; }; reader.readAsDataURL(file); - - files[type].filename = file.name; -if (type === 'profile') { -$avatarUpload = {file, type, progress} -} -else if (type === 'banner') { -$bannerUpload = {file, type, progress} -} + files[type].filename = file.name; + if (type === 'profile') { + $avatarUpload = { file, type, progress }; + } else if (type === 'banner') { + $bannerUpload = { file, type, progress }; + } }; $: $user.password = $user.confirm = password; @@ -113,7 +118,7 @@ $bannerUpload = {file, type, progress} </div> <div> - <span class="font-bold">{$t('user.settings.profileImage')}</span> + <span class="font-bold">{$t('user.settings.profileImage')}</span> <div class="flex"> {#if profile} <div class="relative rounded-full overflow-hidden text-center w-20 h-20 my-auto"> @@ -129,22 +134,18 @@ $bannerUpload = {file, type, progress} class="absolute w-full h-full object-cover object-center visible overflow-hidden" /> </div> -{:else} + {:else} <div class="rounded-full border-4 border-white p-4 bg-gradient-to-r {$colorTheme} w-24 my-auto" > <Icon icon="logo-symbol-white" style="mx-auto" /> </div> {/if} - <div - class="ml-2 p-2" - - > + <div class="ml-2 p-2"> <button type="button" class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:bg-primary" -on:click={() => select('profile')} - >Select</button + on:click={() => select('profile')}>Select</button > <input type="file" @@ -163,19 +164,22 @@ on:click={() => select('profile')} <div class="flex justify-between items-center"> <span class="font-bold">{$t('user.settings.bannerImage')}</span> </div> -<!-- found missing translation --> + <!-- found missing translation --> <p class="text-secondary mb-4">Recommended size: 1920x540px</p> {#if banner} <img src={banner} class="w-full object-cover object-center visible overflow-hidden h-48 mb-4" /> {:else if $user.banner} - <img src={`/api/public/${$user.username}-banner.png`} class="w-full object-cover object-center visible overflow-hidden h-48 mb-4" /> -{:else} + <img + src={`/api/public/${$user.username}-banner.png`} + class="w-full object-cover object-center visible overflow-hidden h-48 mb-4" + /> + {:else} <div class="bg-gradient-to-r {$colorTheme} w-full h-48 mb-4 cursor-pointer" on:click={() => select('banner')} /> {/if} -<!-- found missing translation --> + <!-- found missing translation --> <button type="button" class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:bg-primary" |