Add filters to colors ui

app/assets/javascripts/admin/controllers/admin_customize_colors_controller.js

@@ -8,19 +8,60 @@
 **/
 Discourse.AdminCustomizeColorsController = Ember.ArrayController.extend({
 
+  filter: null,
+  onlyOverridden: false,
+
   baseColorScheme: function() {
     return this.get('model').findBy('id', 1);
   }.property('model.@each.id'),
 
+  baseColors: function() {
+    var baseColorsHash = Em.Object.create({});
+    _.each(this.get('baseColorScheme.colors'), function(color){
+      baseColorsHash.set(color.get('name'), color);
+    });
+    return baseColorsHash;
+  }.property('baseColorScheme'),
+
   removeSelected: function() {
     this.removeObject(this.get('selectedItem'));
     this.set('selectedItem', null);
   },
 
+  filterContent: Discourse.debounce(function() {
+    if (!this.get('selectedItem')) { return; }
+
+    var filter;
+    if (this.get('filter')) {
+      filter = this.get('filter').toLowerCase();
+    }
+
+    if ((filter === undefined || filter.length < 1) && !this.get('onlyOverridden')) {
+      this.set('colors', this.get('selectedItem.colors'));
+      return;
+    }
+
+    var matches = Em.A(), self = this, baseColor;
+
+    _.each(this.get('selectedItem.colors'), function(color){
+      if (filter === undefined || filter.length < 1 || color.get('name').toLowerCase().indexOf(filter) > -1) {
+        if (self.get('onlyOverridden')) {
+          baseColor = self.get('baseColors').get(color.get('name'));
+          if (color.get('hex') === baseColor.get('hex') && color.get('opacity') === baseColor.get('opacity')) {
+            return;
+          }
+        }
+        matches.pushObject(color);
+      }
+    });
+    this.set('colors', matches);
+  }, 250).observes('filter', 'onlyOverridden'),
+
   actions: {
     selectColorScheme: function(colorScheme) {
       if (this.get('selectedItem')) { this.get('selectedItem').set('selected', false); }
       this.set('selectedItem', colorScheme);
+      this.set('colors', colorScheme.get('colors'));
       colorScheme.set('savingStatus', null);
       colorScheme.set('selected', true);
     },
@@ -32,6 +73,10 @@ Discourse.AdminCustomizeColorsController = Ember.ArrayController.extend({
       this.send('selectColorScheme', newColorScheme);
     },
 
+    clearFilter: function() {
+      this.set('filter', null);
+    },
+
     undo: function(color) {
       color.undo();
     },

app/assets/javascripts/admin/templates/customize_colors.js.handlebars

@@ -13,9 +13,9 @@
 </div>
 
 {{#if selectedItem}}
-  {{#with selectedItem}}
+  <div class="current-style color-scheme">
-    <div class="current-style color-scheme">
+    <div class="admin-container">
-      <div class="admin-container">
+      {{#with selectedItem}}
         <h1>{{textField class="style-name" value=name}}</h1>
 
         <div class="controls">
@@ -25,32 +25,47 @@
           <span>{{view Ember.Checkbox checkedBinding="enabled"}} {{i18n admin.customize.enabled}}</span>
           <a {{action destroy}} class='delete-link'>{{i18n admin.customize.delete}}</a>
         </div>
+      {{/with}}
 
-        <table class="table colors">
+      <br/>
-          <thead>
+
-            <tr>
+      <div class='admin-controls'>
-              <th></th>
+        <div class='search controls'>
-              <th class="hex">{{i18n admin.customize.color}}</th>
+          <label>
-              <th class="opacity">{{i18n admin.customize.opacity}}</th>
+            {{input type="checkbox" checked=onlyOverridden}}
-              <th></th>
+            {{i18n admin.site_settings.show_overriden}}
-            </tr>
+          </label>
-          </thead>
+        </div>
-          <tbody>
+        <div class='controls'>
-            {{#each colors}}
+          {{textField value=filter placeholderKey="type_to_filter"}}
-              <tr {{bind-attr class="changed"}}>
+          <button {{action clearFilter}} class="btn">{{i18n admin.site_settings.clear_filter}}</button>
-                <td class="name">{{name}}</td>
+        </div>
-                <td class="hex">{{color-input hexValue=hex brightnessValue=brightness}}</td>
-                <td class="opacity">{{textField class="opacity-input" value=opacity maxlength="3"}}</td>
-                <td class="changed">
-                  <button {{bind-attr class=":btn :undo changed::invisible"}} {{action undo this}}>undo</button>
-                </td>
-              </tr>
-            {{/each}}
-          </tbody>
-        </table>
       </div>
+
+      <table class="table colors">
+        <thead>
+          <tr>
+            <th></th>
+            <th class="hex">{{i18n admin.customize.color}}</th>
+            <th class="opacity">{{i18n admin.customize.opacity}}</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          {{#each colors}}
+            <tr {{bind-attr class="changed"}}>
+              <td class="name">{{name}}</td>
+              <td class="hex">{{color-input hexValue=hex brightnessValue=brightness}}</td>
+              <td class="opacity">{{textField class="opacity-input" value=opacity maxlength="3"}}</td>
+              <td class="changed">
+                <button {{bind-attr class=":btn :undo changed::invisible"}} {{action undo this}}>undo</button>
+              </td>
+            </tr>
+          {{/each}}
+        </tbody>
+      </table>
     </div>
-  {{/with}}
+  </div>
 {{else}}
   <p class="about">{{i18n admin.customize.colors.about}}</p>
 {{/if}}