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.
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user