diff --git a/Gemfile b/Gemfile index 258024dd4..2565124f9 100644 --- a/Gemfile +++ b/Gemfile @@ -97,6 +97,7 @@ gem 'devise-async', git: 'https://github.com/mhfs/devise-async.git', branch: 'devise-4.x' gem 'image_processing', '~> 1.12' +gem 'img2zpl', git: 'https://github.com/scinote-eln/img2zpl' gem 'rufus-scheduler', '~> 3.5' gem 'discard', '~> 1.0' diff --git a/Gemfile.lock b/Gemfile.lock index 8dcdb0f63..baae5b720 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -39,6 +39,13 @@ GIT devise-async (0.10.2) devise (>= 4.0) +GIT + remote: https://github.com/scinote-eln/img2zpl + revision: 23d61cfc3e90ac4caa62dd08546fa0d7590a5140 + specs: + img2zpl (1.0.1) + mini_magick (~> 4.9) + GEM remote: http://rubygems.org/ specs: diff --git a/app/assets/stylesheets/label_templates/show.scss b/app/assets/stylesheets/label_templates/show.scss index 97c01d1d0..8d25a15e4 100644 --- a/app/assets/stylesheets/label_templates/show.scss +++ b/app/assets/stylesheets/label_templates/show.scss @@ -139,7 +139,16 @@ } } - .inser-field-dropdown { + .insert-field-dropdown { + .dimensions-container { + align-items: center; + display: flex; + + img { + margin-top: 27px; + } + } + .open-dropdown-button:not(.collapsed) { .fas { @include rotate(-180deg); @@ -171,7 +180,12 @@ display: flex; padding: 10px 10px 10px 24px; - .fas { + .fas:not(.fa-plus-square) { + margin-left: -1.25em; + margin-right: .25em; + } + + .fa-plus-square { @include font-main; display: none; margin-left: auto; @@ -180,7 +194,7 @@ &:hover { background-color: $color-concrete; - .fas { + .fa-plus-square { display: inline-block; } } diff --git a/app/javascript/vue/label_template/components/logo_insert_modal.vue b/app/javascript/vue/label_template/components/logo_insert_modal.vue new file mode 100644 index 000000000..25f13e622 --- /dev/null +++ b/app/javascript/vue/label_template/components/logo_insert_modal.vue @@ -0,0 +1,72 @@ + + + + + + × + + {{ i18n.t('label_templates.show.insert_dropdown.logo_modal.title') }} + + + + {{ i18n.t('label_templates.show.insert_dropdown.logo_modal.description') }} + + + {{ i18n.t('label_templates.show.insert_dropdown.logo_modal.width', {unit: unit}) }} + + + + + {{ i18n.t('label_templates.show.insert_dropdown.logo_modal.height', {unit: unit}) }} + + + + + + + + + + diff --git a/app/javascript/vue/label_template/container.vue b/app/javascript/vue/label_template/container.vue index 59bbe2d3b..b0502e98f 100644 --- a/app/javascript/vue/label_template/container.vue +++ b/app/javascript/vue/label_template/container.vue @@ -59,7 +59,7 @@ @@ -293,12 +293,12 @@ saveCursorPosition() { this.cursorPos = $(this.$refs.contentInput).prop('selectionStart'); }, - insertField(field) { + insertTag(tag) { this.enableContentEdit(); let textBefore = this.newContent.substring(0, this.cursorPos); let textAfter = this.newContent.substring(this.cursorPos, this.newContent.length); - this.newContent = textBefore + field + textAfter; - this.cursorPos = this.cursorPos + field.length; + this.newContent = textBefore + tag + textAfter; + this.cursorPos = this.cursorPos + tag.length; this.$nextTick(() => { $(this.$refs.contentInput).prop('selectionStart', this.cursorPos); diff --git a/app/javascript/vue/label_template/insert_field_dropdown.vue b/app/javascript/vue/label_template/insert_field_dropdown.vue index 78b89ef51..492963528 100644 --- a/app/javascript/vue/label_template/insert_field_dropdown.vue +++ b/app/javascript/vue/label_template/insert_field_dropdown.vue @@ -1,5 +1,5 @@ - + {{ i18n.t('label_templates.show.insert_dropdown.button') }} @@ -22,7 +22,7 @@ :data-template="tooltipTemplate" class="field-element" :title="i18n.t('label_templates.show.insert_dropdown.field_code', {code: field.tag})" - @click="$emit('insertField', field.tag)" + @click="insertTag(field)" > {{ field.key }} @@ -36,8 +36,9 @@ :data-template="tooltipTemplate" class="field-element" :title="i18n.t('label_templates.show.insert_dropdown.field_code', {code: field.tag})" - @click="$emit('insertField', field.tag)" + @click="insertTag(field)" > + {{ field.key }} @@ -51,7 +52,7 @@ :data-template="tooltipTemplate" class="field-element" :title="i18n.t('label_templates.show.insert_dropdown.field_code', {code: field.tag})" - @click="$emit('insertField', field.tag)" + @click="insertTag(field)" > {{ field.key }} @@ -62,10 +63,17 @@ +
{{ i18n.t('label_templates.show.insert_dropdown.logo_modal.description') }}