Redesign PDF toolbar with enhanced functionality

The PDF toolbar in `EnvelopeViewer.razor` has been redesigned to improve usability and functionality. Key changes include:

- Added buttons for page navigation, zooming, and preset zoom levels.
- Introduced a zoom slider and page input field for direct control.
- Added "Fit to Width" and "Set Zoom to 100%" features.
- Updated `ZoomIn` and `ZoomOut` methods with boundary checks.
- Added new methods: `SetZoom`, `OnZoomSliderChanged`, `OnPageInputChanged`, and `FitToWidth`.

Styling updates in `envelope-viewer.css` include a modernized toolbar design with rounded corners, shadows, and responsive layouts for smaller screens.

`pdf-viewer.js` was updated with `setScale` and `fitToWidth` methods to support the new functionality. These changes enhance the interactivity, flexibility, and user experience of the PDF viewer.

EnvelopeGenerator.ReceiverUI/Pages/EnvelopeViewer.razor

@@ -28,36 +28,6 @@
                     <div class="envelope-key">ID: @EnvelopeKey</div>
                 </div>
             </div>
-            @if (_pdfLoaded) {
-                <div class="d-flex align-items-center gap-2 ms-auto">
-                    <div class="pdf-controls">
-                        <button class="btn btn-sm btn-outline-primary" @onclick="ZoomOut" title="Zoom Out">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                                <path d="M6.5 1A5.5 5.5 0 0 0 1 6.5v3A5.5 5.5 0 0 0 6.5 15h3a5.5 5.5 0 0 0 5.5-5.5v-3A5.5 5.5 0 0 0 9.5 1h-3zM4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z"/>
-                            </svg>
-                        </button>
-                        <span class="zoom-level">@(_currentZoom)%</span>
-                        <button class="btn btn-sm btn-outline-primary" @onclick="ZoomIn" title="Zoom In">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                                <path d="M6.5 1A5.5 5.5 0 0 0 1 6.5v3A5.5 5.5 0 0 0 6.5 15h3a5.5 5.5 0 0 0 5.5-5.5v-3A5.5 5.5 0 0 0 9.5 1h-3zM8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
-                            </svg>
-                        </button>
-                    </div>
-                    <div class="pdf-navigation">
-                        <button class="btn btn-sm btn-primary" @onclick="PreviousPage" disabled="@(_currentPage <= 1)">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                                <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
-                            </svg>
-                        </button>
-                        <span class="page-info">Seite @_currentPage / @_totalPages</span>
-                        <button class="btn btn-sm btn-primary" @onclick="NextPage" disabled="@(_currentPage >= _totalPages)">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                                <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-            }
         </div>
     </div>
 
@@ -88,6 +58,64 @@
             </div>
         } else if (!string.IsNullOrWhiteSpace(_pdfDataUrl)) {
             <div class="pdf-viewer-container">
+                @if (_pdfLoaded) {
+                    <div class="pdf-toolbar">
+                        <div class="pdf-toolbar__section">
+                            <button class="pdf-toolbar__btn" @onclick="PreviousPage" disabled="@(_currentPage <= 1)" title="Vorherige Seite">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
+                                    <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
+                                </svg>
+                            </button>
+                            <div class="pdf-toolbar__page-input-group">
+                                <input type="number" class="pdf-toolbar__page-input" min="1" max="@_totalPages" value="@_currentPage" @onchange="OnPageInputChanged" />
+                                <span class="pdf-toolbar__page-total">/ @_totalPages</span>
+                            </div>
+                            <button class="pdf-toolbar__btn" @onclick="NextPage" disabled="@(_currentPage >= _totalPages)" title="Nächste Seite">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
+                                    <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
+                                </svg>
+                            </button>
+                        </div>
+
+                        <div class="pdf-toolbar__divider"></div>
+
+                        <div class="pdf-toolbar__section pdf-toolbar__zoom-section">
+                            <button class="pdf-toolbar__btn" @onclick="ZoomOut" disabled="@(_currentZoom <= 50)" title="Verkleinern">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
+                                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0zM4 6a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1H4z"/>
+                                </svg>
+                            </button>
+                            <div class="pdf-toolbar__zoom-slider-container">
+                                <input type="range" class="pdf-toolbar__zoom-slider" min="50" max="300" step="25" value="@_currentZoom" @oninput="OnZoomSliderChanged" title="@(_currentZoom)%" />
+                                <div class="pdf-toolbar__zoom-label">@(_currentZoom)%</div>
+                            </div>
+                            <button class="pdf-toolbar__btn" @onclick="ZoomIn" disabled="@(_currentZoom >= 300)" title="Vergrößern">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
+                                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0zM6.5 3a.5.5 0 0 0-1 0v2.5H3a.5.5 0 0 0 0 1h2.5V9a.5.5 0 0 0 1 0V6.5H9a.5.5 0 0 0 0-1H6.5V3z"/>
+                                </svg>
+                            </button>
+                        </div>
+
+                        <div class="pdf-toolbar__divider"></div>
+
+                        <div class="pdf-toolbar__section">
+                            <button class="pdf-toolbar__btn pdf-toolbar__btn--preset" @onclick="() => SetZoom(100)" title="Tatsächliche Größe">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16" class="me-1">
+                                    <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
+                                    <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319z"/>
+                                </svg>
+                                100%
+                            </button>
+                            <button class="pdf-toolbar__btn pdf-toolbar__btn--preset" @onclick="FitToWidth" title="An Breite anpassen">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16" class="me-1">
+                                    <path d="M1 3.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5zM7.5 7a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1z"/>
+                                    <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm1 0v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1z"/>
+                                </svg>
+                                Breite
+                            </button>
+                        </div>
+                    </div>
+                }
                 <div class="pdf-frame">
                     <canvas id="pdf-canvas" class="pdf-canvas"></canvas>
                 </div>
@@ -184,17 +212,45 @@
     }
 
     async Task ZoomIn() {
+        if (_currentZoom >= 300) return;
         await JSRuntime.InvokeVoidAsync("pdfViewer.zoomIn");
         var scale = await JSRuntime.InvokeAsync<double>("pdfViewer.getScale");
         _currentZoom = (int)(scale * 100);
     }
 
     async Task ZoomOut() {
+        if (_currentZoom <= 50) return;
         await JSRuntime.InvokeVoidAsync("pdfViewer.zoomOut");
         var scale = await JSRuntime.InvokeAsync<double>("pdfViewer.getScale");
         _currentZoom = (int)(scale * 100);
     }
 
