[go: nahoru, domu]
Skip to content

Commit

Permalink
feat(web): duplicate ui tweaks (immich-app#10506)
Browse files Browse the repository at this point in the history
  • Loading branch information
@michelheusschen
michelheusschen committed Jun 20, 2024
1 parent eff8392 commit 5cde52e
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 55 deletions.
71 changes: 32 additions & 39 deletions web/src/lib/components/utilities-page/duplicates/duplicate-asset.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,34 +16,40 @@
$: 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')}
>
<!-- THUMBNAIL-->
<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}
Expand All @@ -52,43 +58,30 @@
<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>
{#await getAllAlbums({ assetId: asset.id })}
{$t('scanning_for_album')}
{:then albums}
{#if albums.length === 0}
{$t('not_in_any_album')}
{:else}
{$t('in_albums', { values: { count: albums.length } })}
{/if}
{/await}
</td>
</tr>
</table>
<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}
{#if albums.length === 0}
{$t('not_in_any_album')}
{:else}
{$t('in_albums', { values: { count: albums.length } })}
{/if}
{/await}
</span>
</div>
</div>
30 changes: 14 additions & 16 deletions web/src/lib/components/utilities-page/duplicates/duplicates-compare-control.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,35 +73,33 @@
{/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}>
<Icon path={mdiTrashCanOutline} size="20" />{trashCount === assets.length
? $t('trash_all')
: $t('trash_count', { values: { count: trashCount } })}
</Button>
{/if}
</div>
{#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 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>

Expand Down

0 comments on commit 5cde52e

Please sign in to comment.