BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-08-28 17:21:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(cloud PFP): button placement

Browse Source
This commit is contained in:
StroepWafel
2026-06-25 19:01:00 +09:30
parent 670f9d73f3
commit 969c3bbdd5
1 changed files with 53 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/plugins/built-in/profilePicture/ProfilePictureSetting.svelte
+23 -14
View File
@@ -112,27 +112,29 @@
} }
</script> </script>
<div class="flex flex-col gap-2 items-end"> <div class="flex flex-col items-end gap-1 shrink-0">
<div class="flex items-center gap-2">
{#if useCloudPfp} {#if useCloudPfp}
<div class="flex gap-2 items-center"> <CloudPfpAvatar
<CloudPfpAvatar user={cloudAuth.state.user} class="object-cover rounded-full size-10" /> user={cloudAuth.state.user}
class="object-cover rounded-full size-10 shrink-0"
/>
<button <button
type="button" type="button"
class="px-2 py-1 text-xs rounded-md bg-zinc-200 dark:bg-zinc-700 hover:bg-zinc-300 dark:hover:bg-zinc-600 disabled:opacity-50" class="flex justify-center items-center shrink-0 rounded-md size-8 bg-zinc-200 dark:bg-zinc-700 hover:bg-zinc-300 dark:hover:bg-zinc-600 disabled:opacity-50"
disabled={refreshingCloud} disabled={refreshingCloud}
title="Refresh from cloud"
aria-label="Refresh from cloud"
onclick={() => refreshCloudPfp()} onclick={() => refreshCloudPfp()}
> >
{refreshingCloud ? 'Refreshing…' : 'Refresh from cloud'} <span class="text-lg font-IconFamily dark:text-white">{'\uec79'}</span>
</button> </button>
</div> <div class="w-px h-8 shrink-0 bg-zinc-300 dark:bg-zinc-600" aria-hidden="true"></div>
{#if cloudRefreshError}
<p class="text-xs text-red-500">{cloudRefreshError}</p>
{/if}
{/if} {/if}
<div <div
class="flex relative justify-center items-center rounded-lg cursor-pointer select-none border-zinc-300 dark:border-zinc-600 bg-white/20 dark:bg-zinc-800/30" class="relative shrink-0 cursor-pointer select-none"
onclick={() => value ? null : triggerSelect()} onclick={() => (value ? null : triggerSelect())}
ondragover={(e) => { e.stopPropagation(); dragging = true }} ondragover={(e) => { e.stopPropagation(); dragging = true }}
ondragleave={() => dragging = false} ondragleave={() => dragging = false}
ondrop={onDrop} ondrop={onDrop}
@@ -146,23 +148,30 @@
tabindex="0" tabindex="0"
> >
{#if value} {#if value}
<img src={value} alt="Profile" class="object-cover rounded-full size-10" /> <div class="flex items-center rounded-lg bg-zinc-200 dark:bg-zinc-800">
<img src={value} alt="Local profile" class="object-cover rounded-full size-10" />
<button <button
class="flex justify-center items-center m-1 text-lg dark:text-white size-7" class="flex justify-center items-center m-1 text-lg dark:text-white size-7"
aria-label="Remove local profile picture"
onclick={(e) => { onclick={(e) => {
e.stopPropagation() e.stopPropagation()
removeImage() removeImage()
}} }}
>&#215;</button> >&#215;</button>
</div>
{:else} {:else}
<div class="flex gap-2 items-center px-3 py-1 text-xs rounded-lg border border-dashed transition border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300"> <div class="flex gap-2 items-center px-3 py-1 text-xs rounded-lg border border-dashed transition border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300 text-nowrap">
<span class="text-lg font-IconFamily">{'\ued47'}</span> <span class="text-lg font-IconFamily">{'\ued47'}</span>
<span>Upload</span> <span>Upload</span>
</div> </div>
{/if} {/if}
<input type="file" accept="image/*" class="hidden" bind:this={fileInput} onchange={onFileChange} /> <input type="file" accept="image/*" class="hidden" bind:this={fileInput} onchange={onFileChange} />
{#if dragging} {#if dragging}
<div class="absolute inset-0 rounded-full bg-zinc-200/40 dark:bg-zinc-700/40"></div> <div class="absolute inset-0 rounded-lg bg-zinc-200/40 dark:bg-zinc-700/40"></div>
{/if} {/if}
</div> </div>
</div>
{#if cloudRefreshError}
<p class="max-w-[12rem] text-xs text-right text-red-500">{cloudRefreshError}</p>
{/if}
</div> </div>