diff --git a/app/assets/images/chosen-sprite.png b/app/assets/images/chosen-sprite.png
index a49cbc621c4..95d9d63bb9f 100644
Binary files a/app/assets/images/chosen-sprite.png and b/app/assets/images/chosen-sprite.png differ
diff --git a/app/assets/javascripts/discourse/templates/modal/edit_category.js.handlebars b/app/assets/javascripts/discourse/templates/modal/edit_category.js.handlebars
index e6d1823216a..06c691f6b20 100644
--- a/app/assets/javascripts/discourse/templates/modal/edit_category.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/modal/edit_category.js.handlebars
@@ -37,7 +37,7 @@
{{i18n category.background_color}}:
#{{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"}}
diff --git a/app/assets/javascripts/discourse/views/modal/colors_view.js b/app/assets/javascripts/discourse/views/modal/colors_view.js
index 8dbd7e3e0a7..26d058c422c 100644
--- a/app/assets/javascripts/discourse/views/modal/colors_view.js
+++ b/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;
+ }
+ }));
+ });
+ }
});
diff --git a/app/assets/javascripts/discourse/views/modal/edit_category_view.js b/app/assets/javascripts/discourse/views/modal/edit_category_view.js
index 9008b46709d..4991464b8a2 100644
--- a/app/assets/javascripts/discourse/views/modal/edit_category_view.js
+++ b/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");
diff --git a/app/assets/stylesheets/application/colorpicker.css.scss b/app/assets/stylesheets/application/colorpicker.css.scss
index 319d391940d..fc295a63f82 100644
--- a/app/assets/stylesheets/application/colorpicker.css.scss
+++ b/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;
+ }
}
}
}
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 9df355cab01..4b599a0624b 100644
--- a/config/locales/client.en.yml
+++ b/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?'