scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-10-09 05:18:01 +08:00
Code Issues Projects Releases Packages Wiki Activity

Add default measurments to label templates [SCI-7129]

Browse source
This commit is contained in:
Martin Artnik 2022-08-30 16:16:02 +02:00
parent 185bf0b197
commit bd1e30d19b
1 changed files with 32 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
app/javascript/vue/label_template/components/label_preview.vue
View file

@ -25,15 +25,16 @@
<div class="label-preview__controls__size"> <div class="label-preview__controls__size">
<div class="sci-input-container"> <div class="sci-input-container">
<label>{{ i18n.t('label_templates.label_preview.height') }}</label> <label>{{ i18n.t('label_templates.label_preview.height') }}</label>
<input v-model="height" type="text" class="sci-input-field" /> <input v-model="height" type="number" class="sci-input-field" />
</div> </div>
<div class="sci-input-container"> <div class="sci-input-container">
<label>{{ i18n.t('label_templates.label_preview.width') }}</label> <label>{{ i18n.t('label_templates.label_preview.width') }}</label>
<input v-model="width" type="text" class="sci-input-field" /> <input v-model="width" type="number" class="sci-input-field" />
</div> </div>
<div class="sci-input-container"> <div class="sci-input-container">
<label>{{ i18n.t('label_templates.label_preview.density') }}</label> <label>{{ i18n.t('label_templates.label_preview.density') }}</label>
<DropdownSelector <DropdownSelector
v-if="density"
:key="unit" :key="unit"
:disableSearch="true" :disableSearch="true"
:options="unit === 'in' ? DPI_RESOLUTION_OPTIONS : DPMM_RESOLUTION_OPTIONS" :options="unit === 'in' ? DPI_RESOLUTION_OPTIONS : DPMM_RESOLUTION_OPTIONS"
@ -55,17 +56,17 @@
<script> <script>
const DPI_RESOLUTION_OPTIONS = [ const DPI_RESOLUTION_OPTIONS = [
{ value: 6, label: '6 dpi' }, { value: 6, label: '152 dpi' },
{ value: 8, label: '8 dpi', selected: true }, { value: 8, label: '203 dpi' },
{ value: 12, label: '12 dpi'}, { value: 12, label: '300 dpi'},
{ value: 24, label: '24 dpi' } { value: 24, label: '600 dpi' }
] ]
const DPMM_RESOLUTION_OPTIONS = [ const DPMM_RESOLUTION_OPTIONS = [
{ value: 6, label: '152 dpmm (6 dpi)' }, { value: 6, label: '6 dpmm (152 dpi)' },
{ value: 8, label: '203 dpmm (8 dpi)', selected: true }, { value: 8, label: '8 dpmm (203 dpi)' },
{ value: 12, label: '300 dpmm (12 dpi)' }, { value: 12, label: '12 dpmm (300 dpi)' },
{ value: 24, label: '600 dpmm (24 dpi)' } { value: 24, label: '24 dpmm (600 dpi)' }
] ]
import DropdownSelector from 'vue/shared/dropdown_selector.vue' import DropdownSelector from 'vue/shared/dropdown_selector.vue'
@ -82,8 +83,8 @@
DPMM_RESOLUTION_OPTIONS, DPMM_RESOLUTION_OPTIONS,
DPI_RESOLUTION_OPTIONS, DPI_RESOLUTION_OPTIONS,
optionsOpen: false, optionsOpen: false,
width: null, width: 2,
height: null, height: 1,
unit: 'in', unit: 'in',
density: 8, density: 8,
base64Image: null, base64Image: null,
@ -101,7 +102,26 @@
return this.unit === 'in' ? this.height * 25.4 : this.height; return this.unit === 'in' ? this.height * 25.4 : this.height;
} }
}, },
watch: {
unit() {
if (this.unit === 'in') {
this.width /= 25.4;
this.height /= 25.4;
} else {
this.width *= 25.4;
this.height *= 25.4;
}
this.setDefaults();
}
},
methods: { methods: {
setDefaults() {
!this.unit && (this.unit = 'in');
!this.density && (this.density = 8);
!this.width && (this.width = this.unit === 'in' ? 2 : 50.8);
!this.height && (this.height = this.unit === 'in' ? 1 : 25.4);
},
refreshPreview() { refreshPreview() {
$.ajax({ $.ajax({
url: this.previewUrl, url: this.previewUrl,