feat(dropzone): replace upload icon with multi-file icon and clearer hint text #80
@@ -268,7 +268,7 @@
|
|||||||
"doc_panel_discussion_annotation_tab": "Annotation · Seite {page}",
|
"doc_panel_discussion_annotation_tab": "Annotation · Seite {page}",
|
||||||
"pdf_annotations_show": "Annotierungen anzeigen",
|
"pdf_annotations_show": "Annotierungen anzeigen",
|
||||||
"pdf_annotations_hide": "Annotierungen verbergen",
|
"pdf_annotations_hide": "Annotierungen verbergen",
|
||||||
"upload_drop_hint": "Dateien ablegen oder auswählen",
|
"upload_drop_hint": "Einzeln oder mehrere Dateien auf einmal hochladen",
|
||||||
"upload_accepted_types": "PDF, JPEG, PNG, TIFF",
|
"upload_accepted_types": "PDF, JPEG, PNG, TIFF",
|
||||||
"upload_filename_hint": "Tipp: 2024-03-15_Mueller_Hans.pdf → Datum und Absender werden vorausgefüllt",
|
"upload_filename_hint": "Tipp: 2024-03-15_Mueller_Hans.pdf → Datum und Absender werden vorausgefüllt",
|
||||||
"upload_success": "{count} Dokument(e) erstellt",
|
"upload_success": "{count} Dokument(e) erstellt",
|
||||||
|
|||||||
@@ -268,7 +268,7 @@
|
|||||||
"doc_panel_discussion_annotation_tab": "Annotation · Page {page}",
|
"doc_panel_discussion_annotation_tab": "Annotation · Page {page}",
|
||||||
"pdf_annotations_show": "Show annotations",
|
"pdf_annotations_show": "Show annotations",
|
||||||
"pdf_annotations_hide": "Hide annotations",
|
"pdf_annotations_hide": "Hide annotations",
|
||||||
"upload_drop_hint": "Drop files or click to select",
|
"upload_drop_hint": "Drop one or multiple files at once",
|
||||||
"upload_accepted_types": "PDF, JPEG, PNG, TIFF",
|
"upload_accepted_types": "PDF, JPEG, PNG, TIFF",
|
||||||
"upload_filename_hint": "Tip: 2024-03-15_Mueller_Hans.pdf → date and sender pre-filled",
|
"upload_filename_hint": "Tip: 2024-03-15_Mueller_Hans.pdf → date and sender pre-filled",
|
||||||
"upload_success": "{count} document(s) created",
|
"upload_success": "{count} document(s) created",
|
||||||
|
|||||||
@@ -268,7 +268,7 @@
|
|||||||
"doc_panel_discussion_annotation_tab": "Anotación · Página {page}",
|
"doc_panel_discussion_annotation_tab": "Anotación · Página {page}",
|
||||||
"pdf_annotations_show": "Mostrar anotaciones",
|
"pdf_annotations_show": "Mostrar anotaciones",
|
||||||
"pdf_annotations_hide": "Ocultar anotaciones",
|
"pdf_annotations_hide": "Ocultar anotaciones",
|
||||||
"upload_drop_hint": "Soltar archivos o hacer clic para seleccionar",
|
"upload_drop_hint": "Uno o varios archivos a la vez",
|
||||||
"upload_accepted_types": "PDF, JPEG, PNG, TIFF",
|
"upload_accepted_types": "PDF, JPEG, PNG, TIFF",
|
||||||
"upload_filename_hint": "Consejo: 2024-03-15_Mueller_Hans.pdf → fecha y remitente prellenados",
|
"upload_filename_hint": "Consejo: 2024-03-15_Mueller_Hans.pdf → fecha y remitente prellenados",
|
||||||
"upload_success": "{count} documento(s) creado(s)",
|
"upload_success": "{count} documento(s) creado(s)",
|
||||||
|
|||||||
@@ -142,32 +142,17 @@ $effect(() => {
|
|||||||
<div
|
<div
|
||||||
role="button"
|
role="button"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
class="mb-4 flex cursor-pointer items-center justify-center gap-3 border border-dashed px-6 text-sm transition-all duration-200 {isDragging
|
class="mb-4 flex cursor-pointer flex-col items-center justify-center gap-2 border border-dashed px-6 transition-all duration-200 {isDragging
|
||||||
? 'border-primary bg-accent-bg py-10 text-primary'
|
? 'border-primary bg-accent-bg py-10 text-primary'
|
||||||
: windowDragging
|
: windowDragging
|
||||||
? 'border-primary/60 bg-accent-bg/50 py-10 text-primary/80'
|
? 'border-primary/60 bg-accent-bg/50 py-10 text-primary/80'
|
||||||
: 'border-ink/20 py-3 text-ink-3 hover:border-primary hover:text-primary'}"
|
: 'border-ink/20 py-6 text-ink-3 hover:border-primary hover:text-primary'}"
|
||||||
ondragover={handleDragOver}
|
ondragover={handleDragOver}
|
||||||
ondragleave={handleDragLeave}
|
ondragleave={handleDragLeave}
|
||||||
ondrop={handleDrop}
|
ondrop={handleDrop}
|
||||||
onclick={() => fileInput.click()}
|
onclick={() => fileInput.click()}
|
||||||
onkeydown={(e) => e.key === 'Enter' && fileInput.click()}
|
onkeydown={(e) => e.key === 'Enter' && fileInput.click()}
|
||||||
>
|
>
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
class="h-4 w-4 shrink-0 opacity-50"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
|
||||||
<polyline points="17 8 12 3 7 8" />
|
|
||||||
<line x1="12" y1="3" x2="12" y2="15" />
|
|
||||||
</svg>
|
|
||||||
{#if isUploading}
|
{#if isUploading}
|
||||||
<div class="flex w-48 flex-col items-center gap-1">
|
<div class="flex w-48 flex-col items-center gap-1">
|
||||||
<div class="h-1.5 w-full overflow-hidden rounded-full bg-ink/10">
|
<div class="h-1.5 w-full overflow-hidden rounded-full bg-ink/10">
|
||||||
@@ -179,10 +164,16 @@ $effect(() => {
|
|||||||
<span class="font-sans text-xs text-ink-3">{uploadProgress}%</span>
|
<span class="font-sans text-xs text-ink-3">{uploadProgress}%</span>
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="flex flex-col items-center gap-0.5">
|
<img
|
||||||
<span class="font-sans font-medium">{m.upload_drop_hint()}</span>
|
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Copy-Item-MD.svg"
|
||||||
|
alt=""
|
||||||
|
aria-hidden="true"
|
||||||
|
class="h-8 w-8 opacity-40"
|
||||||
|
/>
|
||||||
|
<div class="flex flex-col items-center gap-0.5 text-center">
|
||||||
|
<span class="font-sans text-sm text-ink-2">{m.upload_drop_hint()}</span>
|
||||||
<span class="font-sans text-xs text-ink-3">{m.upload_accepted_types()}</span>
|
<span class="font-sans text-xs text-ink-3">{m.upload_accepted_types()}</span>
|
||||||
<span class="font-sans text-xs text-ink-3/70 italic">{m.upload_filename_hint()}</span>
|
<span class="font-sans text-xs text-ink-3 italic">{m.upload_filename_hint()}</span>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user