From 93f36cdf939b7fa1aa76715046eef2fe68504c52 Mon Sep 17 00:00:00 2001 From: Neil Lalonde Date: Mon, 8 Apr 2013 18:33:36 -0400 Subject: [PATCH] Show which category colors have already been used when creating/editing a category --- app/assets/images/chosen-sprite.png | Bin 530 -> 842 bytes .../modal/edit_category.js.handlebars | 2 +- .../discourse/views/modal/colors_view.js | 45 ++++++++++-------- .../views/modal/edit_category_view.js | 7 +++ .../application/colorpicker.css.scss | 7 ++- config/locales/client.en.yml | 1 + 6 files changed, 38 insertions(+), 24 deletions(-) diff --git a/app/assets/images/chosen-sprite.png b/app/assets/images/chosen-sprite.png index a49cbc621c44fe0a105f59845639d3da0e97e2d6..95d9d63bb9fb8960b381b8714fc647946a9db917 100644 GIT binary patch delta 820 zcmbQla*Az&ay# zE(?bkkKy))-CYa}OxHbK978hhy`AZwA?zq|w0`rlM~*p{rM&(yb2;fRTA(4vva;iW zr-0@wN0F&b;vW}@y!3Qo>8=P6aB;Ey@?x!$t02q5dRGAv{_%&{2}`}rf%CVt{L&3b_0@PRqctQsd*)xQ!x z%(y}92E!cIYn*Q+6&8R0B>3S4&vMxf#ePC*4aXH8LPCO@iAIQ^BNq;W~_IQF0^@ei@nh{ zbf0Xmhs$C^mOG5Q=IqodklzuPKb5aR_CPyJ$jkOg6DuERZIIfrlBI@KPcJe$Ytp4x zYEbqUxNqPrw$&0`21*$Bs7jN-l+~yR;w$JNy?*ZQ2$M2I&7Z=a@ zcvfzgYc|&owQbHDKD(Y4Z}YxXe>#2+)70w~K|R&wj2AY1_+TV-{zH=2Y0(4P4Z^E@ zCPmC--nntFkj(uj&*CDpz2ii68~5roe)Ow1XZ)SQ{{9-%T$cmwjegm03yy3TKG3uE zTdHmP4n5|(Ooa_y)rRVBUuzF867?v_FSbbyiz+F06`Cb0JLUgk0a4fEQrB2wit0@= zUT8W$uuRy{%5a@2R9o_Y&dU#3OFVvx+3PafK9G7L*0FI#uD0)8?jFhHg85Ok6^_hz znLaYTFg*4}GIEfc=nYbD&FuSA||Ke)Tf)bhdJ1M}GB zPKYtp-{0Tb@Y?JG=Z4PchC1;r+!h_#3xox9Co|pF|4?`9a7TB;gqMohxrvqx^YVlB bj@gGPy@^UNOv+?nU|{fc^>bP0l+XkKKCx$4 delta 505 zcmX@bHi>0|ay{csPZ!6Kid%1I_{F z7AW+b$qJspp?Fa#s^wC9tBlbTdigD}HdW`h052Jj?WVqU~05{Z@RG zo>gyQ#6%>o~G8%60=Za3SRM}m^y~T0zCA}Xh>n`@kS_yP` za2@3TaP*_L$BI8oU0>#3P$-&- z4}G_p_2`)OUly&4^-&Wy_$fW~un^*7uqiKoAa&)S=<{h-iKpTkm}amUPIy+dhes#( zP-Vb}2uqvu6+ z?9WU%PnVa {{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?'