166 lines
3.7 KiB
Svelte
166 lines
3.7 KiB
Svelte
<script lang="ts">
|
|
import MixCalculatorPrintDocument from '$lib/components/MixCalculatorPrintDocument.svelte';
|
|
import type { MixCalculatorPreview, MixCalculatorSession } from '$lib/types';
|
|
|
|
let {
|
|
preview,
|
|
sessionId = null,
|
|
onClose,
|
|
onPrint,
|
|
onDownloadPdf
|
|
}: {
|
|
preview: MixCalculatorPreview | MixCalculatorSession;
|
|
sessionId?: number | null;
|
|
onClose: () => void;
|
|
onPrint: () => void;
|
|
onDownloadPdf: (sessionId: number) => void;
|
|
} = $props();
|
|
</script>
|
|
|
|
<div class="preview-modal-backdrop" role="presentation" onclick={onClose}>
|
|
<div
|
|
class="preview-modal"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label="Print preview"
|
|
tabindex="-1"
|
|
onclick={(event) => event.stopPropagation()}
|
|
onkeydown={(event) => {
|
|
if (event.key === 'Escape') {
|
|
onClose();
|
|
}
|
|
}}
|
|
>
|
|
<div class="preview-modal-toolbar">
|
|
<div>
|
|
<p class="preview-modal-kicker">Print Preview</p>
|
|
<h3>{preview.product_name}</h3>
|
|
</div>
|
|
<div class="preview-modal-actions">
|
|
<button class="secondary-button" type="button" onclick={onClose}>Close</button>
|
|
{#if sessionId}
|
|
<a class="secondary-button" href={`/mix-calculator/${sessionId}/print`}>Open page</a>
|
|
<button class="secondary-button" type="button" onclick={() => onDownloadPdf(sessionId)}>Download PDF</button>
|
|
{/if}
|
|
<button class="primary-button" type="button" onclick={onPrint}>Print / Save PDF</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="preview-sheet-frame">
|
|
<div class="preview-sheet-scroll">
|
|
<MixCalculatorPrintDocument session={preview} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
h3,
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
.preview-modal-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 70;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 1rem;
|
|
background: rgba(17, 24, 20, 0.52);
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.preview-modal {
|
|
display: grid;
|
|
gap: 1rem;
|
|
width: min(1180px, 100%);
|
|
max-height: calc(100vh - 2rem);
|
|
padding: 1rem;
|
|
border: 1px solid rgba(255, 255, 255, 0.32);
|
|
border-radius: 1.6rem;
|
|
background:
|
|
linear-gradient(180deg, rgba(248, 250, 248, 0.96), rgba(240, 246, 242, 0.96));
|
|
}
|
|
|
|
.preview-modal-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.preview-modal-kicker {
|
|
color: var(--muted);
|
|
font-size: 0.76rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.preview-modal-toolbar h3 {
|
|
margin-top: 0.24rem;
|
|
font-size: 1.35rem;
|
|
letter-spacing: -0.04em;
|
|
}
|
|
|
|
.preview-modal-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.preview-sheet-frame {
|
|
min-height: 0;
|
|
display: grid;
|
|
place-items: start center;
|
|
padding: 1.1rem;
|
|
border-radius: 1.35rem;
|
|
background:
|
|
linear-gradient(135deg, #dfe8e2 0%, #eef3ef 45%, #d7e2db 100%);
|
|
}
|
|
|
|
.preview-sheet-scroll {
|
|
max-height: calc(100vh - 12rem);
|
|
overflow: auto;
|
|
width: 100%;
|
|
padding-right: 0.3rem;
|
|
}
|
|
|
|
.primary-button,
|
|
.secondary-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.78rem 0.96rem;
|
|
border-radius: 0.9rem;
|
|
border: 1px solid var(--line-strong);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.primary-button {
|
|
border: none;
|
|
background: var(--color-brand);
|
|
color: #fff;
|
|
}
|
|
|
|
.secondary-button {
|
|
background: #fff;
|
|
color: #304038;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.preview-modal-toolbar {
|
|
flex-direction: column;
|
|
align-items: start;
|
|
}
|
|
|
|
.preview-sheet-frame {
|
|
padding: 0.55rem;
|
|
}
|
|
}
|
|
</style>
|