1
0
mirror of https://github.com/immich-app/immich.git synced 2024-12-25 10:43:13 +02:00

Moved the selectable button into its own component.

* While adding in that no highligh of the button appears when it is empty the code in the duplicate-asset got quite crowded. I therefore moved the selectable button that holds the metadata into its own component.
This commit is contained in:
Toni 2024-11-27 22:05:23 +01:00
parent 3353134ab7
commit 024bde9a49
No known key found for this signature in database
GPG Key ID: 159A266B4318F208
2 changed files with 77 additions and 46 deletions

View File

@ -0,0 +1,48 @@
<script lang="ts">
import type { Snippet } from 'svelte';
interface Props {
displayedData: any;
isSelected: boolean;
isSelectedEqualOriginal: boolean;
selectedData: any;
slotHeight?: number;
onClick: () => void;
children?: Snippet;
}
let { displayedData, isSelected, isSelectedEqualOriginal, selectedData, slotHeight, onClick, children }: Props =
$props();
let button = $state<HTMLButtonElement>();
export function getHeight(): number {
if (button) {
return button.getBoundingClientRect().height;
}
return 0;
}
const getClasses = () => {
let classes = 'rounded-xl';
if (displayedData) {
classes += ' dark:hover:bg-gray-300';
classes += isSelected ? ' hover:bg-gray-300' : ' dark:hover:bg-gray-300 hover:bg-gray-500';
}
if (isSelected && selectedData !== null && !isSelectedEqualOriginal) {
classes += ' bg-red-300/90';
}
return classes;
};
</script>
<button
bind:this={button}
disabled={!displayedData}
type="button"
style="padding: 3px; {slotHeight ? 'height: ' + slotHeight + 'px' : ''}"
class={getClasses()}
onclick={onClick}
>
{@render children?.()}
</button>

View File

@ -11,6 +11,7 @@
import { locale } from '$lib/stores/preferences.store'; import { locale } from '$lib/stores/preferences.store';
import type { SelectedSyncData } from '$lib/components/utilities-page/duplicates/duplicates-compare-control.svelte'; import type { SelectedSyncData } from '$lib/components/utilities-page/duplicates/duplicates-compare-control.svelte';
import { DateTime } from 'luxon'; import { DateTime } from 'luxon';
import DuplicateAssetSelection from '$lib/components/utilities-page/duplicates/duplicate-asset-selection.svelte';
interface Props { interface Props {
asset: AssetResponseDto; asset: AssetResponseDto;
@ -56,31 +57,16 @@
selectedSyncData.isFavorite = selectedSyncData.isFavorite || asset.isFavorite; selectedSyncData.isFavorite = selectedSyncData.isFavorite || asset.isFavorite;
selectedSyncData.isArchived = selectedSyncData.isArchived || asset.isArchived; selectedSyncData.isArchived = selectedSyncData.isArchived || asset.isArchived;
let descriptionItem = $state<HTMLButtonElement>(); let descriptionItem = $state<DuplicateAssetSelection>();
let locationItem = $state<HTMLButtonElement>(); let locationItem = $state<DuplicateAssetSelection>();
let albums: AlbumResponseDto[] = $state([]); let albums: AlbumResponseDto[] = $state([]);
onMount(async () => { onMount(async () => {
setDescriptionHeight(descriptionItem.getBoundingClientRect().height); setDescriptionHeight(descriptionItem.getHeight());
setLocationHeight(locationItem.getBoundingClientRect().height); setLocationHeight(locationItem.getHeight());
albums = await getAllAlbums({ assetId: asset.id }); albums = await getAllAlbums({ assetId: asset.id });
setAlbums(albums); setAlbums(albums);
}); });
const getBackgroundColor = (isSelected: boolean, syncDataExist: boolean, syncIsAssetData: boolean) => {
let color = 'rounded-xl dark:hover:bg-gray-300';
color += isSelected ? ' hover:bg-gray-300' : ' hover:bg-gray-500';
if (isSelected) {
if (syncDataExist && !syncIsAssetData) {
color += ' bg-red-300/90';
}
} else {
if (syncIsAssetData) {
color += ' bg-green-400/90';
}
}
return color;
};
let timeZone = $derived(asset.exifInfo?.timeZone); let timeZone = $derived(asset.exifInfo?.timeZone);
let dateTime = $derived( let dateTime = $derived(
timeZone && asset.exifInfo?.dateTimeOriginal timeZone && asset.exifInfo?.dateTimeOriginal
@ -217,11 +203,12 @@
{$t('in_albums', { values: { count: displayedAlbums.length } })} {$t('in_albums', { values: { count: displayedAlbums.length } })}
{/if} {/if}
</span> </span>
<button <DuplicateAssetSelection
type="button" {isSelected}
style="padding: 3px;" selectedData={selectedSyncData.dateTime}
class={getBackgroundColor(isSelected, selectedSyncData?.dateTime, selectedSyncData.dateTime?.ts === dateTime?.ts)} displayedData={displayedDateTime}
onclick={() => onSelectDate(displayedDateTime)} isSelectedEqualOriginal={selectedSyncData.dateTime?.ts === dateTime?.ts}
onClick={() => onSelectDate(displayedDateTime)}
> >
{displayedDateTime.toLocaleString( {displayedDateTime.toLocaleString(
{ {
@ -240,18 +227,16 @@
}, },
{ locale: $locale }, { locale: $locale },
)} )}
</button> </DuplicateAssetSelection>
<button <DuplicateAssetSelection
type="button"
bind:this={locationItem} bind:this={locationItem}
style="padding: 3px; {locationHeight ? 'height: ' + locationHeight + 'px' : ''}" {isSelected}
class={getBackgroundColor( slotHeight={locationHeight}
isSelected, selectedData={selectedSyncData?.location}
selectedSyncData?.location !== null, displayedData={displayedLocation?.city && displayedLocation?.state && displayedLocation?.country}
selectedSyncData?.location?.latitude === location.latitude && isSelectedEqualOriginal={selectedSyncData?.location?.latitude === location.latitude &&
selectedSyncData?.location?.longitude === location.longitude, selectedSyncData?.location?.longitude === location.longitude}
)} onClick={() => onSelectLocation(displayedLocation)}
onclick={() => onSelectLocation(displayedLocation)}
> >
{#if displayedLocation?.city} {#if displayedLocation?.city}
<div class="text-sm"> <div class="text-sm">
@ -264,19 +249,17 @@
{#if displayedLocation?.country} {#if displayedLocation?.country}
<p>{displayedLocation.country}</p> <p>{displayedLocation.country}</p>
{/if} {/if}
</button> </DuplicateAssetSelection>
<button <DuplicateAssetSelection
type="button"
bind:this={descriptionItem} bind:this={descriptionItem}
style="padding: 3px; {descriptionHeight ? 'height: ' + descriptionHeight + 'px' : ''}" {isSelected}
class={getBackgroundColor( slotHeight={descriptionHeight}
isSelected, selectedData={selectedSyncData.description}
selectedSyncData?.description !== null, displayedData={displayedDescription}
selectedSyncData?.description === description, isSelectedEqualOriginal={selectedSyncData?.description === description}
)} onClick={() => onSelectDescription(displayedDescription)}
onclick={() => onSelectDescription(displayedDescription)}
> >
{displayedDescription} {displayedDescription}
</button> </DuplicateAssetSelection>
</div> </div>
</div> </div>