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

feat(web): improve range selection (#3193)

Browse source 
* Improve range selection

* Add comments

* Add PR feedback

* Remove focus outline from select asset button

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Sergey Kondrikov 2023-07-12 05:12:19 +03:00 • committed by GitHub
parent ea64fdd7b4
commit 93462aafbc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 163 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

66
web/src/lib/components/photos-page/asset-date-group.svelte
View file

@ -9,15 +9,15 @@
} from '$lib/stores/asset-interaction.store';
import { assetStore } from '$lib/stores/assets.store';
import { locale } from '$lib/stores/preferences.store';
import { getAssetRatio } from '$lib/utils/asset-utils';
import { formatGroupTitle, splitBucketIntoDateGroups } from '$lib/utils/timeline-util';
import type { AssetResponseDto } from '@api';
import justifiedLayout from 'justified-layout';
import lodash from 'lodash-es';
import { DateTime } from 'luxon';
import { createEventDispatcher } from 'svelte';
import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
import CircleOutline from 'svelte-material-icons/CircleOutline.svelte';
import { fly } from 'svelte/transition';
import { DateTime, Interval } from 'luxon';
import { getAssetRatio } from '$lib/utils/asset-utils';
import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
export let assets: AssetResponseDto[];
@ -26,13 +26,6 @@
export let isAlbumSelectionMode = false;
export let viewportWidth: number;
const groupDateFormat: Intl.DateTimeFormatOptions = {
weekday: 'short',
month: 'short',
day: 'numeric',
year: 'numeric',
};
const dispatch = createEventDispatcher();
let isMouseOverGroup = false;
@ -45,11 +38,7 @@
width: number;
}
$: assetsGroupByDate = lodash
.chain(assets)
.groupBy((a) => new Date(a.fileCreatedAt).toLocaleDateString($locale, groupDateFormat))
.sortBy((group) => assets.indexOf(group[0]))
.value();
$: assetsGroupByDate = splitBucketIntoDateGroups(assets, $locale);
$: geometry = (() => {
const geometry = [];
@ -131,17 +120,7 @@
assetsInDateGroup: AssetResponseDto[],
dateGroupTitle: string,
) => {
if ($selectedAssets.has(asset)) {
for (const candidate of $assetSelectionCandidates || []) {
assetInteractionStore.removeAssetFromMultiselectGroup(candidate);
}
assetInteractionStore.removeAssetFromMultiselectGroup(asset);
} else {
for (const candidate of $assetSelectionCandidates || []) {
assetInteractionStore.addAssetToMultiselectGroup(candidate);
}
assetInteractionStore.addAssetToMultiselectGroup(asset);
}
dispatch('selectAssets', { asset });
// Check if all assets are selected in a group to toggle the group selection's icon
let selectedAssetsInGroupCount = assetsInDateGroup.filter((asset) => $selectedAssets.has(asset)).length;
@ -162,41 +141,6 @@
dispatch('selectAssetCandidates', { asset });
}
};
const formatGroupTitle = (date: DateTime): string => {
const today = DateTime.now().startOf('day');
// Today
if (today.hasSame(date, 'day')) {
return 'Today';
}
// Yesterday
if (Interval.fromDateTimes(date, today).length('days') == 1) {
return 'Yesterday';
}
// Last week
if (Interval.fromDateTimes(date, today).length('weeks') < 1) {
return date.toLocaleString({ weekday: 'long' });
}
// This year
if (today.hasSame(date, 'year')) {
return date.toLocaleString({
weekday: 'short',
month: 'short',
day: 'numeric',
});
}
return date.toLocaleString({
weekday: 'short',
month: 'short',
day: 'numeric',
year: 'numeric',
});
};
</script>
<section