From 75279c7b36c00cd066186c2cd96770432ed59b82 Mon Sep 17 00:00:00 2001
From: fds2610-bot <felix-bot@schepmann.de>
Date: Sat, 25 Apr 2026 16:04:05 +0200
Subject: [PATCH] =?UTF-8?q?Fix=20#47:=20Zoom-Funktion=20f=C3=BCr=20PNG-Bel?=
 =?UTF-8?q?egvorschau=20(Buttons,=20Strg+Scroll,=20Strg+0)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/static/css/app.css   | 27 ++++++++++++++++--
 src/Views/belege/detail.php | 55 ++++++++++++++++++++++++++++++++++++-
 2 files changed, 79 insertions(+), 3 deletions(-)

diff --git a/public/static/css/app.css b/public/static/css/app.css
index ae731e6..25893b4 100644
--- a/public/static/css/app.css
+++ b/public/static/css/app.css
@@ -365,14 +365,37 @@ td { padding: .65rem 1rem; vertical-align: middle; }
     aspect-ratio: unset;
 }
 
-.beleg-preview iframe,
-.beleg-preview img {
+.beleg-preview iframe {
     width: 100%;
     min-height: 1165px;
     border: none;
     display: block;
 }
 
+.beleg-preview img {
+    width: 100%;
+    border: none;
+    display: block;
+}
+
+.img-zoom-controls {
+    display: flex;
+    align-items: center;
+    gap: .4rem;
+    padding: .4rem .75rem;
+    border-bottom: 1px solid var(--color-border);
+    background: var(--color-surface);
+    font-size: .82rem;
+    color: var(--color-muted);
+    user-select: none;
+}
+
+.img-zoom-wrap {
+    overflow: auto;
+    max-height: calc(100vh - 220px);
+    cursor: zoom-in;
+}
+
 .beleg-layout-right {
     flex: 1 1 0;
     min-width: 320px;
diff --git a/src/Views/belege/detail.php b/src/Views/belege/detail.php
index 0e128c5..26a7a3b 100644
--- a/src/Views/belege/detail.php
+++ b/src/Views/belege/detail.php
@@ -166,7 +166,15 @@ $suppliers = $suppliers ?? [];
         <?php if (in_array($beleg['mime_type'], ['application/pdf'])): ?>
             <iframe src="/belege/<?= $h($beleg['id']) ?>/file" title="Belegvorschau"></iframe>
         <?php elseif (str_starts_with($beleg['mime_type'], 'image/')): ?>
-            <img src="/belege/<?= $h($beleg['id']) ?>/file" alt="Belegvorschau" style="object-fit:contain;max-height:700px;width:100%">
+            <div class="img-zoom-controls">
+                <button type="button" class="btn btn-secondary btn-sm" onclick="imgZoom(-1)" title="Verkleinern (Strg+–)">−</button>
+                <button type="button" class="btn btn-secondary btn-sm" onclick="imgZoom(+1)" title="Vergrößern (Strg++)">+</button>
+                <button type="button" class="btn btn-secondary btn-sm" onclick="imgZoomReset()" title="Zurücksetzen (Strg+0)">↺</button>
+                <span id="img-zoom-level">100 %</span>
+            </div>
+            <div id="img-zoom-wrap" class="img-zoom-wrap">
+                <img id="beleg-img" src="/belege/<?= $h($beleg['id']) ?>/file" alt="Belegvorschau">
+            </div>
         <?php elseif (str_contains($beleg['mime_type'], 'xml')): ?>
             <div style="padding:1.5rem">
                 <div class="badge badge-blue mb-2">XML / eRechnung</div>
@@ -1264,3 +1272,48 @@ document.addEventListener('DOMContentLoaded', function() {
     });
 }());
 </script>
+
+<?php if (str_starts_with($beleg['mime_type'] ?? '', 'image/')): ?>
+<script>
+(function () {
+    const ZOOM_KEY = 'beleg_img_zoom';
+    const STEP     = 1.25;
+    const MIN      = 0.25;
+    const MAX      = 5;
+
+    const img  = document.getElementById('beleg-img');
+    const wrap = document.getElementById('img-zoom-wrap');
+    const lvl  = document.getElementById('img-zoom-level');
+    if (!img || !wrap) return;
+
+    let scale = 1;
+
+    function applyScale(s) {
+        scale = Math.max(MIN, Math.min(MAX, s));
+        img.style.width = Math.round(scale * 100) + '%';
+        if (lvl) lvl.textContent = Math.round(scale * 100) + ' %';
+        wrap.style.cursor = scale > 1 ? 'grab' : 'zoom-in';
+        localStorage.setItem(ZOOM_KEY, scale);
+    }
+
+    window.imgZoom      = function (dir) { applyScale(dir > 0 ? scale * STEP : scale / STEP); };
+    window.imgZoomReset = function ()    { applyScale(1); };
+
+    const saved = parseFloat(localStorage.getItem(ZOOM_KEY));
+    if (!isNaN(saved) && saved > 0) applyScale(saved);
+
+    wrap.addEventListener('wheel', function (e) {
+        if (!e.ctrlKey) return;
+        e.preventDefault();
+        applyScale(e.deltaY < 0 ? scale * STEP : scale / STEP);
+    }, { passive: false });
+
+    document.addEventListener('keydown', function (e) {
+        if (!e.ctrlKey || !document.getElementById('beleg-img')) return;
+        if (e.key === '+' || e.key === '=') { e.preventDefault(); imgZoom(+1); }
+        if (e.key === '-')                  { e.preventDefault(); imgZoom(-1); }
+        if (e.key === '0')                  { e.preventDefault(); imgZoomReset(); }
+    });
+}());
+</script>
+<?php endif; ?>