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

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

@ -16,12 +16,16 @@
$: assetData = JSON.stringify(asset, null, 2); $: assetData = JSON.stringify(asset, null, 2);
</script> </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"> <div class="relative">
<button <button
type="button" type="button"
on:click={() => onSelectAsset(asset)} on:click={() => onSelectAsset(asset)}
class="block relative rounded-t-xl" class="block relative"
aria-pressed={isSelected} aria-pressed={isSelected}
aria-label={$t('keep')} aria-label={$t('keep')}
> >
@ -29,21 +33,23 @@
<img <img
src={getAssetThumbnailUrl(asset.id)} src={getAssetThumbnailUrl(asset.id)}
alt={getAltText(asset)} alt={getAltText(asset)}
title={`${assetData}`} 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`} class="h-60 object-cover rounded-t-xl"
draggable="false" draggable="false"
/> />
<!-- OVERLAY CHIP --> <!-- OVERLAY CHIP -->
<div <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')} {isSelected ? $t('keep') : $t('to_trash')}
</div> </div>
<!-- EXTERNAL LIBRARY CHIP--> <!-- EXTERNAL LIBRARY CHIP-->
{#if isFromExternalLibrary} {#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')} {$t('external')}
</div> </div>
{/if} {/if}
@ -52,43 +58,30 @@
<button <button
type="button" type="button"
on:click={() => onViewAsset(asset)} 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')} title={$t('view')}
> >
<Icon ariaLabel={$t('view')} path={mdiMagnifyPlus} flipped /> <Icon ariaLabel={$t('view')} path={mdiMagnifyPlus} flipped size="18" />
</button> </button>
</div> </div>
<!-- ASSET INFO--> <div
<table class="grid place-items-center gap-y-2 py-2 text-xs transition-colors {isSelected
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`} ? 'text-white dark:text-black'
: 'dark:text-white'}"
> >
<tr <span class="break-all text-center">{asset.originalFileName}</span>
class={`h-8 ${isSelected ? 'border-immich-primary rounded-xl dark:border-immich-dark-primary' : 'border-gray-300'} text-center `} <span>{getAssetResolution(asset)} - {getFileSize(asset)}</span>
> <span>
<td>{asset.originalFileName}</td> {#await getAllAlbums({ assetId: asset.id })}
</tr> {$t('scanning_for_album')}
{:then albums}
<tr {#if albums.length === 0}
class={`h-8 ${isSelected ? 'border-immich-primary rounded-xl dark:border-immich-dark-primary' : 'border-gray-300'} text-center`} {$t('not_in_any_album')}
> {:else}
<td>{getAssetResolution(asset)} - {getFileSize(asset)}</td> {$t('in_albums', { values: { count: albums.length } })}
</tr> {/if}
{/await}
<tr </span>
class={`h-8 ${isSelected ? 'border-immich-primary rounded-xl dark:border-immich-dark-primary' : 'border-gray-300'} text-center `} </div>
>
<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>
</div> </div>

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

@ -73,35 +73,33 @@
{/each} {/each}
</div> </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 --> <!-- MARK ALL BUTTONS -->
<div class="flex text-xs text-black"> <div class="flex text-xs text-black">
<button <button
type="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 on:click={onSelectAll}><Icon path={mdiCheck} size="20" />{$t('select_keep_all')}</button
> >
<button <button
type="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 on:click={onSelectNone}><Icon path={mdiTrashCanOutline} size="20" />{$t('select_trash_all')}</button
> >
</div> </div>
<!-- CONFIRM BUTTONS --> <!-- CONFIRM BUTTONS -->
<div class="flex gap-4"> {#if trashCount === 0}
{#if trashCount === 0} <Button size="sm" color="primary" class="flex place-items-center gap-2" on:click={handleResolve}>
<Button size="sm" color="primary" class="flex place-items-center gap-2" on:click={handleResolve}> <Icon path={mdiCheck} size="20" />{$t('keep_all')}
<Icon path={mdiCheck} size="20" />{$t('keep_all')} </Button>
</Button> {:else}
{:else} <Button size="sm" color="red" class="flex place-items-center gap-2 py-3" on:click={handleResolve}>
<Button size="sm" color="red" class="flex place-items-center gap-2" on:click={handleResolve}> <Icon path={mdiTrashCanOutline} size="20" />{trashCount === assets.length
<Icon path={mdiTrashCanOutline} size="20" />{trashCount === assets.length ? $t('trash_all')
? $t('trash_all') : $t('trash_count', { values: { count: trashCount } })}
: $t('trash_count', { values: { count: trashCount } })} </Button>
</Button> {/if}
{/if}
</div>
</div> </div>
</div> </div>