tbelway/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-11-03 19:29:32 -05:00
Code Issues Packages Projects Releases Wiki Activity

refactor: dedicated icon for permanently delete (#10052)

Browse Source 
Motivation
----------
It's a follow up to #10028. I think it would be better user experience if one can tell by the icon what the delete button is about to do.

I hope I caught all the occurences where one can permanently delete assets.

How to test
-----------
1. Visit e.g. `/trash`
2. If you select some assets, the delete button in the top right corner
   looks different.
This commit is contained in:
Robert Schäfer 2024-06-10 00:55:27 +05:30 committed by GitHub
parent 972c66d467
commit 48eede59b9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/lib/components/asset-viewer/delete-button.svelte
View File

@ -2,7 +2,7 @@
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte'; import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
import { mdiDeleteOutline } from '@mdi/js'; import { mdiDeleteOutline, mdiDeleteForeverOutline } from '@mdi/js';
import { type AssetResponseDto } from '@immich/sdk'; import { type AssetResponseDto } from '@immich/sdk';
export let asset: AssetResponseDto; export let asset: AssetResponseDto;
@ -18,7 +18,7 @@
{#if asset.isTrashed} {#if asset.isTrashed}
<CircleIconButton <CircleIconButton
color="opaque" color="opaque"
icon={mdiDeleteOutline} icon={mdiDeleteForeverOutline}
on:click={() => dispatch('permanentlyDelete')} on:click={() => dispatch('permanentlyDelete')}
title={$t('permanently_delete')} title={$t('permanently_delete')}
/> />

4
web/src/lib/components/photos-page/actions/delete-assets.svelte
View File

@ -3,7 +3,7 @@
import MenuOption from '../../shared-components/context-menu/menu-option.svelte'; import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
import { getAssetControlContext } from '../asset-select-control-bar.svelte'; import { getAssetControlContext } from '../asset-select-control-bar.svelte';
import { featureFlags } from '$lib/stores/server-config.store'; import { featureFlags } from '$lib/stores/server-config.store';
import { mdiTimerSand, mdiDeleteOutline } from '@mdi/js'; import { mdiTimerSand, mdiDeleteOutline, mdiDeleteForeverOutline } from '@mdi/js';
import { type OnDelete, deleteAssets } from '$lib/utils/actions'; import { type OnDelete, deleteAssets } from '$lib/utils/actions';
import DeleteAssetDialog from '../delete-asset-dialog.svelte'; import DeleteAssetDialog from '../delete-asset-dialog.svelte';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@ -43,7 +43,7 @@
{:else if loading} {:else if loading}
<CircleIconButton title={$t('loading')} icon={mdiTimerSand} /> <CircleIconButton title={$t('loading')} icon={mdiTimerSand} />
{:else} {:else}
<CircleIconButton title={label} icon={mdiDeleteOutline} on:click={handleTrash} /> <CircleIconButton title={label} icon={mdiDeleteForeverOutline} on:click={handleTrash} />
{/if} {/if}
{#if isShowConfirmation} {#if isShowConfirmation}

4
web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@ -20,7 +20,7 @@
import { featureFlags, serverConfig } from '$lib/stores/server-config.store'; import { featureFlags, serverConfig } from '$lib/stores/server-config.store';
import { handleError } from '$lib/utils/handle-error'; import { handleError } from '$lib/utils/handle-error';
import { emptyTrash, restoreTrash } from '@immich/sdk'; import { emptyTrash, restoreTrash } from '@immich/sdk';
import { mdiDeleteOutline, mdiHistory } from '@mdi/js'; import { mdiDeleteForeverOutline, mdiHistory } from '@mdi/js';
import type { PageData } from './$types'; import type { PageData } from './$types';
import { handlePromiseError } from '$lib/utils'; import { handlePromiseError } from '$lib/utils';
import { dialogController } from '$lib/components/shared-components/dialog/dialog'; import { dialogController } from '$lib/components/shared-components/dialog/dialog';
@ -106,7 +106,7 @@
</LinkButton> </LinkButton>
<LinkButton on:click={() => handleEmptyTrash()} disabled={$isMultiSelectState}> <LinkButton on:click={() => handleEmptyTrash()} disabled={$isMultiSelectState}>
<div class="flex place-items-center gap-2 text-sm"> <div class="flex place-items-center gap-2 text-sm">
<Icon path={mdiDeleteOutline} size="18" /> <Icon path={mdiDeleteForeverOutline} size="18" />
Empty trash Empty trash
</div> </div>
</LinkButton> </LinkButton>