AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Redesign PDF toolbar with enhanced functionality

Browse Source 
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.
This commit is contained in:
tekh
2026-06-05 13:31:36 +02:00
parent 34b620e749
commit 76945c9051
3 changed files with 312 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
EnvelopeGenerator.ReceiverUI/Pages/EnvelopeViewer.razor
View File

@@ -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 {

218
EnvelopeGenerator.ReceiverUI/wwwroot/css/envelope-viewer.css
View File

@@ -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%;
}

25
EnvelopeGenerator.ReceiverUI/wwwroot/js/pdf-viewer.js
View File

@@ -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;
},