TekH
47f48ba12a
Replaced static upload message in `CreateEnvelopeWizardPopup.razor` with a new `PdfFileDropZone` component to enhance user experience. The component supports drag-and-drop functionality, file selection, and dynamic states (e.g., disabled, drag-active). Introduced `PdfFileDropZone.razor` with customizable parameters such as `Disabled`, `HasDocument`, `UploadText`, and `DragDropHintText`. Added event handling for drag-and-drop interactions and file selection. Updated `sender-page.css` to include styles for the new component, ensuring seamless integration with the existing layout. Adjusted styles for hover effects, drag-active state, and disabled state. These changes improve usability and make PDF uploads more intuitive.
105 lines
2.5 KiB
Plaintext
105 lines
2.5 KiB
Plaintext
@using Microsoft.AspNetCore.Components.Forms
|
|
|
|
<div class="sender-pdf-dropzone @DropZoneClass">
|
|
<div class="sender-pdf-dropzone__content">
|
|
<div class="sender-pdf-dropzone__title">@CurrentActionText</div>
|
|
@if (!string.IsNullOrWhiteSpace(DragDropHintText))
|
|
{
|
|
<div class="sender-pdf-dropzone__hint">@DragDropHintText</div>
|
|
}
|
|
</div>
|
|
|
|
<InputFile OnChange="OnFileSelectedAsync"
|
|
accept="@Accept"
|
|
disabled="@Disabled"
|
|
@ondragenter="OnDragEnter"
|
|
@ondragleave="OnDragLeave"
|
|
@ondragover="OnDragOver"
|
|
@ondrop="OnDrop"
|
|
class="sender-pdf-dropzone__input" />
|
|
</div>
|
|
|
|
@code {
|
|
[Parameter]
|
|
public bool Disabled { get; set; }
|
|
|
|
[Parameter]
|
|
public bool HasDocument { get; set; }
|
|
|
|
[Parameter]
|
|
public string Accept { get; set; } = ".pdf";
|
|
|
|
[Parameter]
|
|
public string UploadText { get; set; } = "PDF hochladen";
|
|
|
|
[Parameter]
|
|
public string ReplaceText { get; set; } = "PDF ersetzen";
|
|
|
|
[Parameter]
|
|
public string DragDropHintText { get; set; } = "Datei hierhin ziehen oder klicken";
|
|
|
|
[Parameter]
|
|
public EventCallback<InputFileChangeEventArgs> FileSelected { get; set; }
|
|
|
|
private int _dragDepth;
|
|
private bool _isDragActive;
|
|
|
|
private string CurrentActionText => HasDocument ? ReplaceText : UploadText;
|
|
|
|
private string DropZoneClass
|
|
{
|
|
get
|
|
{
|
|
if (Disabled)
|
|
return "sender-pdf-dropzone--disabled";
|
|
|
|
return _isDragActive ? "sender-pdf-dropzone--drag-active" : string.Empty;
|
|
}
|
|
}
|
|
|
|
private void OnDragEnter(DragEventArgs _)
|
|
{
|
|
if (Disabled)
|
|
return;
|
|
|
|
_dragDepth++;
|
|
_isDragActive = true;
|
|
}
|
|
|
|
private void OnDragLeave(DragEventArgs _)
|
|
{
|
|
if (Disabled)
|
|
return;
|
|
|
|
_dragDepth = Math.Max(0, _dragDepth - 1);
|
|
if (_dragDepth == 0)
|
|
_isDragActive = false;
|
|
}
|
|
|
|
private void OnDragOver(DragEventArgs _)
|
|
{
|
|
if (Disabled)
|
|
return;
|
|
|
|
_isDragActive = true;
|
|
}
|
|
|
|
private void OnDrop(DragEventArgs _)
|
|
{
|
|
_dragDepth = 0;
|
|
_isDragActive = false;
|
|
}
|
|
|
|
private async Task OnFileSelectedAsync(InputFileChangeEventArgs args)
|
|
{
|
|
_dragDepth = 0;
|
|
_isDragActive = false;
|
|
|
|
if (Disabled)
|
|
return;
|
|
|
|
if (FileSelected.HasDelegate)
|
|
await FileSelected.InvokeAsync(args);
|
|
}
|
|
}
|