Show which category colors have already been used when creating/editing a category

app/assets/javascripts/discourse/templates/modal/edit_category.js.handlebars

@@ -37,7 +37,7 @@
           <div class='input-prepend input-append' style="margin-top: 10px;">
             <span class='color-title'>{{i18n category.background_color}}:</span>
             <span class='add-on'>#</span>{{view Discourse.TextField valueBinding="color" placeholderKey="category.color_placeholder" maxlength="6"}}
-            {{view Discourse.ColorsView colorsBinding="view.backgroundColors" valueBinding="color"}}
+            {{view Discourse.ColorsView colorsBinding="view.backgroundColors" usedColorsBinding="view.usedBackgroundColors" valueBinding="color"}}
           </div>
 
           <div class='input-prepend input-append'>

app/assets/javascripts/discourse/views/modal/colors_view.js

@@ -7,28 +7,31 @@
  @module Discourse
  **/
 Discourse.ColorsView = Ember.ContainerView.extend({
-    classNames: 'colors-container',
+  classNames: 'colors-container',
 
-    init: function() {
-        this._super();
-        return this.createButtons();
-    },
+  init: function() {
+    this._super();
+    return this.createButtons();
+  },
 
-    createButtons: function() {
-        var colors = this.get('colors');
-        var _this = this;
+  createButtons: function() {
+    var colors = this.get('colors');
+    var _this = this;
+    var isUsed, usedColors = this.get('usedColors') || [];
 
-        colors.each(function(color) {
-            _this.addObject(Discourse.View.create({
-                tagName: 'button',
-                attributeBindings: ['style'],
-                classNames: ['colorpicker'],
-                style: 'background-color: #' + color + ';',
-                click: function() {
-                    _this.set("value", color);
-                    return false;
-                }
-            }));
-        });
-    }
+    colors.each(function(color) {
+      isUsed = usedColors.indexOf(color.toUpperCase()) >= 0;
+      _this.addObject(Discourse.View.create({
+        tagName: 'button',
+        attributeBindings: ['style', 'title'],
+        classNames: ['colorpicker'].concat( isUsed ? ['used-color'] : ['unused-color'] ),
+        style: 'background-color: #' + color + ';',
+        title: isUsed ? I18n.t("js.category.already_used") : null,
+        click: function() {
+          _this.set("value", color);
+          return false;
+        }
+      }));
+    });
+  }
 });

app/assets/javascripts/discourse/views/modal/edit_category_view.js

@@ -29,6 +29,13 @@ Discourse.EditCategoryView = Discourse.ModalBodyView.extend({
     return Discourse.SiteSettings.category_colors.split("|").map(function(i) { return i.toUpperCase(); });
   }.property('Discourse.SiteSettings.category_colors'),
 
+  usedBackgroundColors: function() {
+    return Discourse.site.categories.map(function(c) {
+      // If editing a category, don't include its color:
+      return (!this.get('category.id') || this.get('category.color').toUpperCase() !== c.color.toUpperCase()) ? c.color.toUpperCase() : null;
+    }, this).compact();
+  }.property('Discourse.site.categories', 'category.id', 'category.color'),
+
   title: function() {
     if (this.get('category.id')) return Em.String.i18n("category.edit_long");
     return Em.String.i18n("category.create");

app/assets/stylesheets/application/colorpicker.css.scss

@@ -21,9 +21,12 @@
 
     .colorpicker {
       border: 1px solid $darkish_gray;
-      width: 15px;
-      height: 15px;
       margin-right: 2px;
+      width: 16px;
+      height: 16px;
+      &.used-color {
+        background: image-url("chosen-sprite.png") 1px 13px;
+      }
     }
   }
 }

config/locales/client.en.yml

@@ -705,6 +705,7 @@ en:
       no_description: "There is no description for this category."
       change_in_category_topic: "visit category topic to edit the description"
       hotness: "Hotness"
+      already_used: 'This color has been used by another category'
 
     flagging:
       title: 'Why are you flagging this post?'