This commit is contained in:
rehlert committed
1 parent
ea21fc000f
commit
09cc5c06fb
7 files changed
+402
-58
No files matched your search
@@ -103,9 +103,9 @@
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed border-primary-300 bg-white px-6 py-10 text-center transition focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 {isDragging
|
||||
? 'border-primary-400 bg-primary-100/60'
|
||||
: ''} {className}"
|
||||
class="flex w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed px-6 py-10 text-center transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 {isDragging
|
||||
? 'scale-[1.02] border-primary bg-primary-100/70 shadow-lg ring-4 ring-primary/25'
|
||||
: 'border-primary-300 bg-white hover:border-primary-400 hover:bg-primary-50/60'} {className}"
|
||||
aria-label={ariaLabel}
|
||||
data-dropzone-ready={fileInput ? 'true' : 'false'}
|
||||
onclick={openFileDialog}
|
||||
@@ -116,7 +116,11 @@
|
||||
>
|
||||
{#if icon}
|
||||
{@const IconComponent = icon}
|
||||
<IconComponent class="h-10 w-10 text-primary" />
|
||||
<IconComponent
|
||||
class="h-10 w-10 text-primary transition-transform duration-150 {isDragging
|
||||
? 'scale-125'
|
||||
: ''}"
|
||||
/>
|
||||
{/if}
|
||||
<div class="flex flex-row items-baseline justify-center gap-2">
|
||||
<span class="text-[18px] font-bold text-primary-900">{label}</span>
|
||||
@@ -125,6 +129,9 @@
|
||||
{#if sublabel}
|
||||
<p class="text-[13px] text-primary-700">{sublabel}</p>
|
||||
{/if}
|
||||
{#if isDragging}
|
||||
<p class="text-[13px] font-bold text-primary">Jetzt loslassen zum Hinzufügen</p>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
{#if rejectionMessage}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
import type { PdfThumbnail } from '$lib/pdf-thumbnails';
|
||||
import { cn } from '$lib/utils';
|
||||
|
||||
@@ -8,6 +9,8 @@
|
||||
onPageClick?: (pageNumber: number) => void;
|
||||
thumbnailWidth?: number;
|
||||
class?: string;
|
||||
pageActions?: Snippet<[pageNumber: number]>;
|
||||
cardClass?: (pageNumber: number) => string;
|
||||
};
|
||||
|
||||
let {
|
||||
@@ -15,7 +18,9 @@
|
||||
selectedPages = new Set<number>(),
|
||||
onPageClick,
|
||||
thumbnailWidth = 120,
|
||||
class: className = ''
|
||||
class: className = '',
|
||||
pageActions,
|
||||
cardClass
|
||||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
@@ -25,30 +30,80 @@
|
||||
>
|
||||
{#each thumbnails as thumb}
|
||||
{@const isSelected = selectedPages.has(thumb.pageNumber)}
|
||||
<button
|
||||
type="button"
|
||||
class={cn(
|
||||
'group relative flex flex-col items-center gap-2 rounded-xl border-2 p-2 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400',
|
||||
isSelected
|
||||
? 'border-primary bg-primary/5'
|
||||
: 'border-transparent hover:border-primary-200 hover:bg-primary-50/50'
|
||||
)}
|
||||
onclick={() => onPageClick?.(thumb.pageNumber)}
|
||||
>
|
||||
<img
|
||||
src={thumb.imageUrl}
|
||||
alt="Seite {thumb.pageNumber}"
|
||||
class="w-full rounded border border-primary-100 bg-white object-contain"
|
||||
style="aspect-ratio: {thumb.width} / {thumb.height};"
|
||||
/>
|
||||
<span class="text-[12px] font-medium text-primary-700">Seite {thumb.pageNumber}</span>
|
||||
{#if isSelected}
|
||||
<div
|
||||
class="absolute top-1 right-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-white"
|
||||
>
|
||||
✓
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
{#if onPageClick}
|
||||
<button
|
||||
type="button"
|
||||
class={cn(
|
||||
'group relative flex flex-col items-center gap-2 rounded-xl border-2 p-2 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400',
|
||||
isSelected
|
||||
? 'border-primary bg-primary/5'
|
||||
: 'border-transparent hover:border-primary-200 hover:bg-primary-50/50'
|
||||
)}
|
||||
onclick={() => onPageClick(thumb.pageNumber)}
|
||||
>
|
||||
{#if cardClass}
|
||||
<div
|
||||
class={cn(
|
||||
'flex aspect-square w-full items-center justify-center',
|
||||
cardClass(thumb.pageNumber)
|
||||
)}
|
||||
>
|
||||
<img
|
||||
src={thumb.imageUrl}
|
||||
alt="Seite {thumb.pageNumber}"
|
||||
class="max-h-full max-w-full rounded border border-primary-100 bg-white object-contain"
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
<img
|
||||
src={thumb.imageUrl}
|
||||
alt="Seite {thumb.pageNumber}"
|
||||
class="w-full rounded border border-primary-100 bg-white object-contain"
|
||||
style="aspect-ratio: {thumb.width} / {thumb.height};"
|
||||
/>
|
||||
{/if}
|
||||
<span class="text-[12px] font-medium text-primary-700">Seite {thumb.pageNumber}</span>
|
||||
{#if isSelected}
|
||||
<div
|
||||
class="absolute top-1 right-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-white"
|
||||
>
|
||||
✓
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
{:else}
|
||||
<div
|
||||
class={cn(
|
||||
'group relative flex flex-col items-center gap-2 rounded-xl border-2 border-transparent p-2',
|
||||
isSelected && 'border-primary bg-primary/5'
|
||||
)}
|
||||
>
|
||||
{#if cardClass}
|
||||
<div
|
||||
class={cn(
|
||||
'flex aspect-square w-full items-center justify-center',
|
||||
cardClass(thumb.pageNumber)
|
||||
)}
|
||||
>
|
||||
<img
|
||||
src={thumb.imageUrl}
|
||||
alt="Seite {thumb.pageNumber}"
|
||||
class="max-h-full max-w-full rounded border border-primary-100 bg-white object-contain"
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
<img
|
||||
src={thumb.imageUrl}
|
||||
alt="Seite {thumb.pageNumber}"
|
||||
class="w-full rounded border border-primary-100 bg-white object-contain"
|
||||
style="aspect-ratio: {thumb.width} / {thumb.height};"
|
||||
/>
|
||||
{/if}
|
||||
<span class="text-[12px] font-medium text-primary-700">Seite {thumb.pageNumber}</span>
|
||||
{#if pageActions}
|
||||
{@render pageActions(thumb.pageNumber)}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
@@ -48,6 +48,12 @@ export const tools: Tool[] = [
|
||||
description: 'Entfernen Sie Seiten aus einem PDF.',
|
||||
icon: 'scissors'
|
||||
},
|
||||
{
|
||||
slug: 'rotate',
|
||||
title: 'Seiten drehen',
|
||||
description: 'Drehen Sie einzelne oder alle Seiten eines PDFs.',
|
||||
icon: 'rotate-cw'
|
||||
},
|
||||
{
|
||||
slug: 'merge',
|
||||
title: 'PDFs zusammenfügen',
|
||||
|
||||
Reference in new issue
Block a user