feat: add trusted-only debug outlines toggle to badge print controls panel
This commit is contained in:
@@ -283,6 +283,22 @@
|
|||||||
?? ''
|
?? ''
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// --- Debug Outlines Toggle ---
|
||||||
|
let debug_outlines = $state(false);
|
||||||
|
$effect(() => {
|
||||||
|
if (browser) {
|
||||||
|
if (debug_outlines) {
|
||||||
|
document.documentElement.classList.add('debug_outlines');
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.remove('debug_outlines');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return () => {
|
||||||
|
if (browser) document.documentElement.classList.remove('debug_outlines');
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
// --- Focus management: focus the input when its accordion opens ---
|
// --- Focus management: focus the input when its accordion opens ---
|
||||||
// rAF gives the CSS accordion one repaint tick before focus() is called,
|
// rAF gives the CSS accordion one repaint tick before focus() is called,
|
||||||
// avoiding jumping to an invisible (height: 0) element.
|
// avoiding jumping to an invisible (height: 0) element.
|
||||||
@@ -863,6 +879,18 @@
|
|||||||
<span class="flex-1 border-t border-gray-200 dark:border-gray-700"></span>
|
<span class="flex-1 border-t border-gray-200 dark:border-gray-700"></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Debug Outlines Toggle (for print testing) -->
|
||||||
|
<div class="flex items-center gap-2 px-2 py-1.5">
|
||||||
|
<label class="flex items-center gap-2 cursor-pointer select-none">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
class="checkbox"
|
||||||
|
bind:checked={debug_outlines}
|
||||||
|
/>
|
||||||
|
<span class="text-xs">Show debug outlines</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- === BADGE TYPE === (only when template defines badge_type_list) -->
|
<!-- === BADGE TYPE === (only when template defines badge_type_list) -->
|
||||||
{#if badge_type_code_li.length > 0}
|
{#if badge_type_code_li.length > 0}
|
||||||
<div class="field-card rounded-lg overflow-hidden" class:field-card--active={active_field === 'badge_type'}>
|
<div class="field-card rounded-lg overflow-hidden" class:field-card--active={active_field === 'badge_type'}>
|
||||||
|
|||||||
Reference in New Issue
Block a user