j3d1/toolshed
2
1
Fork 0
Code Issues 9 Pull requests 1 Projects Releases Packages Wiki Activity

stash

Browse source
This commit is contained in:
j3d1 2026-08-17 20:18:28 +02:00
parent 8622e488a4
commit eaae7c286a
3 changed files with 75 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

25
frontend/src/components/LabelLayoutPreview.vue
View file

@ -4,15 +4,15 @@
<h5 class="card-title mb-0">Label layout</h5>
</div>
<div class="card-body">
<div class="d-flex flex-wrap gap-3">
<div v-for="t in labelTemplates" :key="t.id" class="template-option text-center"
<div class="template-grid d-flex flex-wrap align-items-start">
<div v-for="t in labelTemplates" :key="t.id" class="template-option d-flex flex-column text-center"
:class="{'template-option-disabled': !isAvailable(t)}"
:title="isAvailable(t) ? '' : 'Not available - open this page from an item to fill in the fields this layout needs.'"
role="button" @click="isAvailable(t) && $emit('input', t.id)">
<canvas :ref="el => setTemplateCanvasRef(t.id, el)"
class="img-thumbnail template-thumb-canvas"
:class="{'border-primary': value === t.id}"></canvas>
<div class="small mt-1"
<div class="small"
:class="{'fw-bold text-primary': value === t.id}">
{{ t.name }}
</div>
@ -24,6 +24,12 @@
</template>
<style scoped>
/* This build pins Bootstrap 4 (no gap-* utilities, those are Bootstrap 5.1+), so the spacing
here is plain CSS gap rather than a Bootstrap gap-N class. */
.template-grid {
gap: 1rem;
}
.template-option {
width: 20rem;
}
@ -46,7 +52,7 @@
</style>
<script>
import {LABEL_TEMPLATES, drawFallbackLabel} from "@/label-drawing.js";
import {LABEL_TEMPLATES, drawFallbackLabel, templateIsAvailable, templateContent} from "@/label-drawing.js";
export default {
name: "LabelLayoutPreview",
@ -89,14 +95,7 @@ export default {
},
isAvailable(t) {
return [t.qr, t.text].filter(Boolean).every(key => this.fields[key] !== undefined);
},
contentFor(t) {
return {
qr: t.qr ? this.fields[t.qr] : null,
text: t.text ? this.fields[t.text] : null,
};
return templateIsAvailable(t, this.fields);
},
/* Live per-template thumbnails. Always uses the content-fit fallback renderer (rather
@ -109,7 +108,7 @@ export default {
if (!canvas) {
continue;
}
const content = this.contentFor(t);
const content = templateContent(t, this.fields);
if (!this.isAvailable(t) || (!content.qr && !content.text)) {
canvas.width = 1;
canvas.height = 1;