helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: migrate to UI lib icon (#22096)

Browse source
This commit is contained in:
Daniel Dietzler 2025-09-16 21:40:43 +02:00 • committed by GitHub
parent dac545496e
commit 7fe2f19258
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
78 changed files with 243 additions and 345 deletions
Download patch file Download diff file Expand all files Collapse all files

4
web/src/lib/components/asset-viewer/actions/next-asset-action.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts">
import { shortcuts } from '$lib/actions/shortcut';
import Icon from '$lib/elements/Icon.svelte';
import { Icon } from '@immich/ui';
import { mdiChevronRight } from '@mdi/js';
import { t } from 'svelte-i18n';
import NavigationArea from '../navigation-area.svelte';
@ -20,5 +20,5 @@
/>
<NavigationArea onClick={onNextAsset} label={$t('view_next_asset')}>
<Icon path={mdiChevronRight} size="36" ariaHidden />
<Icon icon={mdiChevronRight} size="36" aria-hidden />
</NavigationArea>

4
web/src/lib/components/asset-viewer/actions/previous-asset-action.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts">
import { shortcuts } from '$lib/actions/shortcut';
import Icon from '$lib/elements/Icon.svelte';
import { Icon } from '@immich/ui';
import { mdiChevronLeft } from '@mdi/js';
import { t } from 'svelte-i18n';
import NavigationArea from '../navigation-area.svelte';
@ -20,5 +20,5 @@
/>
<NavigationArea onClick={onPreviousAsset} label={$t('view_previous_asset')}>
<Icon path={mdiChevronLeft} size="36" ariaHidden />
<Icon icon={mdiChevronLeft} size="36" aria-hidden />
</NavigationArea>

6
web/src/lib/components/asset-viewer/activity-status.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts">
import Icon from '$lib/elements/Icon.svelte';
import { locale } from '$lib/stores/preferences.store';
import type { ActivityResponseDto } from '@immich/sdk';
import { Icon } from '@immich/ui';
import { mdiCommentOutline, mdiHeart, mdiHeartOutline } from '@mdi/js';
interface Props {
@ -19,7 +19,7 @@
<div class="w-full flex p-4 items-center justify-center rounded-full gap-5 bg-subtle border bg-opacity-60">
<button type="button" class={disabled ? 'cursor-not-allowed' : ''} onclick={onFavorite} {disabled}>
<div class="flex gap-2 items-center justify-center">
<Icon path={isLiked ? mdiHeart : mdiHeartOutline} size={24} class={isLiked ? 'text-red-400' : 'text-fg'} />
<Icon icon={isLiked ? mdiHeart : mdiHeartOutline} size="24" class={isLiked ? 'text-red-400' : 'text-fg'} />
{#if numberOfLikes}
<div class="text-l">{numberOfLikes.toLocaleString($locale)}</div>
{/if}
@ -27,7 +27,7 @@
</button>
<button type="button" onclick={onOpenActivityTab}>
<div class="flex gap-2 items-center justify-center">
<Icon path={mdiCommentOutline} class="scale-x-[-1]" size={24} />
<Icon icon={mdiCommentOutline} class="scale-x-[-1]" size="24" />
{#if numberOfComments}
<div class="text-l">{numberOfComments.toLocaleString($locale)}</div>
{/if}

5
web/src/lib/components/asset-viewer/activity-viewer.svelte
View file

@ -4,7 +4,6 @@
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
import { AppRoute, timeBeforeShowLoadingSpinner } from '$lib/constants';
import Icon from '$lib/elements/Icon.svelte';
import { activityManager } from '$lib/managers/activity-manager.svelte';
import { locale } from '$lib/stores/preferences.store';
import { getAssetThumbnailUrl } from '$lib/utils';
@ -12,7 +11,7 @@
import { handleError } from '$lib/utils/handle-error';
import { isTenMinutesApart } from '$lib/utils/timesince';
import { ReactionType, type ActivityResponseDto, type AssetTypeEnum, type UserResponseDto } from '@immich/sdk';
import { IconButton } from '@immich/ui';
import { Icon, IconButton } from '@immich/ui';
import { mdiClose, mdiDeleteOutline, mdiDotsVertical, mdiHeart, mdiSend } from '@mdi/js';
import * as luxon from 'luxon';
import { t } from 'svelte-i18n';
@ -187,7 +186,7 @@
{:else if reaction.type === ReactionType.Like}
<div class="relative">
<div class="flex py-3 ps-3 mt-3 gap-4 items-center text-sm">
<div class="text-red-600"><Icon path={mdiHeart} size={20} /></div>
<div class="text-red-600"><Icon icon={mdiHeart} size="20" /></div>
<div class="w-full" title={`${reaction.user.name} (${reaction.user.email})`}>
{$t('user_liked', {

6
web/src/lib/components/asset-viewer/album-list-item.svelte
View file

@ -1,10 +1,10 @@
<script lang="ts">
import { SCROLL_PROPERTIES } from '$lib/components/shared-components/album-selection/album-selection-utils';
import Icon from '$lib/elements/Icon.svelte';
import { mobileDevice } from '$lib/stores/mobile-device.svelte';
import { getAssetThumbnailUrl } from '$lib/utils';
import { normalizeSearchString } from '$lib/utils/string-utils.js';
import { type AlbumResponseDto } from '@immich/sdk';
import { Icon } from '@immich/ui';
import { mdiCheckCircle } from '@mdi/js';
import type { Action } from 'svelte/action';
import AlbumListItemDetails from './album-list-item-details.svelte';
@ -165,10 +165,10 @@
>
{#if multiSelected}
<div class="rounded-full">
<Icon path={mdiCheckCircle} size="24" class="text-primary" />
<Icon icon={mdiCheckCircle} size="24" class="text-primary" />
</div>
{:else}
<Icon path={mdiCheckCircle} size="24" class="text-gray-300 hover:text-primary/75" />
<Icon icon={mdiCheckCircle} size="24" class="text-gray-300 hover:text-primary/75" />
{/if}
</button>
{/if}

10
web/src/lib/components/asset-viewer/detail-panel-location.svelte
View file

@ -1,9 +1,9 @@
<script lang="ts">
import ChangeLocation from '$lib/components/shared-components/change-location.svelte';
import Icon from '$lib/elements/Icon.svelte';
import Portal from '$lib/elements/Portal.svelte';
import { handleError } from '$lib/utils/handle-error';
import { updateAsset, type AssetResponseDto } from '@immich/sdk';
import { Icon } from '@immich/ui';
import { mdiMapMarkerOutline, mdiPencil } from '@mdi/js';
import { t } from 'svelte-i18n';
@ -44,7 +44,7 @@
class:hover:text-immich-primary={isOwner}
>
<div class="flex gap-4">
<div><Icon path={mdiMapMarkerOutline} size="24" /></div>
<div><Icon icon={mdiMapMarkerOutline} size="24" /></div>
<div>
{#if asset.exifInfo?.city}
@ -65,7 +65,7 @@
{#if isOwner}
<div>
<Icon path={mdiPencil} size="20" />
<Icon icon={mdiPencil} size="20" />
</div>
{/if}
</button>
@ -77,12 +77,12 @@
title={$t('add_location')}
>
<div class="flex gap-4">
<div><Icon path={mdiMapMarkerOutline} size="24" /></div>
<div><Icon icon={mdiMapMarkerOutline} size="24" /></div>
<p>{$t('add_a_location')}</p>
</div>
<div class="focus:outline-none p-1">
<Icon path={mdiPencil} size="20" />
<Icon icon={mdiPencil} size="20" />
</div>
</button>
{/if}

7
web/src/lib/components/asset-viewer/detail-panel-tags.svelte
View file

@ -1,12 +1,11 @@
<script lang="ts">
import { shortcut } from '$lib/actions/shortcut';
import { AppRoute } from '$lib/constants';
import Icon from '$lib/elements/Icon.svelte';
import { authManager } from '$lib/managers/auth-manager.svelte';
import AssetTagModal from '$lib/modals/AssetTagModal.svelte';
import { removeTag } from '$lib/utils/asset-utils';
import { getAssetInfo, type AssetResponseDto } from '@immich/sdk';
import { modalManager } from '@immich/ui';
import { Icon, modalManager } from '@immich/ui';
import { mdiClose, mdiPlus } from '@mdi/js';
import { t } from 'svelte-i18n';
@ -59,7 +58,7 @@
title="Remove tag"
onclick={() => handleRemove(tag.id)}
>
<Icon path={mdiClose} />
<Icon icon={mdiClose} />
</button>
</div>
{/each}
@ -70,7 +69,7 @@
onclick={handleAddTag}
>
<span class="text-sm px-1 flex place-items-center place-content-center gap-1"
><Icon path={mdiPlus} />{$t('add')}</span
><Icon icon={mdiPlus} />{$t('add')}</span
>
</button>
</section>

15
web/src/lib/components/asset-viewer/detail-panel.svelte
View file

@ -9,7 +9,6 @@
type RelativeResult,
} from '$lib/components/shared-components/change-date.svelte';
import { AppRoute, QueryParameter, timeToLoadTheMap } from '$lib/constants';
import Icon from '$lib/elements/Icon.svelte';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
import { boundingBoxesArray } from '$lib/stores/people.store';
@ -24,7 +23,7 @@
import { fromISODateTime, fromISODateTimeUTC } from '$lib/utils/timeline-util';
import { getParentPath } from '$lib/utils/tree-utils';
import { AssetMediaSize, getAssetInfo, updateAsset, type AlbumResponseDto, type AssetResponseDto } from '@immich/sdk';
import { IconButton } from '@immich/ui';
import { Icon, IconButton } from '@immich/ui';
import {
mdiCalendar,
mdiCameraIris,
@ -286,7 +285,7 @@
>
<div class="flex gap-4">
<div>
<Icon path={mdiCalendar} size="24" />
<Icon icon={mdiCalendar} size="24" />
</div>
<div>
@ -318,7 +317,7 @@
{#if isOwner}
<div class="p-1">
<Icon path={mdiPencil} size="20" />
<Icon icon={mdiPencil} size="20" />
</div>
{/if}
</button>
@ -326,11 +325,11 @@
<div class="flex justify-between place-items-start gap-4 py-4">
<div class="flex gap-4">
<div>
<Icon path={mdiCalendar} size="24" />
<Icon icon={mdiCalendar} size="24" />
</div>
</div>
<div class="p-1">
<Icon path={mdiPencil} size="20" />
<Icon icon={mdiPencil} size="20" />
</div>
</div>
{/if}
@ -346,7 +345,7 @@
{/if}
<div class="flex gap-4 py-4">
<div><Icon path={mdiImageOutline} size="24" /></div>
<div><Icon icon={mdiImageOutline} size="24" /></div>
<div>
<p class="break-all flex place-items-center gap-2 whitespace-pre-wrap">
@ -394,7 +393,7 @@
{#if asset.exifInfo?.make || asset.exifInfo?.model || asset.exifInfo?.fNumber}
<div class="flex gap-4 py-4">
<div><Icon path={mdiCameraIris} size="24" /></div>
<div><Icon icon={mdiCameraIris} size="24" /></div>
<div>
{#if asset.exifInfo?.make || asset.exifInfo?.model}

5
web/src/lib/components/asset-viewer/editor/crop-tool/crop-preset.svelte
View file

@ -1,7 +1,6 @@
<script lang="ts">
import Icon from '$lib/elements/Icon.svelte';
import type { CropAspectRatio } from '$lib/stores/asset-editor.store';
import { Button, type Color } from '@immich/ui';
import { Button, Icon, type Color } from '@immich/ui';
interface Props {
size: {
@ -38,7 +37,7 @@
<li>
<Button shape="round" color={buttonColor} class="flex-col gap-1" size="small" onclick={() => selectType(size.name)}>
<Icon size="1.75em" path={size.icon} viewBox={size.viewBox} class={toRotate(size.rotate) ? 'rotate-90' : ''} />
<Icon size="1.75em" icon={size.icon} viewBox={size.viewBox} class={toRotate(size.rotate) ? 'rotate-90' : ''} />
<span>{rotatedTitle(size.name, rotateHorizontal)}</span>
</Button>
</li>

5
web/src/lib/components/asset-viewer/video-remote-viewer.svelte
View file

@ -1,9 +1,8 @@
<script lang="ts">
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
import Icon from '$lib/elements/Icon.svelte';
import { castManager, CastState } from '$lib/managers/cast-manager.svelte';
import { handleError } from '$lib/utils/handle-error';
import { IconButton } from '@immich/ui';
import { Icon, IconButton } from '@immich/ui';
import { mdiCastConnected, mdiPause, mdiPlay } from '@mdi/js';
import { t } from 'svelte-i18n';
@ -72,7 +71,7 @@
</script>
<span class="flex items-center space-x-2 text-gray-200 text-2xl font-bold">
<Icon path={mdiCastConnected} class="text-primary" size="36" />
<Icon icon={mdiCastConnected} class="text-primary" size="36" />
<span>{$t('connected_to')} {castManager.receiverName}</span>
</span>