Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-11-02 18:47:07 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): duplicate ui tweaks (#10506)

Browse Source
This commit is contained in:
Michel Heusschen 2024-06-20 23:14:34 +02:00 committed by GitHub
parent eff839251c
commit 5cde52eec9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 46 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
web/src/lib/components/utilities-page/duplicates/duplicate-asset.svelte
View File

@ -16,12 +16,16 @@
$: assetData = JSON.stringify(asset, null, 2);
</script>
<div class="relative">
<div
class="max-w-60 rounded-xl border-4 transition-colors font-semibold text-xs {isSelected
? 'bg-immich-primary dark:bg-immich-dark-primary border-immich-primary dark:border-immich-dark-primary'
: 'bg-gray-200 dark:bg-gray-800 border-gray-200 dark:border-gray-800'}"
>
<div class="relative">
<button
type="button"
on:click={() => onSelectAsset(asset)}
class="block relative rounded-t-xl"
class="block relative"
aria-pressed={isSelected}
aria-label={$t('keep')}
>
@ -29,21 +33,23 @@
<img
src={getAssetThumbnailUrl(asset.id)}
alt={getAltText(asset)}
title={`${assetData}`}
class={`size-60 object-cover rounded-t-xl border-4 border-b-0 border-gray-300 ${isSelected ? 'border-immich-primary dark:border-immich-dark-primary' : 'dark:border-gray-800'} transition-all`}
title={assetData}
class="h-60 object-cover rounded-t-xl"
draggable="false"
/>
<!-- OVERLAY CHIP -->
<div
class={`absolute bottom-2 right-3 ${isSelected ? 'bg-green-400/90' : 'bg-red-300/90'} px-4 py-1 rounded-xl text-xs font-semibold`}
class="absolute bottom-1 right-3 px-4 py-1 rounded-xl text-xs transition-colors {isSelected
? 'bg-green-400/90'
: 'bg-red-300/90'}"
>
{isSelected ? $t('keep') : $t('to_trash')}
</div>
<!-- EXTERNAL LIBRARY CHIP-->
{#if isFromExternalLibrary}
<div class="absolute top-2 right-3 bg-immich-primary/90 px-4 py-1 rounded-xl text-xs font-semibold text-white">
<div class="absolute top-2 right-3 bg-immich-primary/90 px-4 py-1 rounded-xl text-xs text-white">
{$t('external')}
</div>
{/if}
@ -52,33 +58,21 @@
<button
type="button"
on:click={() => onViewAsset(asset)}
class="absolute rounded-full bottom-1 left-2 text-gray-200 p-1.5 hover:text-white bg-black/35"
class="absolute rounded-full bottom-1 left-1 text-gray-200 p-2 hover:text-white bg-black/35 hover:bg-black/50"
title={$t('view')}
>
<Icon ariaLabel={$t('view')} path={mdiMagnifyPlus} flipped />
<Icon ariaLabel={$t('view')} path={mdiMagnifyPlus} flipped size="18" />
</button>
</div>
<!-- ASSET INFO-->
<table
class={`text-xs w-full rounded-b-xl font-semibold ${isSelected ? 'bg-immich-primary text-white dark:bg-immich-dark-primary dark:text-black' : 'bg-gray-200 dark:bg-gray-800 dark:text-white'} mt-0 transition-all`}
<div
class="grid place-items-center gap-y-2 py-2 text-xs transition-colors {isSelected
? 'text-white dark:text-black'
: 'dark:text-white'}"
>
<tr
class={`h-8 ${isSelected ? 'border-immich-primary rounded-xl dark:border-immich-dark-primary' : 'border-gray-300'} text-center `}
>
<td>{asset.originalFileName}</td>
</tr>
<tr
class={`h-8 ${isSelected ? 'border-immich-primary rounded-xl dark:border-immich-dark-primary' : 'border-gray-300'} text-center`}
>
<td>{getAssetResolution(asset)} - {getFileSize(asset)}</td>
</tr>
<tr
class={`h-8 ${isSelected ? 'border-immich-primary rounded-xl dark:border-immich-dark-primary' : 'border-gray-300'} text-center `}
>
<td>
<span class="break-all text-center">{asset.originalFileName}</span>
<span>{getAssetResolution(asset)} - {getFileSize(asset)}</span>
<span>
{#await getAllAlbums({ assetId: asset.id })}
{$t('scanning_for_album')}
{:then albums}
@ -88,7 +82,6 @@
{$t('in_albums', { values: { count: albums.length } })}
{/if}
{/await}
</td>
</tr>
</table>
</span>
</div>
</div>

10
web/src/lib/components/utilities-page/duplicates/duplicates-compare-control.svelte
View File

@ -73,36 +73,34 @@
{/each}
</div>
<div class="flex mt-10 mb-4 px-6 w-full place-content-end justify-between h-11">
<div class="flex flex-wrap gap-y-6 mt-10 mb-4 px-6 w-full place-content-end justify-between">
<!-- MARK ALL BUTTONS -->
<div class="flex text-xs text-black">
<button
type="button"
class="px-4 flex place-items-center gap-2 rounded-tl-full rounded-bl-full dark:bg-immich-dark-primary hover:dark:bg-immich-dark-primary/90 bg-immich-primary/25 hover:bg-immich-primary/50"
class="px-4 py-3 flex place-items-center gap-2 rounded-tl-full rounded-bl-full dark:bg-immich-dark-primary hover:dark:bg-immich-dark-primary/90 bg-immich-primary/25 hover:bg-immich-primary/50"
on:click={onSelectAll}><Icon path={mdiCheck} size="20" />{$t('select_keep_all')}</button
>
<button
type="button"
class="px-4 flex place-items-center gap-2 rounded-tr-full rounded-br-full dark:bg-immich-dark-primary/50 hover:dark:bg-immich-dark-primary/70 bg-immich-primary hover:bg-immich-primary/80 text-white"
class="px-4 py-3 flex place-items-center gap-2 rounded-tr-full rounded-br-full dark:bg-immich-dark-primary/50 hover:dark:bg-immich-dark-primary/70 bg-immich-primary hover:bg-immich-primary/80 text-white"
on:click={onSelectNone}><Icon path={mdiTrashCanOutline} size="20" />{$t('select_trash_all')}</button
>
</div>
<!-- CONFIRM BUTTONS -->
<div class="flex gap-4">
{#if trashCount === 0}
<Button size="sm" color="primary" class="flex place-items-center gap-2" on:click={handleResolve}>
<Icon path={mdiCheck} size="20" />{$t('keep_all')}
</Button>
{:else}
<Button size="sm" color="red" class="flex place-items-center gap-2" on:click={handleResolve}>
<Button size="sm" color="red" class="flex place-items-center gap-2 py-3" on:click={handleResolve}>
<Icon path={mdiTrashCanOutline} size="20" />{trashCount === assets.length
? $t('trash_all')
: $t('trash_count', { values: { count: trashCount } })}
</Button>
{/if}
</div>
</div>
</div>
{#if $showAssetViewer}