From bf739c1360f6e7bb5583bcab5341065dc6c80b96 Mon Sep 17 00:00:00 2001
From: TekH <h.tek@digitaldata.works>
Date: Wed, 30 Sep 2026 17:09:33 +0200
Subject: [PATCH] Improve download/print state handling and toolbar UI

Added `IsDownloading` and `IsPrinting` properties to manage
state during download and print operations in
`SenderPdfImageEditor.razor` and `SenderPdfImageEditorToolbar.razor`.
Updated `OnDownloadPdfAsync` and `OnPrintPdfAsync` to ensure
state cleanup with `finally` blocks.

Enhanced toolbar buttons to reflect busy states with dynamic
titles, disabled states, and a spinning animation. Updated
CSS in `envelope-viewer.css` to improve layout, spacing,
and responsiveness. Added hover, active, and focus-visible
styles for better interactivity. Styled a new zoom slider
with custom thumb and focus states.

Increased maximum width of key elements to 1040px and
adjusted padding/margin for better alignment. Improved
focus styles for input fields and aligned actions to the
right in specific scenarios.
---
 .../PdfEditor/SenderPdfImageEditor.razor      |  60 +++++---
 .../SenderPdfImageEditorToolbar.razor         |  18 ++-
 .../wwwroot/css/envelope-viewer.css           | 141 ++++++++++++++----
 3 files changed, 169 insertions(+), 50 deletions(-)

diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditor.razor b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditor.razor
index f411ffcb..ee1808ae 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditor.razor
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditor.razor
@@ -26,6 +26,8 @@
                                         SetZoomPercent="OnSetZoomPercentAsync"
                                         CanDownloadPdf="@CanDownloadPdf"
                                         CanPrintPdf="@CanPrintPdf"
+                                        IsDownloading="@_isDownloading"
+                                        IsPrinting="@_isPrinting"
                                         DownloadPdf="OnDownloadPdfAsync"
                                         PrintPdf="OnPrintPdfAsync" />
         </div>
@@ -147,6 +149,8 @@
     private int _currentPage = 1;
     private int _zoomPercent = 112;
     private bool _zoomOverrideInitialized;
+    private bool _isDownloading;
+    private bool _isPrinting;
 
     private const int MinZoomPercent = 50;
     private const int MaxZoomPercent = 300;
@@ -382,33 +386,55 @@
 
     private async Task OnDownloadPdfAsync()
     {
-        if (string.IsNullOrWhiteSpace(PdfDataUrl))
+        if (string.IsNullOrWhiteSpace(PdfDataUrl) || _isDownloading || _isPrinting)
             return;
 
-        var fallbackName = string.IsNullOrWhiteSpace(PdfFileName)
-            ? "document.pdf"
-            : PdfFileName;
+        _isDownloading = true;
+        await InvokeAsync(StateHasChanged);
 
-        var fileName = fallbackName.EndsWith(".pdf", StringComparison.OrdinalIgnoreCase)
-            ? fallbackName
-            : $"{fallbackName}.pdf";
+        try
+        {
+            var fallbackName = string.IsNullOrWhiteSpace(PdfFileName)
+                ? "document.pdf"
+                : PdfFileName;
 
-        await JSRuntime.InvokeVoidAsync(
-            "envelopeEditor.downloadDataUrlAsFile",
-            PdfDataUrl,
-            fileName,
-            "application/pdf");
+            var fileName = fallbackName.EndsWith(".pdf", StringComparison.OrdinalIgnoreCase)
+                ? fallbackName
+                : $"{fallbackName}.pdf";
+
+            await JSRuntime.InvokeVoidAsync(
+                "envelopeEditor.downloadDataUrlAsFile",
+                PdfDataUrl,
+                fileName,
+                "application/pdf");
+        }
+        finally
+        {
+            _isDownloading = false;
+            await InvokeAsync(StateHasChanged);
+        }
     }
 
     private async Task OnPrintPdfAsync()
     {
-        if (string.IsNullOrWhiteSpace(PdfDataUrl))
+        if (string.IsNullOrWhiteSpace(PdfDataUrl) || _isPrinting || _isDownloading)
             return;
 
-        await JSRuntime.InvokeVoidAsync(
-            "envelopeEditor.printDataUrlPdf",
-            PdfDataUrl,
-            "application/pdf");
+        _isPrinting = true;
+        await InvokeAsync(StateHasChanged);
+
+        try
+        {
+            await JSRuntime.InvokeVoidAsync(
+                "envelopeEditor.printDataUrlPdf",
+                PdfDataUrl,
+                "application/pdf");
+        }
+        finally
+        {
+            _isPrinting = false;
+            await InvokeAsync(StateHasChanged);
+        }
     }
 
     private void OnEditorMouseUp(MouseEventArgs args)
diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditorToolbar.razor b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditorToolbar.razor
index f1217186..f7291ade 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditorToolbar.razor
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditorToolbar.razor
@@ -86,7 +86,11 @@
     </div>
 
     <div class="sender-image-toolbar__group sender-image-toolbar__group--actions" role="group" aria-label="Document actions">
-        <button type="button" class="sender-image-toolbar__icon-btn" title="Print" disabled="@(!CanPrintPdf)" @onclick="PrintPdfAsync">
+        <button type="button"
+                class="sender-image-toolbar__icon-btn @(IsPrinting ? "sender-image-toolbar__icon-btn--busy" : string.Empty)"
+                title="@(IsPrinting ? "Preparing print..." : "Print")"
+                disabled="@(!CanPrintPdf || IsPrinting || IsDownloading)"
+                @onclick="PrintPdfAsync">
             <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                 <path d="M7 9V4H17V9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                 <rect x="5" y="9" width="14" height="8" rx="2" stroke="currentColor" stroke-width="2" />
@@ -94,7 +98,11 @@
             </svg>
         </button>
 
-        <button type="button" class="sender-image-toolbar__icon-btn" title="Download PDF" disabled="@(!CanDownloadPdf)" @onclick="DownloadPdfAsync">
+        <button type="button"
+                class="sender-image-toolbar__icon-btn @(IsDownloading ? "sender-image-toolbar__icon-btn--busy" : string.Empty)"
+                title="@(IsDownloading ? "Preparing download..." : "Download PDF")"
+                disabled="@(!CanDownloadPdf || IsDownloading || IsPrinting)"
+                @onclick="DownloadPdfAsync">
             <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                 <path d="M12 4V14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
                 <path d="M8 10L12 14L16 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
@@ -153,6 +161,12 @@
     [Parameter]
     public bool CanPrintPdf { get; set; }
 
+    [Parameter]
+    public bool IsDownloading { get; set; }
+
+    [Parameter]
+    public bool IsPrinting { get; set; }
+
     [Parameter]
     public EventCallback DownloadPdf { get; set; }
 
diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css
index a4aa95ed..e5ec2274 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css
@@ -82,26 +82,26 @@
     left: 50%;
     transform: translateX(-50%);
     width: calc(100% - 2rem);
-    max-width: 980px;
+    max-width: 1040px;
     margin: 0;
     display: grid;
