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}