diff --git a/app/assets/javascripts/admin/templates/customize-colors.hbs b/app/assets/javascripts/admin/templates/customize-colors.hbs index 354598068b3..1ed39b8fcf2 100644 --- a/app/assets/javascripts/admin/templates/customize-colors.hbs +++ b/app/assets/javascripts/admin/templates/customize-colors.hbs @@ -1,11 +1,10 @@ -
{{combo-box content=colorSchemes nameProperty="name" value=colorSchemeId + selectionIcon="paint-brush" valueAttribute="id"}} {{#if colorSchemeChanged}} {{d-button action="changeScheme" class="btn-primary btn-small submit-edit" icon="check"}} diff --git a/app/assets/javascripts/discourse-common/components/combo-box.js.es6 b/app/assets/javascripts/discourse-common/components/combo-box.js.es6 index b2c66fc127f..314cf47c457 100644 --- a/app/assets/javascripts/discourse-common/components/combo-box.js.es6 +++ b/app/assets/javascripts/discourse-common/components/combo-box.js.es6 @@ -90,8 +90,17 @@ export default Ember.Component.extend(bufferedRender({ const $elem = this.$(); const caps = this.capabilities; const minimumResultsForSearch = (caps && caps.isIOS) ? -1 : 5; + if (!this.get("selectionTemplate") && this.get("selectionIcon")) { + this.selectionTemplate = (item) => { + let name = Em.get(item, 'text'); + name = Handlebars.escapeExpression(name); + return `${name}`; + }; + } $elem.select2({ - formatResult: this.comboTemplate, minimumResultsForSearch, + formatResult: this.comboTemplate, + formatSelection: this.selectionTemplate, + minimumResultsForSearch, width: this.get('width') || 'resolve', allowClear: true }); diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss index b353b8d0db5..223ca305a4f 100644 --- a/app/assets/stylesheets/common/admin/customize.scss +++ b/app/assets/stylesheets/common/admin/customize.scss @@ -13,6 +13,12 @@ .admin-footer { margin-top: 20px; } + .select2-chosen, .color-schemes li { + .fa { + margin-right: 6px; + color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + } + } .show-current-style { margin-left: 20px; float: left;