Improve document upload UX and refactor wizard layout

Enhanced the `CreateEnvelopeWizardPopup` component:
- Added a new grid layout (`sender-create-wizard__body-layout`) to separate main content and side panel.
- Introduced a collapsible side panel for document upload and preview.
- Replaced old upload logic with `PdfFileDropZone` and added support for displaying document metadata (name, size) and replacement hints.
- Added asynchronous document preview rendering with `EnsureDocumentPreviewPreparedAsync`.

Localization updates:
- Added new localized strings for document upload hints in `de-DE`, `en-US`, and `fr-FR`.

CSS updates:
- Styled the new layout and side panel with transitions.
- Updated `PdfFileDropZone` styles for different states (e.g., document uploaded).

Refactored code for better maintainability and improved user feedback during document upload and preview preparation.
This commit is contained in:
2026-11-10 19:29:33 +01:00
parent c6fe7722b4
commit b65098fafb
6 changed files with 502 additions and 348 deletions

View File

@@ -2,10 +2,24 @@
<div class="sender-pdf-dropzone @DropZoneClass">
<div class="sender-pdf-dropzone__content">
<div class="sender-pdf-dropzone__title">@CurrentActionText</div>
@if (!string.IsNullOrWhiteSpace(DragDropHintText))
@if (HasDocument)
{
<div class="sender-pdf-dropzone__hint">@DragDropHintText</div>
@if (!string.IsNullOrWhiteSpace(DocumentName))
{
<div class="sender-pdf-dropzone__doc-name">@DocumentName</div>
}
@if (!string.IsNullOrWhiteSpace(DocumentSizeText))
{
<div class="sender-pdf-dropzone__doc-size">@DocumentSizeText</div>
}
@if (!string.IsNullOrWhiteSpace(UploadedHintText))
{
<div class="sender-pdf-dropzone__hint">@UploadedHintText</div>
}
}
else if (!string.IsNullOrWhiteSpace(CurrentActionText))
{
<div class="sender-pdf-dropzone__hint">@CurrentActionText</div>
}
</div>
@@ -38,6 +52,15 @@
[Parameter]
public string DragDropHintText { get; set; } = "Datei hierhin ziehen oder klicken";
[Parameter]
public string? DocumentName { get; set; }
[Parameter]
public string? DocumentSizeText { get; set; }
[Parameter]
public string UploadedHintText { get; set; } = "Zum Ersetzen klicken oder eine Datei hierher ziehen.";
[Parameter]
public EventCallback<InputFileChangeEventArgs> FileSelected { get; set; }
@@ -53,6 +76,9 @@
if (Disabled)
return "sender-pdf-dropzone--disabled";
if (HasDocument)
return "sender-pdf-dropzone--has-document";
return _isDragActive ? "sender-pdf-dropzone--drag-active" : string.Empty;
}
}