diff --git a/modules/system/assets/ui/js/inspector.editor.dropdown.js b/modules/system/assets/ui/js/inspector.editor.dropdown.js
index 40711de8c..b5d6f2cab 100644
--- a/modules/system/assets/ui/js/inspector.editor.dropdown.js
+++ b/modules/system/assets/ui/js/inspector.editor.dropdown.js
@@ -54,11 +54,41 @@
}
}
+ DropdownEditor.prototype.formatSelectOption = function(state) {
+ if (!state.id)
+ return state.text; // optgroup
+
+ var option = state.element,
+ iconClass = option.getAttribute('data-icon'),
+ imageSrc = option.getAttribute('data-image')
+
+ if (iconClass) {
+ return ' ' + state.text
+ }
+
+ if (imageSrc) {
+ return '
' + state.text
+ }
+
+ return state.text
+ }
+
DropdownEditor.prototype.createOption = function(select, title, value) {
var option = document.createElement('option')
if (title !== null) {
- option.textContent = title
+ if (!$.isArray(title)) {
+ option.textContent = title
+ } else {
+ if (title[1].indexOf('.') !== -1) {
+ option.setAttribute('data-image', title[1])
+ }
+ else {
+ option.setAttribute('data-icon', title[1])
+ }
+
+ option.textContent = title[0]
+ }
}
if (value !== null) {
@@ -89,6 +119,12 @@
options.placeholder = this.propertyDefinition.placeholder
}
+ options.templateResult = this.formatSelectOption
+ options.templateSelection = this.formatSelectOption
+ options.escapeMarkup = function(m) {
+ return m
+ }
+
$(select).select2(options)
if (!Modernizr.touch) {
diff --git a/modules/system/assets/ui/less/inspector.less b/modules/system/assets/ui/less/inspector.less
index 1e5333742..63c3a63a6 100644
--- a/modules/system/assets/ui/less/inspector.less
+++ b/modules/system/assets/ui/less/inspector.less
@@ -635,6 +635,10 @@ div.inspector-dictionary-container {
li.select2-no-results {
padding: 5px 12px 5px;
}
+
+ li > i, li > img {
+ margin-left: 6px;
+ }
}
.select2-search {
diff --git a/modules/system/assets/ui/storm-min.js b/modules/system/assets/ui/storm-min.js
index e3549f49e..6c7ca724e 100644
--- a/modules/system/assets/ui/storm-min.js
+++ b/modules/system/assets/ui/storm-min.js
@@ -4192,8 +4192,15 @@ if(!this.dynamicOptions){this.loadStaticOptions(select)}
this.containerCell.appendChild(select)
this.initCustomSelect()
if(this.dynamicOptions){this.loadDynamicOptions(true)}}
+DropdownEditor.prototype.formatSelectOption=function(state){if(!state.id)
+return state.text;var option=state.element,iconClass=option.getAttribute('data-icon'),imageSrc=option.getAttribute('data-image')
+if(iconClass){return' '+state.text}
+if(imageSrc){return'
'+state.text}
+return state.text}
DropdownEditor.prototype.createOption=function(select,title,value){var option=document.createElement('option')
-if(title!==null){option.textContent=title}
+if(title!==null){if(!$.isArray(title)){option.textContent=title}else{if(title[1].indexOf('.')!==-1){option.setAttribute('data-image',title[1])}
+else{option.setAttribute('data-icon',title[1])}
+option.textContent=title[0]}}
if(value!==null){option.value=value}
select.appendChild(option)}
DropdownEditor.prototype.createOptions=function(select,options){for(var value in options){this.createOption(select,options[value],value)}}
@@ -4201,6 +4208,9 @@ DropdownEditor.prototype.initCustomSelect=function(){var select=this.getSelect()
if(Modernizr.touch){return}
var options={dropdownCssClass:'ocInspectorDropdown'}
if(this.propertyDefinition.placeholder!==undefined){options.placeholder=this.propertyDefinition.placeholder}
+options.templateResult=this.formatSelectOption
+options.templateSelection=this.formatSelectOption
+options.escapeMarkup=function(m){return m}
$(select).select2(options)
if(!Modernizr.touch){this.indicatorContainer=$('.select2-container',this.containerCell)
this.indicatorContainer.addClass('loading-indicator-container size-small')}}
diff --git a/modules/system/assets/ui/storm.css b/modules/system/assets/ui/storm.css
index 3896030da..298398d7a 100644
--- a/modules/system/assets/ui/storm.css
+++ b/modules/system/assets/ui/storm.css
@@ -2538,6 +2538,7 @@ div.inspector-dictionary-container table.inspector-dictionary-table tbody tr:las
.select2-dropdown.ocInspectorDropdown > .select2-results > .select2-results__options{font-size:12px}
.select2-dropdown.ocInspectorDropdown > .select2-results > li > div{padding:5px 12px 5px}
.select2-dropdown.ocInspectorDropdown > .select2-results li.select2-no-results{padding:5px 12px 5px}
+.select2-dropdown.ocInspectorDropdown > .select2-results li > i,.select2-dropdown.ocInspectorDropdown > .select2-results li > img{margin-left:6px}
.select2-dropdown.ocInspectorDropdown .select2-search{min-height:26px;position:relative;border-bottom:1px solid #b2b9be}
.select2-dropdown.ocInspectorDropdown .select2-search:after{position:absolute;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f002";right:10px;top:10px;color:#95a5a6}
.select2-dropdown.ocInspectorDropdown .select2-search input.select2-search__field{min-height:26px;background:transparent !important;padding-left:12px;padding-right:12px;border:none}