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 zcmV-41Izr91j+`GBYyw}VoOIv0RI600RN!9r;`8x010qNS#tmY3ljhU3ljkVnw%H_ z000McNliru-2@003^BKWyNUn+0@q1IK~!ko?U_$#6G0fof3v3IL2T0+O8f%~LNB7A zC>{i;#L@Jr#+X>Y4_IcA@(9ZXzyQO*oaQ=#lX`#Z z6T<U z=<%{juLn+x-G5oJ+OBil9(ji2^t4(>VX@YUv84mxl7JO}Ct^DUI}P0XpA4@7dY5qh z67UO{athR}#(9maGQ1r)RwWs~foH%(42Ii)Q@~c>Eik$S3^$~-J^>?DviKaBh`Ii8 zfd$yFr>PA)D#n2~6>}rN$C&FM0eULt4got`4KToK0e?qZaXjYQ2Z23Rz8#H7M58eT z+yT0rxh!xWxL$9S4uBoNhXhpVhmw(b;3}{hxTyqu1uiaGTWXTh>IQBJU_osu4dj3U z;HQt$vKzP!bm;vDa3uumqqIx`wnAD4zDmoDzzuEV?_xEhbDZ(b9=b(q3b-b=L$LEj z%NK@A(tpceoC1~Ccv6gecLC6_@bEGc&+uYO%N4*YfD@`rl31Aoxv{+x9N*;TURi5P zUKK5Yy)1$8PJcH6`(y|2)&iYGz=wfOYwd8vw-dmOwf1E_XSgl{-2!odihD69M)iHc zq7_JVZ*x3lR$6p(MG~4F9hCp05EVto8rB3{a(^^v=qW?sIbg7b0M`OlD;fW6>F{c# zNck2&EdxE^8t4{?v8Zh;P2CHO8DnstT77sy1Kk4g0_ZWu^ciEa0-FW;fL*}ndfQTH zpu1$J+B6Pr)^rP1>J;TG;N7YmQK8Y>*{3i9)k<9}0ND-@!5gAjK4`I<~g)OjSe9ubYgc(`mMl(IM^qNPfECo@RH|)O^ z8LNh**)8*Z7Jq&Kk02p(E@*(;zY1GmIV8Ju3$#I#(k}R9uF;QOIuM9R3c(NX#qldh zsQjfx>2J^`??P6kaH?Bb(gIUjg;S!X-^92{X;s2<(|TqbCq=HIvBLK}n&QSg{RAq} ze_D~SP9ot*I1&y3Ja=>88q~oR=axEQ%3gp1m {{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?'