FDS2610/Steuerkram
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix #47: Zoom-Funktion für PNG-Belegvorschau (Buttons, Strg+Scroll, Strg+0)

Browse source
This commit is contained in:
fds2610-bot 2026-04-25 16:04:05 +02:00
parent fa1a5fadd2
commit 75279c7b36
2 changed files with 79 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
public/static/css/app.css
View file

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

55
src/Views/belege/detail.php
View file

@ -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; ?>