immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-18 09:13:15 +03:00
Code Issues Packages Projects Releases 16 Wiki Activity

refactor: remove unnecessary bg-color attributes and move to ui lib vars (#18234)

Browse Source
This commit is contained in:
Daniel Dietzler
2025-05-12 23:17:01 +02:00
committed by GitHub
parent 3066c8198c
commit 7544a678ec
36 changed files with 106 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
web/src/lib/components/faces-page/assign-face-side-panel.svelte
View File

@@ -1,20 +1,20 @@
<script lang="ts">
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import SearchPeople from '$lib/components/faces-page/people-search.svelte';
import { timeBeforeShowLoadingSpinner } from '$lib/constants';
import { getPersonNameWithHiddenValue } from '$lib/utils/person';
import { photoViewerImgElement } from '$lib/stores/assets-store.svelte';
import { getPeopleThumbnailUrl, handlePromiseError } from '$lib/utils';
import { AssetTypeEnum, type AssetFaceResponseDto, type PersonResponseDto, getAllPeople } from '@immich/sdk';
import { handleError } from '$lib/utils/handle-error';
import { zoomImageToBase64 } from '$lib/utils/people-utils';
import { getPersonNameWithHiddenValue } from '$lib/utils/person';
import { AssetTypeEnum, getAllPeople, type AssetFaceResponseDto, type PersonResponseDto } from '@immich/sdk';
import { mdiArrowLeftThin, mdiClose, mdiMagnify, mdiPlus } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import { linear } from 'svelte/easing';
import { fly } from 'svelte/transition';
import { photoViewerImgElement } from '$lib/stores/assets-store.svelte';
import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
import LoadingSpinner from '../shared-components/loading-spinner.svelte';
import SearchPeople from '$lib/components/faces-page/people-search.svelte';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import { zoomImageToBase64 } from '$lib/utils/people-utils';
import { t } from 'svelte-i18n';
import { handleError } from '$lib/utils/handle-error';
import { onMount } from 'svelte';
interface Props {
editedFace: AssetFaceResponseDto;
@@ -74,7 +74,7 @@
<section
transition:fly={{ x: 360, duration: 100, easing: linear }}
class="absolute top-0 z-[2001] h-full w-[360px] overflow-x-hidden p-2 bg-immich-bg dark:bg-immich-dark-bg dark:text-immich-dark-fg"
class="absolute top-0 z-[2001] h-full w-[360px] overflow-x-hidden p-2 dark:text-immich-dark-fg"
>
<div class="flex place-items-center justify-between gap-2">
{#if !searchFaces}

4
web/src/lib/components/faces-page/manage-people-visibility.svelte
View File

@@ -8,6 +8,7 @@
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import { ToggleVisibility } from '$lib/constants';
import { locale } from '$lib/stores/preferences.store';
import { getPeopleThumbnailUrl } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
@@ -15,7 +16,6 @@
import { mdiClose, mdiEye, mdiEyeOff, mdiEyeSettings, mdiRestart } from '@mdi/js';
import { t } from 'svelte-i18n';
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
import { ToggleVisibility } from '$lib/constants';
interface Props {
people: PersonResponseDto[];
@@ -134,7 +134,7 @@
</div>
</div>
<div class="flex flex-wrap gap-1 bg-immich-bg p-2 pb-8 dark:bg-immich-dark-bg md:px-8 mt-16">
<div class="flex flex-wrap gap-1 p-2 pb-8 md:px-8 mt-16">
<PeopleInfiniteScroll {people} hasNextPage={true} {loadNextPage}>
{#snippet children({ person })}
{@const hidden = personIsHidden[person.id]}

8
web/src/lib/components/faces-page/merge-face-selector.svelte
View File

@@ -2,11 +2,13 @@
import { goto } from '$app/navigation';
import { page } from '$app/state';
import Icon from '$lib/components/elements/icon.svelte';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import { ActionQueryParameterValue, AppRoute, QueryParameter } from '$lib/constants';
import { handleError } from '$lib/utils/handle-error';
import { getAllPeople, getPerson, mergePerson, type PersonResponseDto } from '@immich/sdk';
import { mdiCallMerge, mdiMerge, mdiSwapHorizontal } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import { flip } from 'svelte/animate';
import { quintOut } from 'svelte/easing';
import { fly } from 'svelte/transition';
@@ -16,8 +18,6 @@
import { NotificationType, notificationController } from '../shared-components/notification/notification';
import FaceThumbnail from './face-thumbnail.svelte';
import PeopleList from './people-list.svelte';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import { t } from 'svelte-i18n';
interface Props {
person: PersonResponseDto;
@@ -99,7 +99,7 @@
<section
transition:fly={{ y: 500, duration: 100, easing: quintOut }}
class="absolute start-0 top-0 z-[9999] h-full w-full bg-immich-bg dark:bg-immich-dark-bg"
class="absolute start-0 top-0 z-[9999] h-full w-full bg-light"
>
<ControlAppBar onClose={onBack}>
{#snippet leading()}
@@ -117,7 +117,7 @@
>
{/snippet}
</ControlAppBar>
<section class="bg-immich-bg px-[70px] pt-[100px] dark:bg-immich-dark-bg">
<section class="px-[70px] pt-[100px]">
<section id="merge-face-selector">
<div class="mb-10 h-[200px] place-content-center place-items-center">
<p class="mb-4 text-center uppercase dark:text-white">{$t('choose_matching_people_to_merge')}</p>

2
web/src/lib/components/faces-page/people-search.svelte
View File

@@ -50,7 +50,7 @@
searchedPeopleLocal = $bindable(),
type,
numberPeopleToSearch = maximumLengthSearchPeople,
inputClass = 'w-full gap-2 bg-immich-bg dark:bg-immich-dark-bg',
inputClass = 'w-full gap-2',
showLoadingSpinner = $bindable(false),
placeholder = $t('name_or_nickname'),
onReset = () => {},

20
web/src/lib/components/faces-page/person-side-panel.svelte
View File

@@ -1,34 +1,34 @@
<script lang="ts">
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
import { timeBeforeShowLoadingSpinner } from '$lib/constants';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { photoViewerImgElement } from '$lib/stores/assets-store.svelte';
import { boundingBoxesArray } from '$lib/stores/people.store';
import { websocketEvents } from '$lib/stores/websocket';
import { getPeopleThumbnailUrl, handlePromiseError } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
import { zoomImageToBase64 } from '$lib/utils/people-utils';
import { getPersonNameWithHiddenValue } from '$lib/utils/person';
import {
AssetTypeEnum,
createPerson,
deleteFace,
getFaces,
reassignFacesById,
AssetTypeEnum,
type AssetFaceResponseDto,
type PersonResponseDto,
deleteFace,
} from '@immich/sdk';
import Icon from '$lib/components/elements/icon.svelte';
import { mdiAccountOff, mdiArrowLeftThin, mdiPencil, mdiRestart, mdiTrashCan } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import { linear } from 'svelte/easing';
import { fly } from 'svelte/transition';
import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
import { NotificationType, notificationController } from '../shared-components/notification/notification';
import AssignFaceSidePanel from './assign-face-side-panel.svelte';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import { zoomImageToBase64 } from '$lib/utils/people-utils';
import { photoViewerImgElement } from '$lib/stores/assets-store.svelte';
import { t } from 'svelte-i18n';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
interface Props {
assetId: string;
@@ -194,7 +194,7 @@
<section
transition:fly={{ x: 360, duration: 100, easing: linear }}
class="absolute top-0 z-[2000] h-full w-[360px] overflow-x-hidden p-2 bg-immich-bg dark:bg-immich-dark-bg dark:text-immich-dark-fg"
class="absolute top-0 z-[2000] h-full w-[360px] overflow-x-hidden p-2 dark:text-immich-dark-fg bg-light"
>
<div class="flex place-items-center justify-between gap-2">
<div class="flex items-center gap-2">

6
web/src/lib/components/faces-page/unmerge-face-selector.svelte
View File

@@ -11,6 +11,7 @@
} from '@immich/sdk';
import { mdiMerge, mdiPlus } from '@mdi/js';
import { onMount, type Snippet } from 'svelte';
import { t } from 'svelte-i18n';
import { quintOut } from 'svelte/easing';
import { fly } from 'svelte/transition';
import Button from '../elements/buttons/button.svelte';
@@ -19,7 +20,6 @@
import { NotificationType, notificationController } from '../shared-components/notification/notification';
import FaceThumbnail from './face-thumbnail.svelte';
import PeopleList from './people-list.svelte';
import { t } from 'svelte-i18n';
interface Props {
assetIds: string[];
@@ -120,7 +120,7 @@
<section
transition:fly={{ y: 500, duration: 100, easing: quintOut }}
class="absolute start-0 top-0 z-[9999] h-full w-full bg-immich-bg dark:bg-immich-dark-bg"
class="absolute start-0 top-0 z-[9999] h-full w-full bg-light"
>
<ControlAppBar {onClose}>
{#snippet leading()}
@@ -161,7 +161,7 @@
{/snippet}
</ControlAppBar>
{@render merge?.()}
<section class="bg-immich-bg px-[70px] pt-[100px] dark:bg-immich-dark-bg">
<section class="px-[70px] pt-[100px]">
<section id="merge-face-selector relative">
{#if selectedPerson !== null}
<div class="mb-10 h-[200px] place-content-center place-items-center">