From f58bf751bcfdd02dc5045c0758d12a879dc92c8b Mon Sep 17 00:00:00 2001
From: Anton Andriyevskyy <x.meglio@gmail.com>
Date: Sun, 10 Aug 2014 18:46:04 +0300
Subject: [PATCH] Show color for values of type:list site settings with word
 'colors' in their name

---
 .../components/list_setting_component.js      | 32 ++++++++++++++-----
 .../site_settings/setting_list.js.handlebars  |  2 +-
 config/site_settings.yml                      |  3 ++
 3 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/admin/components/list_setting_component.js b/app/assets/javascripts/admin/components/list_setting_component.js
index 2402126c0..ecbe97c95 100644
--- a/app/assets/javascripts/admin/components/list_setting_component.js
+++ b/app/assets/javascripts/admin/components/list_setting_component.js
@@ -13,15 +13,31 @@
 Discourse.ListSettingComponent = Ember.Component.extend({
   tagName: 'div',
 
+
+  _select2FormatSelection: function(selectedObject, jqueryWrapper, htmlEscaper) {
+    var text = selectedObject.text;
+    if (text.length <= 6) {
+      jqueryWrapper.closest('li.select2-search-choice').css({"border-bottom": '7px solid #'+text});
+    }
+    return htmlEscaper(text);
+  },
+
   didInsertElement: function(){
-    this.$("input").select2({
-        multiple: false,
-        separator: "|",
-        tokenSeparators: ["|"],
-        tags : this.get("choices") || [],
-        width: 'off',
-        dropdownCss: this.get("choices") ? {} : {display: 'none'}
-      }).on("change", function(obj) {
+
+    var select2_options = {
+      multiple: false,
+      separator: "|",
+      tokenSeparators: ["|"],
+      tags : this.get("choices") || [],
+      width: 'off',
+      dropdownCss: this.get("choices") ? {} : {display: 'none'}
+    };
+
+    var settingName = this.get('settingName');
+    if (typeof settingName === 'string' && settingName.indexOf('colors') > -1) {
+      select2_options.formatSelection = this._select2FormatSelection;
+    }
+    this.$("input").select2(select2_options).on("change", function(obj) {
         this.set("settingValue", obj.val.join("|"));
         this.refreshSortables();
       }.bind(this));
diff --git a/app/assets/javascripts/admin/templates/site_settings/setting_list.js.handlebars b/app/assets/javascripts/admin/templates/site_settings/setting_list.js.handlebars
index 85ab8b2bb..7fc9f1c3b 100644
--- a/app/assets/javascripts/admin/templates/site_settings/setting_list.js.handlebars
+++ b/app/assets/javascripts/admin/templates/site_settings/setting_list.js.handlebars
@@ -2,7 +2,7 @@
     <h3>{{unbound settingName}}</h3>
 </div>
 <div class="setting-value">
-  {{list-setting settingValue=value choices=choices}}
+  {{list-setting settingValue=value choices=choices settingName=setting}}
     <div class='desc'>{{unbound description}}</div>
 </div>
 {{#if dirty}}
diff --git a/config/site_settings.yml b/config/site_settings.yml
index 67cd795be..056a559bd 100644
--- a/config/site_settings.yml
+++ b/config/site_settings.yml
@@ -11,6 +11,9 @@
 # type: email    - Must be a valid email address.
 # type: username - Must match the username of an existing user.
 # type: list     - A list of values, chosen from a set of valid values defined in the choices option.
+#
+# A type:list setting with the word 'colors' in its name will make color values have a bold line of the corresponding color
+#
 required:
   title:
     client: true