Fix: Phosphor Printer-Icon in Druck-Buttons

This commit is contained in:
rene 2026-05-17 14:46:56 +02:00
parent 683c645f85
commit 90973ca5af
2 changed files with 16 additions and 2 deletions

View file

@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import { pb } from '$lib/pb'; import { pb } from '$lib/pb';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import iconPrinter from '$lib/assets/icons/printer.svg';
const STATUS_LABEL: Record<string, string> = { ok: 'OK', abweichung: 'Abweichung', kritisch: 'Kritisch' }; const STATUS_LABEL: Record<string, string> = { ok: 'OK', abweichung: 'Abweichung', kritisch: 'Kritisch' };
const STATUS_COLOR: Record<string, string> = { ok: '#16a34a', abweichung: '#ea580c', kritisch: '#dc2626' }; const STATUS_COLOR: Record<string, string> = { ok: '#16a34a', abweichung: '#ea580c', kritisch: '#dc2626' };
@ -77,7 +78,9 @@
<option value={y}>{y}</option> <option value={y}>{y}</option>
{/each} {/each}
</select> </select>
<button class="btn-print" onclick={() => window.print()}>🖨 Drucken / PDF</button> <button class="btn-print" onclick={() => window.print()}>
<img src={iconPrinter} alt="" class="btn-icon" /> Drucken / PDF
</button>
</div> </div>
</div> </div>
@ -177,6 +180,7 @@
cursor: pointer; cursor: pointer;
} }
.btn-print:hover { background: #1a2640; } .btn-print:hover { background: #1a2640; }
.btn-icon { width: 16px; height: 16px; vertical-align: middle; margin-right: 0.25rem; filter: brightness(0) invert(1); }
.hint { color: #aaa; } .hint { color: #aaa; }
.empty-print { display: none; } .empty-print { display: none; }

View file

@ -2,6 +2,7 @@
import { pb } from '$lib/pb'; import { pb } from '$lib/pb';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import QRCode from 'qrcode'; import QRCode from 'qrcode';
import iconPrinter from '$lib/assets/icons/printer.svg';
const TYPE_LABEL: Record<string, string> = { const TYPE_LABEL: Record<string, string> = {
kuehlschrank: 'Kühlschrank', kuehlschrank: 'Kühlschrank',
@ -94,7 +95,9 @@
<p class="hint-text">QR-Codes ausdrucken und an den Stationen befestigen.</p> <p class="hint-text">QR-Codes ausdrucken und an den Stationen befestigen.</p>
</div> </div>
{#if stations.length > 0} {#if stations.length > 0}
<button class="btn-print" onclick={printAll}>🖨 Alle drucken</button> <button class="btn-print" onclick={printAll}>
<img src={iconPrinter} alt="" class="btn-icon" /> Alle drucken
</button>
{/if} {/if}
</div> </div>
@ -165,6 +168,13 @@
white-space: nowrap; white-space: nowrap;
} }
.btn-print:hover { background: #1a2640; } .btn-print:hover { background: #1a2640; }
.btn-icon {
width: 16px;
height: 16px;
vertical-align: middle;
margin-right: 0.25rem;
filter: brightness(0) invert(1);
}
.list { display: flex; flex-direction: column; gap: 1rem; } .list { display: flex; flex-direction: column; gap: 1rem; }
.card { .card {