mirror of
https://github.com/immich-app/immich
synced 2025-11-14 17:36:12 +00:00
refactor: move more elements (#22093)
This commit is contained in:
Jason Rasmussen
GitHub
parent
7ce1d73c20
commit
3f4b6a8e7c
11 changed files with 12 additions and 12 deletions
|
|
@ -5,17 +5,17 @@
|
|||
NotificationType,
|
||||
notificationController,
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import Portal from '$lib/components/shared-components/portal/portal.svelte';
|
||||
import { AssetAction } from '$lib/constants';
|
||||
import Portal from '$lib/elements/Portal.svelte';
|
||||
import { showDeleteModal } from '$lib/stores/preferences.store';
|
||||
import { featureFlags } from '$lib/stores/server-config.store';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { toTimelineAsset } from '$lib/utils/timeline-util';
|
||||
import { deleteAssets, type AssetResponseDto } from '@immich/sdk';
|
||||
import { IconButton } from '@immich/ui';
|
||||
import { mdiDeleteForeverOutline, mdiDeleteOutline } from '@mdi/js';
|
||||
import { t } from 'svelte-i18n';
|
||||
import type { OnAction, PreAction } from './action';
|
||||
import { IconButton } from '@immich/ui';
|
||||
|
||||
interface Props {
|
||||
asset: AssetResponseDto;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts">
|
||||
import ChangeLocation from '$lib/components/shared-components/change-location.svelte';
|
||||
import Portal from '$lib/components/shared-components/portal/portal.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 { mdiMapMarkerOutline, mdiPencil } from '@mdi/js';
|
||||
|
|
|
|||
|
|
@ -1,48 +0,0 @@
|
|||
<script lang="ts">
|
||||
interface Props {
|
||||
height: number;
|
||||
title: string;
|
||||
}
|
||||
|
||||
let { height = 0, title }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="overflow-clip" style:height={height + 'px'}>
|
||||
<div
|
||||
class="flex pt-7 pb-5 h-6 place-items-center text-xs font-medium text-immich-fg bg-light dark:text-immich-dark-fg md:text-sm"
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
<div
|
||||
class="animate-pulse absolute h-full ms-[10px] me-[10px]"
|
||||
style:width="calc(100% - 20px)"
|
||||
data-skeleton="true"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
[data-skeleton] {
|
||||
background-image: url('/light_skeleton.png');
|
||||
background-repeat: repeat;
|
||||
background-size: 235px, 235px;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
[data-skeleton] {
|
||||
background-size: 100px, 100px;
|
||||
}
|
||||
}
|
||||
:global(.dark) [data-skeleton] {
|
||||
background-image: url('/dark_skeleton.png');
|
||||
}
|
||||
@keyframes delayedVisibility {
|
||||
to {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
[data-skeleton] {
|
||||
visibility: hidden;
|
||||
animation:
|
||||
0s linear 0.1s forwards delayedVisibility,
|
||||
pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
import type { Action } from '$lib/components/asset-viewer/actions/action';
|
||||
import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
|
||||
import { AppRoute, AssetAction } from '$lib/constants';
|
||||
import Portal from '$lib/elements/Portal.svelte';
|
||||
import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
|
||||
import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
|
||||
import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
|
|
@ -24,7 +25,6 @@
|
|||
import { t } from 'svelte-i18n';
|
||||
import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
|
||||
import DeleteAssetDialog from '../../photos-page/delete-asset-dialog.svelte';
|
||||
import Portal from '../portal/portal.svelte';
|
||||
|
||||
interface Props {
|
||||
initialAssetId?: string;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import Portal from '$lib/components/shared-components/portal/portal.svelte';
|
||||
import Portal from '$lib/elements/Portal.svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
import { flip } from 'svelte/animate';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
|
|
|
|||
|
|
@ -1,80 +0,0 @@
|
|||
<script module lang="ts">
|
||||
import { handlePromiseError } from '$lib/utils';
|
||||
import { tick, type Snippet } from 'svelte';
|
||||
|
||||
/**
|
||||
* Usage: <div use:portal={'css selector'}> or <div use:portal={document.body}>
|
||||
*/
|
||||
export function portal(element: HTMLElement, target: HTMLElement | string = 'body') {
|
||||
let targetElement;
|
||||
async function update(newTarget: HTMLElement | string) {
|
||||
target = newTarget;
|
||||
if (typeof target === 'string') {
|
||||
targetElement = document.querySelector(target);
|
||||
if (targetElement === null) {
|
||||
await tick();
|
||||
targetElement = document.querySelector(target);
|
||||
}
|
||||
if (targetElement === null) {
|
||||
throw new Error(`No element found matching css selector: "${target}"`);
|
||||
}
|
||||
} else if (target instanceof HTMLElement) {
|
||||
targetElement = target;
|
||||
} else {
|
||||
throw new TypeError(
|
||||
`Unknown portal target type: ${
|
||||
target === null ? 'null' : typeof target
|
||||
}. Allowed types: string (CSS selector) or HTMLElement.`,
|
||||
);
|
||||
}
|
||||
targetElement.append(element);
|
||||
element.hidden = false;
|
||||
}
|
||||
|
||||
function destroy() {
|
||||
if (element.parentNode) {
|
||||
element.remove();
|
||||
}
|
||||
}
|
||||
|
||||
handlePromiseError(update(target));
|
||||
return {
|
||||
update,
|
||||
destroy,
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--
|
||||
@component
|
||||
Allow rendering a component in a different part of the DOM.
|
||||
|
||||
### Props
|
||||
- `target` - HTMLElement i.e "body", "html", default is "body"
|
||||
|
||||
### Default Slot
|
||||
Used for every occurrence of an HTML tag in a message
|
||||
- `tag` - Name of the tag
|
||||
|
||||
@example
|
||||
```html
|
||||
<Portal target="body">
|
||||
<p>Your component in here</p>
|
||||
</Portal>
|
||||
```
|
||||
-->
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
/**
|
||||
* DOM Element or CSS Selector
|
||||
*/
|
||||
target?: HTMLElement | string;
|
||||
children?: Snippet;
|
||||
}
|
||||
|
||||
let { target = 'body', children }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div use:portal={target} hidden>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
|
||||
import Portal from '$lib/components/shared-components/portal/portal.svelte';
|
||||
import SupporterBadge from '$lib/components/shared-components/side-bar/supporter-badge.svelte';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import Icon from '$lib/elements/Icon.svelte';
|
||||
import Portal from '$lib/elements/Portal.svelte';
|
||||
import PurchaseModal from '$lib/modals/PurchaseModal.svelte';
|
||||
import { purchaseStore } from '$lib/stores/purchase.store';
|
||||
import { preferences } from '$lib/stores/user.store';
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
import { resizeObserver, type OnResizeCallback } from '$lib/actions/resize-observer';
|
||||
import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
|
||||
import type { Action } from '$lib/components/asset-viewer/actions/action';
|
||||
import Skeleton from '$lib/components/photos-page/skeleton.svelte';
|
||||
import type { AbsoluteResult, RelativeResult } from '$lib/components/shared-components/change-date.svelte';
|
||||
import ChangeDate from '$lib/components/shared-components/change-date.svelte';
|
||||
import Scrubber from '$lib/components/timeline/Scrubber.svelte';
|
||||
|
|
@ -13,6 +12,8 @@
|
|||
setFocusTo as setFocusToInit,
|
||||
} from '$lib/components/timeline/actions/focus-actions';
|
||||
import { AppRoute, AssetAction } from '$lib/constants';
|
||||
import Portal from '$lib/elements/Portal.svelte';
|
||||
import Skeleton from '$lib/elements/Skeleton.svelte';
|
||||
import { authManager } from '$lib/managers/auth-manager.svelte';
|
||||
import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
|
||||
import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
|
||||
|
|
@ -37,9 +38,8 @@
|
|||
import { DateTime } from 'luxon';
|
||||
import { onMount, type Snippet } from 'svelte';
|
||||
import type { UpdatePayload } from 'vite';
|
||||
import TimelineDateGroup from './TimelineDateGroup.svelte';
|
||||
import DeleteAssetDialog from '../photos-page/delete-asset-dialog.svelte';
|
||||
import Portal from '../shared-components/portal/portal.svelte';
|
||||
import TimelineDateGroup from './TimelineDateGroup.svelte';
|
||||
|
||||
interface Props {
|
||||
isSelectionMode?: boolean;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { shortcuts } from '$lib/actions/shortcut';
|
||||
import Portal from '$lib/components/shared-components/portal/portal.svelte';
|
||||
import DuplicateAsset from '$lib/components/utilities-page/duplicates/duplicate-asset.svelte';
|
||||
import Portal from '$lib/elements/Portal.svelte';
|
||||
import { authManager } from '$lib/managers/auth-manager.svelte';
|
||||
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
|
||||
import { handlePromiseError } from '$lib/utils';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue