BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-08-28 09:11:06 +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>
<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}
<div class="flex gap-2 items-center">
<CloudPfpAvatar user={cloudAuth.state.user} class="object-cover rounded-full size-10" />
<CloudPfpAvatar
user={cloudAuth.state.user}
class="object-cover rounded-full size-10 shrink-0"
/>
<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}
title="Refresh from cloud"
aria-label="Refresh from cloud"
onclick={() => refreshCloudPfp()}
>
{refreshingCloud ? 'Refreshing…' : 'Refresh from cloud'}
<span class="text-lg font-IconFamily dark:text-white">{'\uec79'}</span>
</button>
</div>
{#if cloudRefreshError}
<p class="text-xs text-red-500">{cloudRefreshError}</p>
{/if}
<div class="w-px h-8 shrink-0 bg-zinc-300 dark:bg-zinc-600" aria-hidden="true"></div>
{/if}
<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"
onclick={() => value ? null : triggerSelect()}
class="relative shrink-0 cursor-pointer select-none"
onclick={() => (value ? null : triggerSelect())}
ondragover={(e) => { e.stopPropagation(); dragging = true }}
ondragleave={() => dragging = false}
ondrop={onDrop}
@@ -146,23 +148,30 @@
tabindex="0"
>
{#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
class="flex justify-center items-center m-1 text-lg dark:text-white size-7"
aria-label="Remove local profile picture"
onclick={(e) => {
e.stopPropagation()
removeImage()
}}
>&#215;</button>
</div>
{: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>Upload</span>
</div>
{/if}
<input type="file" accept="image/*" class="hidden" bind:this={fileInput} onchange={onFileChange} />
{#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}
</div>
</div>
{#if cloudRefreshError}
<p class="max-w-[12rem] text-xs text-right text-red-500">{cloudRefreshError}</p>
{/if}
</div>