+    async Task SetZoom(int percentage) {
+        var scale = percentage / 100.0;
+        await JSRuntime.InvokeVoidAsync("pdfViewer.setScale", scale);
+        _currentZoom = percentage;
+    }
+
+    async Task OnZoomSliderChanged(ChangeEventArgs e) {
+        if (int.TryParse(e.Value?.ToString(), out var zoom)) {
+            await SetZoom(zoom);
+        }
+    }
+
+    async Task OnPageInputChanged(ChangeEventArgs e) {
+        if (int.TryParse(e.Value?.ToString(), out var pageNum) && pageNum >= 1 && pageNum <= _totalPages) {
+            if (await JSRuntime.InvokeAsync<bool>("pdfViewer.goToPage", pageNum)) {
+                _currentPage = pageNum;
+            }
+        }
+    }
+
+    async Task FitToWidth() {
+        await JSRuntime.InvokeVoidAsync("pdfViewer.fitToWidth");
+        var scale = await JSRuntime.InvokeAsync<double>("pdfViewer.getScale");
+        _currentZoom = (int)(scale * 100);
+    }
+
     public async ValueTask DisposeAsync() {
         if (_pdfLoaded) {
             try {

EnvelopeGenerator.ReceiverUI/wwwroot/css/envelope-viewer.css

@@ -43,20 +43,6 @@
     margin-top: 0.25rem;
 }
 
-.pdf-controls, .pdf-navigation {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-}
-
-.zoom-level, .page-info {
-    font-size: 0.875rem;
-    font-weight: 600;
-    color: #475569;
-    min-width: 60px;
-    text-align: center;
-}
-
 .envelope-content {
     flex: 1;
     min-height: 0;
@@ -68,9 +54,188 @@
 .pdf-viewer-container {
     height: 100%;
     display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0;
+    gap: 1rem;
+}
+
+.pdf-toolbar {
+    background: rgba(255, 255, 255, 0.98);
+    backdrop-filter: blur(20px);
+    border-radius: 12px;
+    padding: 0.75rem 1.25rem;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    box-shadow: 
+        0 4px 16px rgba(0, 0, 0, 0.1),
+        0 0 0 1px rgba(126, 34, 206, 0.1);
+    border: 1px solid rgba(126, 34, 206, 0.15);
+    flex-shrink: 0;
+    max-width: 95%;
+    width: fit-content;
+}
+
+.pdf-toolbar__section {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.pdf-toolbar__zoom-section {
+    gap: 0.75rem;
+}
+
+.pdf-toolbar__divider {
+    width: 1px;
+    height: 32px;
+    background: linear-gradient(180deg, transparent 0%, rgba(126, 34, 206, 0.2) 50%, transparent 100%);
+}
+
+.pdf-toolbar__btn {
+    background: linear-gradient(135deg, rgba(126, 34, 206, 0.05) 0%, rgba(42, 82, 152, 0.05) 100%);
+    border: 1px solid rgba(126, 34, 206, 0.2);
+    border-radius: 8px;
+    padding: 0.5rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0;
+    color: #1e293b;
+    min-width: 34px;
+    min-height: 34px;
+}
+
+.pdf-toolbar__btn:hover:not(:disabled) {
+    background: linear-gradient(135deg, rgba(126, 34, 206, 0.1) 0%, rgba(42, 82, 152, 0.1) 100%);
+    border-color: rgba(126, 34, 206, 0.4);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(126, 34, 206, 0.2);
+}
+
+.pdf-toolbar__btn:active:not(:disabled) {
+    transform: translateY(0);
+    box-shadow: 0 2px 6px rgba(126, 34, 206, 0.15);
+}
+
+.pdf-toolbar__btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    background: rgba(0, 0, 0, 0.02);
+    border-color: rgba(0, 0, 0, 0.1);
+}
+
+.pdf-toolbar__btn--preset {
+    padding: 0.5rem 0.875rem;
+    font-size: 0.813rem;
+    font-weight: 600;
+    color: #475569;
+    min-width: auto;
+    white-space: nowrap;
+}
+
+.pdf-toolbar__btn--preset svg {
+    flex-shrink: 0;
+}
+
+.pdf-toolbar__page-input-group {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    background: white;
+    border: 1px solid rgba(126, 34, 206, 0.2);
+    border-radius: 8px;
+    padding: 0.25rem 0.625rem;
+}
+
+.pdf-toolbar__page-input {
+    width: 48px;
+    border: none;
+    outline: none;
+    text-align: center;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #1e293b;
+    background: transparent;
+    -moz-appearance: textfield;
+}
+
+.pdf-toolbar__page-input::-webkit-outer-spin-button,
+.pdf-toolbar__page-input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+.pdf-toolbar__page-total {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #64748b;
+}
+
+.pdf-toolbar__zoom-slider-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.pdf-toolbar__zoom-slider {
+    -webkit-appearance: none;
+    width: 140px;
+    height: 6px;
+    border-radius: 3px;
+    background: linear-gradient(90deg, 
+        rgba(126, 34, 206, 0.1) 0%, 
+        rgba(126, 34, 206, 0.2) 50%, 
+        rgba(126, 34, 206, 0.1) 100%);
+    outline: none;
+    cursor: pointer;
+}
+
+.pdf-toolbar__zoom-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #7e22ce 0%, #2a5298 100%);
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(126, 34, 206, 0.3);
+    transition: all 0.2s ease;
+}
+
+.pdf-toolbar__zoom-slider::-webkit-slider-thumb:hover {
+    transform: scale(1.15);
+    box-shadow: 0 4px 12px rgba(126, 34, 206, 0.4);
+}
+
+.pdf-toolbar__zoom-slider::-moz-range-thumb {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #7e22ce 0%, #2a5298 100%);
+    cursor: pointer;
+    border: none;
+    box-shadow: 0 2px 8px rgba(126, 34, 206, 0.3);
+    transition: all 0.2s ease;
+}
+
+.pdf-toolbar__zoom-slider::-moz-range-thumb:hover {
+    transform: scale(1.15);
+    box-shadow: 0 4px 12px rgba(126, 34, 206, 0.4);
+}
+
+.pdf-toolbar__zoom-label {
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: #7e22ce;
+    letter-spacing: 0.025em;
+    min-width: 45px;
+    text-align: center;
 }
 
 .pdf-frame {
@@ -82,7 +247,7 @@
     overflow: auto;
     position: relative;
     padding: 2rem;
-    height: calc(100vh - 200px);
+    flex: 1;
     width: 90%;
     max-width: 1200px;
     text-align: center;
@@ -142,10 +307,29 @@
         padding: 0.75rem;
     }
 
+    .pdf-toolbar {
+        flex-wrap: wrap;
+        padding: 0.625rem 1rem;
+        gap: 0.625rem;
+        max-width: 98%;
+    }
+
+    .pdf-toolbar__divider {
+        display: none;
+    }
+
+    .pdf-toolbar__zoom-slider {
+        width: 100px;
+    }
+
+    .pdf-toolbar__btn--preset {
+        padding: 0.425rem 0.75rem;
+        font-size: 0.75rem;
+    }
+
     .pdf-frame {
         border-radius: 12px;
         padding: 1rem;
-        height: calc(100vh - 180px);
         width: 95%;
     }
 

EnvelopeGenerator.ReceiverUI/wwwroot/js/pdf-viewer.js

@@ -231,6 +231,31 @@ window.pdfViewer = {
         }
     },
 
+    setScale(scale) {
+        if (scale >= 0.5 && scale <= 3.0) {
+            this.scale = scale;
+            this.queueRenderPage(this.pageNum);
+        }
+    },
+
+    async fitToWidth() {
+        const container = this.canvas.closest('.pdf-frame');
+        if (!container || !this.pdfDoc) return;
+
+        try {
+            const page = await this.pdfDoc.getPage(this.pageNum);
+            const viewport = page.getViewport({ scale: 1.0 });
+            
+            const containerWidth = container.clientWidth - 80;
+            const optimalScale = containerWidth / viewport.width;
+            
+            this.scale = Math.min(Math.max(optimalScale, 0.5), 3.0);
+            this.queueRenderPage(this.pageNum);
+        } catch (error) {
+            console.error('Error fitting to width:', error);
+        }
+    },
+
     getCurrentPage() {
         return this.pageNum;
     },