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
+53 -44
View File
@@ -112,57 +112,66 @@
} }
</script> </script>
<div class="flex flex-col gap-2 items-end"> <div class="flex flex-col items-end gap-1 shrink-0">
{#if useCloudPfp} <div class="flex items-center gap-2">
<div class="flex gap-2 items-center"> {#if useCloudPfp}
<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 <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}
onkeydown={(e) => { onkeydown={(e) => {
if (e.key === 'Enter' || e.key === ' ') { if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault() e.preventDefault()
triggerSelect() triggerSelect()
} }
}} }}
role="button" role="button"
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">
<button <img src={value} alt="Local profile" class="object-cover rounded-full size-10" />
class="flex justify-center items-center m-1 text-lg dark:text-white size-7" <button
onclick={(e) => { class="flex justify-center items-center m-1 text-lg dark:text-white size-7"
e.stopPropagation() aria-label="Remove local profile picture"
removeImage() onclick={(e) => {
}} e.stopPropagation()
>&#215;</button> removeImage()
{: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"> >&#215;</button>
<span class="text-lg font-IconFamily">{'\ued47'}</span> </div>
<span>Upload</span> {:else}
</div> <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">
{/if} <span class="text-lg font-IconFamily">{'\ued47'}</span>
<input type="file" accept="image/*" class="hidden" bind:this={fileInput} onchange={onFileChange} /> <span>Upload</span>
{#if dragging} </div>
<div class="absolute inset-0 rounded-full bg-zinc-200/40 dark:bg-zinc-700/40"></div> {/if}
{/if} <input type="file" accept="image/*" class="hidden" bind:this={fileInput} onchange={onFileChange} />
{#if dragging}
<div class="absolute inset-0 rounded-lg bg-zinc-200/40 dark:bg-zinc-700/40"></div>
{/if}
</div>
</div> </div>
{#if cloudRefreshError}
<p class="max-w-[12rem] text-xs text-right text-red-500">{cloudRefreshError}</p>
{/if}
</div> </div>