From c76d780675b42bdfb56c99d05ca7e4792fa51e78 Mon Sep 17 00:00:00 2001
From: Sam <sam.saffron@gmail.com>
Date: Wed, 19 Apr 2017 11:06:06 -0400
Subject: [PATCH] FEATURE: show a paintbrush for color schemes

---
 .../javascripts/admin/templates/customize-colors.hbs  |  5 ++---
 .../admin/templates/customize-themes-show.hbs         |  1 +
 .../discourse-common/components/combo-box.js.es6      | 11 ++++++++++-
 app/assets/stylesheets/common/admin/customize.scss    |  6 ++++++
 4 files changed, 19 insertions(+), 4 deletions(-)

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 @@
-<div class='content-list span6'>
+<div class='content-list span6 color-schemes'>
   <h3>{{i18n 'admin.customize.colors.long_title'}}</h3>
   <ul>
     {{#each model as |scheme|}}
       {{#unless scheme.is_base}}
-
       <li>
-        {{#link-to 'adminCustomize.colors.show' scheme replace=true}}{{scheme.description}}{{/link-to}}
+        {{#link-to 'adminCustomize.colors.show' scheme replace=true}}{{fa-icon 'paint-brush'}}{{scheme.description}}{{/link-to}}
       </li>
       {{/unless}}
     {{/each}}
diff --git a/app/assets/javascripts/admin/templates/customize-themes-show.hbs b/app/assets/javascripts/admin/templates/customize-themes-show.hbs
index 0bc970e2534..55c2c5bb399 100644
--- a/app/assets/javascripts/admin/templates/customize-themes-show.hbs
+++ b/app/assets/javascripts/admin/templates/customize-themes-show.hbs
@@ -39,6 +39,7 @@
   <p>{{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 `<i class='fa fa-${this.get("selectionIcon")}'></i>${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;