diff --git a/web/src/lib/components/utilities-page/duplicates/duplicates-compare-control.svelte b/web/src/lib/components/utilities-page/duplicates/duplicates-compare-control.svelte index cea1a58f5c..436693922e 100644 --- a/web/src/lib/components/utilities-page/duplicates/duplicates-compare-control.svelte +++ b/web/src/lib/components/utilities-page/duplicates/duplicates-compare-control.svelte @@ -39,6 +39,16 @@ selectedAssetIds = selectedAssetIds; }; + const onSelectNone = () => { + selectedAssetIds.clear(); + selectedAssetIds = selectedAssetIds; + }; + + const onSelectAll = () => { + selectedAssetIds = new Set(duplicate.assets.map((asset) => asset.id)); + selectedAssetIds = selectedAssetIds; + }; + const handleResolve = () => { const trashIds = duplicate.assets.map((asset) => asset.id).filter((id) => !selectedAssetIds.has(id)); const duplicateAssetIds = duplicate.assets.map((asset) => asset.id); @@ -76,7 +86,7 @@ <div class="absolute top-2 right-3 bg-immich-primary/90 px-4 py-1 rounded-xl text-xs font-semibold text-white" > - External + {$t('external')} </div> {/if} </button> @@ -117,18 +127,34 @@ {/each} </div> - <!-- CONFIRM BUTTONS --> - <div class="flex gap-4 my-4 border-transparent w-full justify-end p-4 h-[85px]"> - {#if trashCount === 0} - <Button size="sm" color="primary" class="flex place-items-center gap-2" on:click={handleResolve} - ><Icon path={mdiCheck} size="20" />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 === duplicate.assets.length - ? $t('trash_all') - : `Trash ${trashCount}`} - </Button> - {/if} + <div class="flex mt-10 mb-4 px-6 w-full place-content-end justify-between h-[45px]"> + <!-- 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" + 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" + 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" />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 === duplicate.assets.length + ? $t('trash_all') + : `${$t('trash')} ${trashCount}`} + </Button> + {/if} + </div> </div> </div> diff --git a/web/src/lib/i18n/en.json b/web/src/lib/i18n/en.json index c2aa7d1bb8..895cbad1e6 100644 --- a/web/src/lib/i18n/en.json +++ b/web/src/lib/i18n/en.json @@ -514,6 +514,7 @@ "export": "Export", "export_as_json": "Export as JSON", "extension": "Extension", + "external": "External", "external_libraries": "External Libraries", "failed_to_get_people": "Failed to get people", "favorite": "Favorite", @@ -752,9 +753,11 @@ "select_avatar_color": "Select avatar color", "select_face": "Select face", "select_featured_photo": "Select featured photo", + "select_keep_all": "Select keep all", "select_library_owner": "Select library owner", "select_new_face": "Select new face", "select_photos": "Select photos", + "select_trash_all": "Select trash all", "selected": "Selected", "send_message": "Send message", "server": "Server",