diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditor.razor b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditor.razor index da9f1f46..6605b52a 100644 --- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditor.razor +++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditor.razor @@ -5,13 +5,20 @@ @inject IStringLocalizer UiLocalizer @inject IJSRuntime JSRuntime +@if (PageCount > 0) +{ + +} +
-@if (PageCount <= 0) + @if (PageCount <= 0) {
@L("SenderEditor_NoPagesToDisplay", "Keine Seiten zur Anzeige verfügbar.")
} diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditorToolbar.razor b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditorToolbar.razor new file mode 100644 index 00000000..28137a86 --- /dev/null +++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditorToolbar.razor @@ -0,0 +1,97 @@ +
+
+ + + + + + + + + + + +
+ +
+ + + + + + + +
+ +
+ + + +
+
+ +@code { + [Parameter] + public int CurrentPage { get; set; } + + [Parameter] + public int TotalPages { get; set; } + + [Parameter] + public int ZoomPercent { get; set; } = 112; + + private int CurrentPageDisplay => CurrentPage > 0 ? CurrentPage : 0; + private int TotalPagesDisplay => TotalPages > 0 ? TotalPages : 0; + private int ZoomPercentDisplay => ZoomPercent > 0 ? ZoomPercent : 100; +} diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css index 6d6b01cb..6ada127b 100644 --- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css +++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css @@ -61,6 +61,80 @@ padding: 1rem; } +.sender-image-toolbar { + max-width: 980px; + margin: 0 auto 1rem; + display: grid; + grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; + gap: 0.75rem; + align-items: center; +} + +.sender-image-toolbar__group { + min-height: 4.8rem; + background: #ffffff; + border: 1px solid #d6deef; + border-radius: 0.5rem; + padding: 0.6rem; + display: flex; + align-items: center; + justify-content: center; + gap: 0.3rem; + box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08); +} + +.sender-image-toolbar__group--nav { + justify-content: flex-start; +} + +.sender-image-toolbar__group--zoom { + justify-content: center; +} + +.sender-image-toolbar__group--actions { + justify-content: center; + gap: 0.45rem; + padding-inline: 0.75rem; +} + +.sender-image-toolbar__icon-btn { + width: 2.5rem; + height: 2.5rem; + border: 0; + border-radius: 0.45rem; + background: transparent; + color: #1f2a44; + display: inline-flex; + align-items: center; + justify-content: center; + transition: background-color 0.2s ease; +} + +.sender-image-toolbar__icon-btn:disabled { + opacity: 0.42; + cursor: not-allowed; +} + +.sender-image-toolbar__icon-btn--caret { + width: 2.1rem; +} + +.sender-image-toolbar__value-box { + min-width: 9rem; + height: 2.5rem; + border: 1px solid #d5dceb; + border-radius: 0.45rem; + background: #f8fafc; + display: inline-flex; + align-items: center; + justify-content: flex-start; + padding: 0 0.8rem; + color: #233252; + font-size: 1.1rem; + font-weight: 500; + letter-spacing: 0.01em; +} + .sender-image-editor__pages { max-width: 980px; margin: 0 auto; @@ -1174,6 +1248,19 @@ body.resizing { padding: 0.75rem; } +.sender-image-toolbar { + grid-template-columns: 1fr; +} + +.sender-image-toolbar__group { + min-height: 3.9rem; +} + +.sender-image-toolbar__value-box { + min-width: 7.5rem; + font-size: 1rem; +} + .pdf-thumbnails { width: 180px; border-radius: 0 0 0 16px;