This commit is contained in:
j3d1 2026-08-27 22:34:07 +02:00
parent 341967a611
commit d606de8773
6 changed files with 49 additions and 70 deletions

View file

@ -4,17 +4,14 @@
<h5 class="card-title mb-0">Label layout</h5>
</div>
<div class="card-body">
<div class="mb-3 btn-group" role="group">
<input type="radio" class="btn-check" id="layout-filter-all"
autocomplete="off" value="all" v-model="activeTag">
<label class="btn btn-outline-secondary" for="layout-filter-all">All</label>
<template v-for="tag in labelTags" :key="tag">
<input type="radio" class="btn-check" :id="'layout-filter-' + tag"
autocomplete="off" :value="tag" v-model="activeTag">
<label class="btn btn-outline-secondary" :for="'layout-filter-' + tag">
{{ tagLabel(tag) }}
</label>
</template>
<div class="mb-3 btn-group btn-group-toggle" role="group">
<label class="btn btn-outline-secondary" :class="{active: activeTag === 'all'}">
<input type="radio" autocomplete="off" value="all" v-model="activeTag"> All
</label>
<label v-for="tag in labelTags" :key="tag" class="btn btn-outline-secondary"
:class="{active: activeTag === tag}">
<input type="radio" autocomplete="off" :value="tag" v-model="activeTag"> {{ tagLabel(tag) }}
</label>
</div>
<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"
@ -39,16 +36,7 @@
<span v-for="tag in t.tags" :key="tag" class="badge bg-secondary">{{ tagLabel(tag) }}</span>
</div>
<div class="small text-muted">{{ t.description }}</div>
<!-- Debugging aid: every QR-family/text leaf's raw size numbers, shown regardless
of whether either tripped a warning above - see label.js's qrInfo/textInfo. -->
<div v-if="t.id in qrInfo || t.id in textInfo" class="small text-secondary">
<div v-for="(info, i) in qrInfo[t.id]" :key="'qr' + i">
mm-per-mod: {{ info.moduleMm.toFixed(2) }}, px-per-mod: {{ info.scale }}
</div>
<div v-for="(info, i) in textInfo[t.id]" :key="'text' + i">
text-mm: {{ info.fontMm.toFixed(2) }}, text-px: {{ info.fontPx.toFixed(1) }}
</div>
</div>
</div>
</div>
</div>

View file

@ -66,16 +66,16 @@
<div class="row g-2 align-items-end">
<div class="col-auto">
<label class="form-label">Orientation</label>
<div class="btn-group" role="group">
<input type="radio" class="btn-check" id="orientation-along"
autocomplete="off" value="along" v-model="orientation">
<label class="btn btn-outline-secondary" for="orientation-along">
Along tape
<div class="btn-group btn-group-toggle" role="group">
<label class="btn btn-outline-secondary"
:class="{active: orientation === 'along'}">
<input type="radio" autocomplete="off" value="along"
v-model="orientation"> Along tape
</label>
<input type="radio" class="btn-check" id="orientation-across"
autocomplete="off" value="across" v-model="orientation">
<label class="btn btn-outline-secondary" for="orientation-across">
Across tape
<label class="btn btn-outline-secondary"
:class="{active: orientation === 'across'}">
<input type="radio" autocomplete="off" value="across"
v-model="orientation"> Across tape
</label>
</div>
</div>
@ -85,10 +85,11 @@
v-model.number="copies" min="1" max="20" :disabled="!connected">
</div>
<div class="col-auto" v-if="chainSupported">
<label class="form-label d-block" for="chain-mode">Chain mode</label>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch"
<label class="form-label d-block">Chain mode</label>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input"
id="chain-mode" v-model="chainMode">
<label class="custom-control-label" for="chain-mode"></label>
</div>
</div>
<div class="col-auto" v-if="!connected">

View file

@ -4,10 +4,10 @@
<div class="container-fluid p-0">
<h1 class="h3 mb-3">Scan a code</h1>
<div class="form-check form-switch mb-3">
<input class="form-check-input" type="checkbox" role="switch" id="visitFirstMatch"
<div class="custom-control custom-switch mb-3">
<input class="custom-control-input" type="checkbox" id="visitFirstMatch"
v-model="visitFirstMatch">
<label class="form-check-label" for="visitFirstMatch">Visit first match</label>
<label class="custom-control-label" for="visitFirstMatch">Visit first match</label>
</div>
<div v-if="error" class="alert alert-danger" role="alert">{{ error }}</div>

View file

@ -6,10 +6,10 @@
<form>
<div class="mb-3">
<label class="form-label d-block">Email notifications</label>
<div class="form-check form-switch">
<input class="form-check input-switch" type="checkbox"
<div class="custom-control custom-switch">
<input class="custom-control-input" type="checkbox"
id="flexSwitchCheckDefault">
<label class="form-check label-switch" for="flexSwitchCheckDefault">Receive
<label class="custom-control-label" for="flexSwitchCheckDefault">Receive
email notifications</label>
</div>
</div>

View file

@ -6,10 +6,10 @@
<form>
<div class="mb-3">
<label class="form-label d-block">Web notifications</label>
<div class="form-check form-switch">
<input class="form-check input-switch" type="checkbox"
<div class="custom-control custom-switch">
<input class="custom-control-input" type="checkbox"
id="flexSwitchCheckDefault">
<label class="form-check label-switch" for="flexSwitchCheckDefault">Receive
<label class="custom-control-label" for="flexSwitchCheckDefault">Receive
web notifications</label>
<small>These notifications can be sent to your email or
phone</small>

View file

@ -6,38 +6,28 @@
<form>
<div class="mb-3">
<label class="form-label d-block">Profile visibility</label>
<div class="form-check form-switch">
<input class="form-check input-switch" type="checkbox"
id="flexSwitchCheckDefault">
<label class="form-check
label-switch" for="flexSwitchCheckDefault">Visible to
everyone</label>
</div>
</div>
<div class="mb-3">
<label class="form-label
d-block">Photo visibility</label>
<div class="form-check
form-switch">
<input class="form-check
input-switch" type="checkbox"
id="flexSwitchCheckDefault">
<label class="form-check
label-switch" for="flexSwitchCheckDefault">Visible to
<div class="custom-control custom-switch">
<input class="custom-control-input" type="checkbox"
id="profile-visibility">
<label class="custom-control-label" for="profile-visibility">Visible to
everyone</label>
</div>
</div>
<div class="mb-3">
<label class="form-label
d-block">Last seen</label>
<div class="form-check
form-switch">
<input class="form-check
input-switch" type="checkbox"
id="flexSwitchCheckDefault">
<label class="form-check
label-switch" for="flexSwitchCheckDefault">Visible to
<label class="form-label d-block">Photo visibility</label>
<div class="custom-control custom-switch">
<input class="custom-control-input" type="checkbox"
id="photo-visibility">
<label class="custom-control-label" for="photo-visibility">Visible to
everyone</label>
</div>
</div>
<div class="mb-3">
<label class="form-label d-block">Last seen</label>
<div class="custom-control custom-switch">
<input class="custom-control-input" type="checkbox"
id="last-seen-visibility">
<label class="custom-control-label" for="last-seen-visibility">Visible to
everyone</label>
</div>
</div>