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}`))