immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-20 17:25:35 +03:00
Code Issues Packages Projects Releases 18 Wiki Activity

chore(web): migration svelte 5 syntax (#13883)

Browse Source
This commit is contained in:
Alex
2024-11-14 08:43:25 -06:00
committed by GitHub
parent 9203a61709
commit 0b3742cf13
310 changed files with 6435 additions and 4176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/lib/components/asset-viewer/editor/crop-tool/crop-tool.svelte
View File

@@ -16,7 +16,7 @@
import { tick } from 'svelte';
import CropPreset from './crop-preset.svelte';
$: rotateHorizontal = [90, 270].includes($normaizedRorateDegrees);
let rotateHorizontal = $derived([90, 270].includes($normaizedRorateDegrees));
const icon_16_9 = `M200-280q-33 0-56.5-23.5T120-360v-240q0-33 23.5-56.5T200-680h560q33 0 56.5 23.5T840-600v240q0 33-23.5 56.5T760-280H200Zm0-80h560v-240H200v240Zm0 0v-240 240Z`;
const icon_4_3 = `M19 5H5c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 12H5V7h14v10z`;
const icon_3_2 = `M200-240q-33 0-56.5-23.5T120-320v-320q0-33 23.5-56.5T200-720h560q33 0 56.5 23.5T840-640v320q0 33-23.5 56.5T760-240H200Zm0-80h560v-320H200v320Zm0 0v-320 320Z`;
@@ -92,14 +92,17 @@
},
];
let selectedSize: CropAspectRatio = 'free';
$cropAspectRatio = selectedSize;
let selectedSize: CropAspectRatio = $state('free');
$: sizesRows = [
$effect(() => {
$cropAspectRatio = selectedSize;
});
let sizesRows = $derived([
sizes.filter((s) => s.rotate === false),
sizes.filter((s) => s.rotate === undefined),
sizes.filter((s) => s.rotate === true),
];
]);
async function rotate(clock: boolean) {
rotateDegrees.update((v) => {
@@ -145,7 +148,7 @@
<h2>{$t('editor_crop_tool_h2_rotation').toUpperCase()}</h2>
</div>
<ul class="flex-wrap flex-row flex gap-x-6 gap-y-4 justify-center">
<li><CircleIconButton title={$t('anti_clockwise')} on:click={() => rotate(false)} icon={mdiRotateLeft} /></li>
<li><CircleIconButton title={$t('clockwise')} on:click={() => rotate(true)} icon={mdiRotateRight} /></li>
<li><CircleIconButton title={$t('anti_clockwise')} onclick={() => rotate(false)} icon={mdiRotateLeft} /></li>
<li><CircleIconButton title={$t('clockwise')} onclick={() => rotate(true)} icon={mdiRotateRight} /></li>
</ul>
</div>