-    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
-    gap: 0.5rem;
+    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto;
+    gap: 0.6rem;
     align-items: center;
     background: transparent;
 }
 
 .sender-image-toolbar__group {
-    min-height: 3.8rem;
+    min-height: 3.35rem;
     background: #ffffff;
     border: 1px solid #d6deef;
-    border-radius: 0.45rem;
-    padding: 0.38rem 0.48rem;
+    border-radius: 0.55rem;
+    padding: 0.38rem 0.5rem;
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 0.2rem;
-    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
+    gap: 0.28rem;
+    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.09);
 }
 
 .sender-image-toolbar__group--nav {
@@ -110,25 +110,40 @@
 
 .sender-image-toolbar__group--zoom {
     justify-content: center;
+    gap: 0.4rem;
 }
 
 .sender-image-toolbar__group--actions {
     justify-content: center;
-    gap: 0.32rem;
-    padding-inline: 0.55rem;
+    gap: 0.4rem;
+    padding-inline: 0.6rem;
 }
 
 .sender-image-toolbar__icon-btn {
-    width: 2.1rem;
-    height: 2.1rem;
+    width: 2.25rem;
+    height: 2.25rem;
     border: 0;
-    border-radius: 0.4rem;
+    border-radius: 0.45rem;
     background: transparent;
     color: #1f2a44;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    transition: background-color 0.2s ease;
+    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
+}
+
+.sender-image-toolbar__icon-btn:hover:not(:disabled) {
+    background: #eef3ff;
+    color: #0f3f99;
+}
+
+.sender-image-toolbar__icon-btn:active:not(:disabled) {
+    transform: translateY(1px);
+}
+
+.sender-image-toolbar__icon-btn:focus-visible {
+    outline: 2px solid #3468d6;
+    outline-offset: 1px;
 }
 
 .sender-image-toolbar__icon-btn:disabled {
@@ -137,18 +152,22 @@
 }
 
 .sender-image-toolbar__icon-btn--caret {
-    width: 1.85rem;
+    width: 1.95rem;
 }
 
 .sender-image-toolbar__icon-btn svg {
-    width: 18px;
-    height: 18px;
+    width: 19px;
+    height: 19px;
+}
+
+.sender-image-toolbar__icon-btn--busy svg {
+    animation: sender-toolbar-spin 0.95s linear infinite;
 }
 
 .sender-image-toolbar__select-wrap {
     position: relative;
-    width: 1.85rem;
-    height: 2.1rem;
+    width: 1.95rem;
+    height: 2.25rem;
 }
 
 .sender-image-toolbar__page-select {
@@ -164,10 +183,10 @@
 }
 
 .sender-image-toolbar__value-box {
-    min-width: 8.15rem;
-    height: 2.1rem;
+    min-width: 7.8rem;
+    height: 2.25rem;
     border: 1px solid #d5dceb;
-    border-radius: 0.4rem;
+    border-radius: 0.45rem;
     background: #f8fafc;
     display: inline-flex;
     align-items: center;
@@ -180,6 +199,11 @@
     letter-spacing: 0.01em;
 }
 
+.sender-image-toolbar__value-box:focus-within {
+    border-color: #7ea2ee;
+    box-shadow: 0 0 0 2px rgba(126, 162, 238, 0.2);
+}
+
 .sender-image-toolbar__page-input {
     width: 2.3rem;
     border: 0;
@@ -204,8 +228,53 @@
     font-weight: 600;
 }
 
+.sender-image-toolbar__zoom-slider {
+    -webkit-appearance: none;
+    appearance: none;
+    width: clamp(130px, 20vw, 190px);
+    height: 6px;
+    border-radius: 999px;
+    background: linear-gradient(90deg, #d7e2ff 0%, #84a9ff 100%);
+    outline: none;
+    cursor: pointer;
+}
+
+.sender-image-toolbar__zoom-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    background: #2f5fc9;
+    box-shadow: 0 1px 4px rgba(47, 95, 201, 0.35);
+}
+
+.sender-image-toolbar__zoom-slider::-moz-range-thumb {
+    width: 15px;
+    height: 15px;
+    border: 0;
+    border-radius: 50%;
+    background: #2f5fc9;
+    box-shadow: 0 1px 4px rgba(47, 95, 201, 0.35);
+}
+
+.sender-image-toolbar__zoom-slider:focus-visible {
+    outline: 2px solid #3468d6;
+    outline-offset: 2px;
+}
+
+@keyframes sender-toolbar-spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 .sender-image-editor__pages {
-    max-width: 980px;
+    max-width: 1040px;
     margin: 0 auto;
     display: flex;
     flex-direction: column;
@@ -214,7 +283,7 @@
 }
 
 .sender-image-editor__native-preview {
-    max-width: 980px;
+    max-width: 1040px;
     margin: 5.15rem auto 1rem;
     background: #ffffff;
     border: 1px solid #cbd5e1;
@@ -1322,25 +1391,35 @@ body.resizing {
     grid-template-columns: 1fr;
     width: calc(100% - 1rem);
     top: 0.5rem;
-    gap: 0.4rem;
+    gap: 0.45rem;
 }
 
 .sender-image-toolbar__group {
-    min-height: 3.4rem;
+    min-height: 3.15rem;
+    justify-content: center;
+    flex-wrap: wrap;
 }
 
 .sender-image-editor__pages {
-    padding-top: 10.5rem;
+    padding-top: 11.25rem;
 }
 
 .sender-image-editor__native-preview {
-    margin-top: 10.5rem;
+    margin-top: 11.25rem;
 }
 
 .sender-image-toolbar__value-box {
-    min-width: 6.9rem;
-    height: 1.95rem;
-    font-size: 0.68rem;
+    min-width: 6.7rem;
+    height: 2rem;
+    font-size: 0.69rem;
+}
+
+.sender-image-toolbar__zoom-slider {
+    width: min(44vw, 220px);
+}
+
+.sender-image-toolbar__group--actions {
+    justify-content: flex-end;
 }
 
 .pdf-thumbnails {