diff --git a/app/assets/stylesheets/repository/repository_print_label_modal.scss b/app/assets/stylesheets/repository/repository_print_label_modal.scss index 5bb351d29..1e0acf0ca 100644 --- a/app/assets/stylesheets/repository/repository_print_label_modal.scss +++ b/app/assets/stylesheets/repository/repository_print_label_modal.scss @@ -42,4 +42,13 @@ min-height: 200px; padding: .5em 0; } + + .label-template-option { + align-items: center; + display: flex; + + img { + margin-right: .25em; + } + } } diff --git a/app/javascript/vue/repository_print_modal/container.vue b/app/javascript/vue/repository_print_modal/container.vue index bdc2a057e..fc27e4d82 100644 --- a/app/javascript/vue/repository_print_modal/container.vue +++ b/app/javascript/vue/repository_print_modal/container.vue @@ -39,6 +39,8 @@ :disableSearch="true" :options="templates_dropdown" :selectorId="`LabelTemplateSelector`" + :optionLabel="templateOption" + :onOpen="initTooltip" @dropdown:changed="selectTemplate" />
@@ -140,7 +142,14 @@ } return templates.map(i => { - return {value: i.id, label: i.attributes.name} + return { + value: i.id, + label: i.attributes.name, + params: { + icon: i.attributes.icon_url, + description: i.attributes.description || '' + } + } }) }, printers_dropdown() { @@ -217,6 +226,17 @@ }) } }); + }, + templateOption(option) { + return ` +
+ + ${option.label} +
+ ` + }, + initTooltip() { + $('[data-toggle="tooltip"]').tooltip(); } } } diff --git a/app/javascript/vue/shared/dropdown_selector.vue b/app/javascript/vue/shared/dropdown_selector.vue index 37c06c425..eabc3f3fc 100644 --- a/app/javascript/vue/shared/dropdown_selector.vue +++ b/app/javascript/vue/shared/dropdown_selector.vue @@ -93,6 +93,9 @@ optionLabel: { type: Function }, + onOpen: { + type: Function + }, inputTagMode: { type: Boolean, default: false @@ -114,6 +117,7 @@ closeOnSelect: this.closeOnSelect, selectAppearance: this.selectAppearance, disableSearch: this.disableSearch, + onOpen: this.onOpen, onChange: () => { if (this.onChange) this.onChange(); this.selectChanged(dropdownSelector.getValues(`#${this.selectorId}`))