mirror of
https://github.com/immich-app/immich.git
synced 2024-12-29 11:24:37 +02:00
feat(web): duplicate ui tweaks (#10506)
This commit is contained in:
Michel Heusschen
GitHub
parent
eff839251c
commit
5cde52eec9
@ -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,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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user