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

Feature: Beleg-Vorschau-Tooltip in Bank-Zuordnung, Größe in Einstellungen

Browse source
This commit is contained in:
fds2610-bot 2026-05-14 20:14:53 +02:00
parent 0e1ce034e4
commit 99aa823d0f
4 changed files with 95 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
migrations/050_beleg_vorschau_einstellungen.sql Normal file
View file

@ -0,0 +1,3 @@
ALTER TABLE company_settings
ADD COLUMN IF NOT EXISTS beleg_vorschau_breite INT NOT NULL DEFAULT 200,
ADD COLUMN IF NOT EXISTS beleg_vorschau_hoehe INT NOT NULL DEFAULT 300;

5
src/Models/Setting.php
View file

@ -41,7 +41,8 @@ class Setting
mail_from_name=?, mail_from_email=?,
mail_subject_template=?, mail_body_template=?,
logo_max_width=?, logo_max_height=?,
logo_position=?, logo_margin_side=?, logo_margin_top=?
logo_position=?, logo_margin_side=?, logo_margin_top=?,
beleg_vorschau_breite=?, beleg_vorschau_hoehe=?
WHERE id=1',
[
$data['firma'] ?? '',
@ -86,6 +87,8 @@ class Setting
$logoPosition,
max(0, (int)($data['logo_margin_side'] ?? 75)),
max(0, (int)($data['logo_margin_top'] ?? 6)),
max(50, (int)($data['beleg_vorschau_breite'] ?? 200)),
max(50, (int)($data['beleg_vorschau_hoehe'] ?? 300)),
]
);
}

69
src/Views/bank/show.php
View file

@ -1,11 +1,16 @@
<?php
use Steuerkram\View;
use Steuerkram\Models\Setting;
$h = fn($v) => View::h($v);
$fmt = fn($v) => View::formatMoney($v);
$wert = (float)$transaction['wert'];
$isPlus = $wert >= 0;
$color = $isPlus ? 'var(--color-success)' : 'var(--color-danger)';
$settings = Setting::get();
$vorschauBreite = (int)($settings['beleg_vorschau_breite'] ?? 200);
$vorschauHoehe = (int)($settings['beleg_vorschau_hoehe'] ?? 300);
?>
<!-- Bankbuchung Info-Bar -->
@ -101,7 +106,9 @@ $color = $isPlus ? 'var(--color-success)' : 'var(--color-danger)';
<?php foreach ($offeneBelege as $b): ?>
<tr>
<td class="td-mono">
<a href="/belege/<?= (int)$b['id'] ?>" target="_blank"><?= $h($b['beleg_nr']) ?></a>
<a href="/belege/<?= (int)$b['id'] ?>" target="_blank"
class="beleg-preview-trigger"
data-beleg-id="<?= (int)$b['id'] ?>"><?= $h($b['beleg_nr']) ?></a>
</td>
<td class="td-mono"><?= $h(View::formatDate($b['beleg_datum'])) ?></td>
<td><span class="badge badge-gray"><?= $h($b['belegtyp']) ?></span></td>
@ -127,3 +134,63 @@ $color = $isPlus ? 'var(--color-success)' : 'var(--color-danger)';
</div>
<?php endif; ?>
</div>
<!-- Beleg-Vorschau Tooltip -->
<div id="beleg-tooltip" style="
display:none;
position:fixed;
z-index:9999;
pointer-events:none;
border:1px solid var(--color-border,#e2e8f0);
border-radius:var(--radius,6px);
background:#fff;
box-shadow:0 4px 20px rgba(0,0,0,.18);
overflow:hidden;
width:<?= $vorschauBreite ?>px;
height:<?= $vorschauHoehe ?>px;
"></div>
<script>
(function () {
const tooltip = document.getElementById('beleg-tooltip');
const W = <?= $vorschauBreite ?>;
const H = <?= $vorschauHoehe ?>;
let currentId = null;
let timer = null;
document.querySelectorAll('.beleg-preview-trigger').forEach(function (link) {
link.addEventListener('mouseenter', function (e) {
const id = link.dataset.belegId;
if (!id) return;
timer = setTimeout(function () {
if (currentId !== id) {
currentId = id;
tooltip.innerHTML = '<iframe src="/belege/' + id + '/file" style="width:100%;height:100%;border:none" loading="lazy"></iframe>';
}
positionTooltip(e);
tooltip.style.display = 'block';
}, 120);
});
link.addEventListener('mousemove', positionTooltip);
link.addEventListener('mouseleave', function () {
clearTimeout(timer);
tooltip.style.display = 'none';
});
});
function positionTooltip(e) {
const margin = 12;
let x = e.clientX + margin;
let y = e.clientY + margin;
if (x + W > window.innerWidth - margin) x = e.clientX - W - margin;
if (y + H > window.innerHeight - margin) y = e.clientY - H - margin;
tooltip.style.left = Math.max(0, x) + 'px';
tooltip.style.top = Math.max(0, y) + 'px';
}
})();
</script>

20
src/Views/settings/form.php
View file

@ -387,6 +387,26 @@
</div>
</form>
<!-- Beleg-Vorschau -->
<div class="card mb-2">
<div class="card-header"><div class="card-title">Beleg-Vorschau (Tooltip)</div></div>
<div class="card-body">
<p class="text-muted text-sm" style="margin-bottom:1rem">Größe der Vorschau beim Hover über Beleg-Links in der Bank-Buchungs-Maske.</p>
<div class="form-grid form-grid-2">
<div class="form-group">
<label for="beleg_vorschau_breite">Breite (px)</label>
<input type="number" id="beleg_vorschau_breite" name="beleg_vorschau_breite" form="settings-form"
value="<?= $h($settings['beleg_vorschau_breite'] ?? 200) ?>" min="50" max="800">
</div>
<div class="form-group">
<label for="beleg_vorschau_hoehe">Höhe (px)</label>
<input type="number" id="beleg_vorschau_hoehe" name="beleg_vorschau_hoehe" form="settings-form"
value="<?= $h($settings['beleg_vorschau_hoehe'] ?? 300) ?>" min="50" max="1200">
</div>
</div>
</div>
</div>
<!-- Modal: E-Mail-Text bearbeiten -->
<div id="mail-text-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;align-items:center;justify-content:center">
<div style="background:#fff;border-radius:8px;padding:1.5rem;width:520px;max-width:95vw;box-shadow:0 8px 32px rgba(0,0,0,.2)">