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 1

feat(web): add Exif-Rating (#11580)

Browse source 
* Add Exif-Rating

* Integrate star rating as own component

* Add e2e tests for rating and validation

* Rename component and async handleChangeRating

* Display rating can be enabled in app settings

* Correct i18n reference

Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>

* Star rating: change from slider to buttons

* Star rating for clarity

* Design updates.

* Renaming and code optimization

* chore: clean up

* chore: e2e formatting

* light mode border and default value

---------

Co-authored-by: Christoph Suter <christoph@suter-burri.ch>
Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Co-authored-by: Mert <101130780+mertalev@users.noreply.github.com>
Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Christoph Suter 2024-08-09 19:45:52 +02:00 • committed by GitHub
parent b1587a5dee
commit f33dbdfe9a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
37 changed files with 599 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

50
web/src/lib/components/shared-components/star-rating.svelte Normal file
View file

@ -0,0 +1,50 @@
<script lang="ts">
import Icon from '$lib/components/elements/icon.svelte';
export let count = 5;
export let rating: number;
export let readOnly = false;
export let onRating: (rating: number) => void | undefined;
let hoverRating = 0;
const starIcon =
'M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z';
const handleSelect = (newRating: number) => {
if (readOnly) {
return;
}
if (newRating === rating) {
newRating = 0;
}
rating = newRating;
onRating?.(rating);
};
</script>
<div role="presentation" tabindex="-1" on:mouseout={() => (hoverRating = 0)} on:blur|preventDefault>
{#each { length: count } as _, index}
{@const value = index + 1}
{@const filled = hoverRating >= value || (hoverRating === 0 && rating >= value)}
<button
type="button"
on:click={() => handleSelect(value)}
on:mouseover={() => (hoverRating = value)}
on:focus|preventDefault={() => (hoverRating = value)}
class="shadow-0 outline-0 text-immich-primary dark:text-immich-dark-primary"
disabled={readOnly}
>
<Icon
path={starIcon}
size="1.5em"
strokeWidth={1}
color={filled ? 'currentcolor' : 'transparent'}
strokeColor={filled ? 'currentcolor' : '#c1cce8'}
/>
</button>
{/each}
</div>