From 93f36cdf939b7fa1aa76715046eef2fe68504c52 Mon Sep 17 00:00:00 2001
From: Neil Lalonde <neillalonde@gmail.com>
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<h~P;ODe6HKm4X-Xq7>;#L<Ea?P!L2!J@n|UB1I7dp?^gX6c1in&=O-~8+$k7
zA#ckVH))o%COhp1OJ`@p!290J_q{hY)>@Jr#+X>Y4_IcA@(9ZXzyQO*oaQ=#lX`#Z
z6T<<p7T5rs1=b1d86czg@)7Xp45uBib50UwfX5;0#<QZ82F?j6KoNN4Y;o_3)~d>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;N7Y<IpDp(o(CSt76O0YzlDJ7HqZ&MiCchv7qkmFh-;t|
y5G|7e+b{5b+QW#8fRO1SYi(gU0G@ACF2+ArBJ5gVF=A-|0000<MNUMnLSTYEv1eBR
delta 505
zcmV<V0S5lc29gAjBYy$eNkl<Zc-rllO-lk%6oz9kY7tZBgbXe+BH9$Sao5HWHxVtO
zupok<AdJjvQ;-ND(IQ%e(uY~pPw)rYyLg4eg^5NqW)5@U!F$hTWS%)^?iGhRoldCn
z8<B8`g%80IutjbX6v3W0VGEQ&6_kKY*>mQK8Y>*{3i9)k<9}0ND-@<QMah|vRVnNk
z!eub7RoD?NU6Nxd-Rl<LucKlRo7M^2I4*L<{}vtv*+B_24tO+;8SnHl*!@j-0aW;8
zOm4u8PvK#(&+Bso6!u>!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<BPB=5o9YEN#MhQ1DnQfV?*08gM+;
z98l9HTn90awHT;J6%M)Z2G}(7j4iIq2)*zKkE3niGUsxB2j(;h%Xf7hRKW|Vaz0Dx
vv=U)&M5GOA?ZT$CeqmGE(Jm}w!mRKQ3+WtpCBGMH00000NkvXXu0mjfY8&G6
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 @@
<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'>
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?'