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> <h5 class="card-title mb-0">Label layout</h5>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="mb-3 btn-group" role="group"> <div class="mb-3 btn-group btn-group-toggle" role="group">
<input type="radio" class="btn-check" id="layout-filter-all" <label class="btn btn-outline-secondary" :class="{active: activeTag === 'all'}">
autocomplete="off" value="all" v-model="activeTag"> <input type="radio" autocomplete="off" value="all" v-model="activeTag"> All
<label class="btn btn-outline-secondary" for="layout-filter-all">All</label> </label>
<template v-for="tag in labelTags" :key="tag"> <label v-for="tag in labelTags" :key="tag" class="btn btn-outline-secondary"
<input type="radio" class="btn-check" :id="'layout-filter-' + tag" :class="{active: activeTag === tag}">
autocomplete="off" :value="tag" v-model="activeTag"> <input type="radio" autocomplete="off" :value="tag" v-model="activeTag"> {{ tagLabel(tag) }}
<label class="btn btn-outline-secondary" :for="'layout-filter-' + tag"> </label>
{{ tagLabel(tag) }}
</label>
</template>
</div> </div>
<div class="template-grid d-flex flex-wrap align-items-start"> <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" <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> <span v-for="tag in t.tags" :key="tag" class="badge bg-secondary">{{ tagLabel(tag) }}</span>
</div> </div>
<div class="small text-muted">{{ t.description }}</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> </div>
</div> </div>

View file

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

View file

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

View file

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

View file

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

View file

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