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:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user