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?'