close Warning: HTML preview using PatchRenderer failed (ValueError: need more than 1 value to unpack)

Ticket #16059: 16059-filteredselectmultiple-better-ui.3.diff

File 16059-filteredselectmultiple-better-ui.3.diff, 21.3 KB (added by Julien Phalip, 12 years ago)
Line 
1diff --git a/django/contrib/admin/static/admin/css/widgets.css b/django/contrib/admin/static/admin/css/widgets.css
2index 4f4ea0a..7c69b35 100644
3--- a/django/contrib/admin/static/admin/css/widgets.css
4+++ b/django/contrib/admin/static/admin/css/widgets.css
5@@ -17,10 +17,18 @@
6     margin-bottom: 5px;
7 }
8 
9+.selector-chosen select {
10+    border-top: none;
11+}
12+
13 .selector-available h2, .selector-chosen h2 {
14     border: 1px solid #ccc;
15 }
16 
17+.selector-available h2 img, .selector-chosen h2 img {
18+    cursor: help;
19+}
20+
21 .selector .selector-available h2 {
22     background: white url(../img/nav-bg.gif) bottom left repeat-x;
23     color: #666;
24@@ -37,8 +45,13 @@
25     text-align: left;
26 }
27 
28-.selector .selector-chosen .selector-filter {
29-    padding: 4px 5px;
30+.selector .selector-filter label {
31+    width: 16px;
32+    padding: 2px;
33+}
34+
35+.selector .selector-filter label img {
36+    cursor: help;
37 }
38 
39 .selector .selector-available input {
40@@ -50,7 +63,7 @@
41     width: 22px;
42     height: 50px;
43     background: url(../img/chooser-bg.gif) top center no-repeat;
44-    margin: 8em 3px 0 3px;
45+    margin: 10em 3px 0 3px;
46     padding: 0;
47 }
48 
49@@ -78,18 +91,32 @@
50     margin-bottom: 2px;
51 }
52 
53+.selector-add.active {
54+    background: url(../img/selector-add-active.gif) top center no-repeat;
55+}
56+
57 .selector-remove {
58     background: url(../img/selector-remove.gif) top center no-repeat;
59 }
60 
61+.selector-remove.active {
62+    background: url(../img/selector-remove-active.gif) top center no-repeat;
63+}
64+
65 a.selector-chooseall, a.selector-clearall {
66-    display: block;
67-    width: 6em;
68+    display: inline-block;
69     text-align: left;
70     margin-left: auto;
71     margin-right: auto;
72     font-weight: bold;
73     color: #666;
74+}
75+
76+a.selector-chooseall {
77+    padding: 3px 18px 3px 0;
78+}
79+
80+a.selector-clearall {
81     padding: 3px 0 3px 18px;
82 }
83 
84@@ -98,14 +125,20 @@ a.selector-chooseall:hover, a.selector-clearall:hover {
85 }
86 
87 a.selector-chooseall {
88-    width: 7em;
89-    background: url(../img/selector-addall.gif) left center no-repeat;
90+    background: url(../img/selector-addall.gif) right center no-repeat;
91+}
92+
93+a.selector-chooseall.active {
94+    background: url(../img/selector-addall-active.gif) right center no-repeat;
95 }
96 
97 a.selector-clearall {
98     background: url(../img/selector-removeall.gif) left center no-repeat;
99 }
100 
101+a.selector-clearall.active {
102+    background: url(../img/selector-removeall-active.gif) left center no-repeat;
103+}
104 
105 /* STACKED SELECTORS */
106 
107@@ -151,10 +184,17 @@ a.selector-clearall {
108     background-image: url(../img/selector_stacked-add.gif);
109 }
110 
111+.stacked .selector-add.active {
112+    background-image: url(../img/selector_stacked-add-active.gif);
113+}
114+
115 .stacked .selector-remove {
116     background-image: url(../img/selector_stacked-remove.gif);
117 }
118 
119+.stacked .selector-remove.active {
120+    background-image: url(../img/selector_stacked-remove-active.gif);
121+}
122 
123 /* DATE AND TIME */
124 
125diff --git a/django/contrib/admin/static/admin/img/selector-add-active.gif b/django/contrib/admin/static/admin/img/selector-add-active.gif
126new file mode 100644
127index 0000000000000000000000000000000000000000..50132d1c439494a0a19e1d280385f03d3ac5599b
128GIT binary patch
129literal 606
130zcmZ?wbhEHb6krfwcoxafw(@M}n)ChZFW!3c{`tGF)3#h)y!U$bf@7^KPS-6uzUAco
131zS0BDVc=>6^`De|`PR`nSy<y48zyJQd`}||`iF+NZ&i1W6H+j>g_g{XjI&`ak@yUG`
132zo;EK(J#+ijhQ%lP*I%ezbo}9~&(pSE*?IQS;=MN)@4Gd3=e3%J$D5X(nz`fp(*3u$
133zoqaNI*R}d3CpVpX{Q29jre&vU7apIr<J!lsKewH_U$^+g#EqBw)?Il0;oG*ePnYb!
134z-Lm4$p)1etJp0(S=G=@OK%<WJZ@Ad7<ka-7SK3#edGqP}{5>~bzW=sp-|cz3uWvc?
135zWa{QC$8Wq`dhpJqjhE{epV)Z(?&i~vr*FGDch`+I#~w`He7Swq*`){W^sT@6^~dl3
136z|Nk@49Vq@}VPs&4WY7WG42ly5_T3GUO_4kje3Fi`Y|PEgg2Ei`p1iykJ|h0&z5Zgl
137z0rM9G$k+=tamfX*T&cAxSkXVyMZhv_>sB}KZDAbD#%4hW4zfg89~5H~^<`z%<UXet
138z5g~Qji=C6{hVsSR7nN=pa56sfxO3a}k(#I#1A`OGd!vi0Zy4CQ^h1CCQi#z0CC!#s
139zv%_hF0>2RJ`V9$77#OFv^CvqjY0A7XSuxNk>&%VE4w{br3Jf1VK49#UQa3Uc3OT{Z
140NtIjEA%EiK94FJ;24lMux
141
142literal 0
143HcmV?d00001
144
145diff --git a/django/contrib/admin/static/admin/img/selector-add.gif b/django/contrib/admin/static/admin/img/selector-add.gif
146index 50132d1c439494a0a19e1d280385f03d3ac5599b..a5e90637e8355446be7f66dd3ddb55f9e6dc4e5e 100644
147GIT binary patch
148literal 184
149zcmZ?wbhEHb6krfw*v!DNcGHga+YfBob!5km9mkI!KY#7s)jLma+_>@N*^3u%K79H1
150zg8>yN{$$}~VBluZ0SSZ5U|>ltI2p<$!OUWuE_Aq1;e;bk(<8=~7rR;vINxS3zT)s^
151zPtyl=7ls?bGs-l=0uP!fF^bDB^t4S_Fhh20<tZ1#P6P4DoD<G-x{51n%sJUv%C?a~
152auycp&qaycHHf0r>vO=PPQZmAV4AuY<UPX`q
153
154literal 606
155zcmZ?wbhEHb6krfwcoxafw(@M}n)ChZFW!3c{`tGF)3#h)y!U$bf@7^KPS-6uzUAco
156zS0BDVc=>6^`De|`PR`nSy<y48zyJQd`}||`iF+NZ&i1W6H+j>g_g{XjI&`ak@yUG`
157zo;EK(J#+ijhQ%lP*I%ezbo}9~&(pSE*?IQS;=MN)@4Gd3=e3%J$D5X(nz`fp(*3u$
158zoqaNI*R}d3CpVpX{Q29jre&vU7apIr<J!lsKewH_U$^+g#EqBw)?Il0;oG*ePnYb!
159z-Lm4$p)1etJp0(S=G=@OK%<WJZ@Ad7<ka-7SK3#edGqP}{5>~bzW=sp-|cz3uWvc?
160zWa{QC$8Wq`dhpJqjhE{epV)Z(?&i~vr*FGDch`+I#~w`He7Swq*`){W^sT@6^~dl3
161z|Nk@49Vq@}VPs&4WY7WG42ly5_T3GUO_4kje3Fi`Y|PEgg2Ei`p1iykJ|h0&z5Zgl
162z0rM9G$k+=tamfX*T&cAxSkXVyMZhv_>sB}KZDAbD#%4hW4zfg89~5H~^<`z%<UXet
163z5g~Qji=C6{hVsSR7nN=pa56sfxO3a}k(#I#1A`OGd!vi0Zy4CQ^h1CCQi#z0CC!#s
164zv%_hF0>2RJ`V9$77#OFv^CvqjY0A7XSuxNk>&%VE4w{br3Jf1VK49#UQa3Uc3OT{Z
165NtIjEA%EiK94FJ;24lMux
166
167diff --git a/django/contrib/admin/static/admin/img/selector-addall-active.gif b/django/contrib/admin/static/admin/img/selector-addall-active.gif
168new file mode 100644
169index 0000000000000000000000000000000000000000..d6e7c639bb2ec270122861f054289845281fae26
170GIT binary patch
171literal 358
172zcmZ?wbhEHb6krfwxN64GwdVYqV-FVYy|wM^)3z0-CvU#|?Z@x7m1n1IyE0+p#RUf*
173z*DpEQwCq&t%5&3q-kG-LYR}pWx1PLjUwNi;)tTmHr>AYX(!J*V^leu=SD$TPd3wsG
174zD~tDD-+uc3vi-Mqo_}`i`pffoUcPz%`N)+gC$B$Wu={53y7Nb`JiYSZ&E<QqzJ2?C
175z>gJ2jU%oBgck}JXFNZEY-hSr6{b%p@TzI-@&-ELR-)%g8_xtzn|NsAIzzr0CvM@3*
176zm@(*plz{xiz}D<AyTC(7s^23z#dv0pk_YqJhXEQgyt58^?B=nX*Z9Lp`<y}Jft8}(
177z>;}e*)+h-yWNC)(RZ<o*;pbO2Z81=hVyP1o5KwC|Rg@L$bT$%UXV+`dP-PdXbvEW^
178uU{KPQS;D|w=wc$os;|SkSt!*th=-GdgOex9!`Mht(rAt6@e{6&4AuaOP^lOI
179
180literal 0
181HcmV?d00001
182
183diff --git a/django/contrib/admin/static/admin/img/selector-addall.gif b/django/contrib/admin/static/admin/img/selector-addall.gif
184index d6e7c639bb2ec270122861f054289845281fae26..f7df7f75fd93563b3d37c4ffa3dbf373e2790e9c 100644
185GIT binary patch
186literal 166
187zcmZ?wbh9u|6krfw*v!DN0t|M5!3i+94hB!a;5!&FAOXdnEQ|~cJPbM@F_0MyEWr~_
188zdam9(Ly@t;VTKb!OJYw;l3-KgjAafX9G(iNJbNCf{Lyvg(^ybZ$F?x(uwfa4rz*R{
189mOsCeZeuY8KeDw|YT0(EVO%a=z>mC$q7FC$$x7>w+!5RQi7ecZC
190
191literal 358
192zcmZ?wbhEHb6krfwxN64GwdVYqV-FVYy|wM^)3z0-CvU#|?Z@x7m1n1IyE0+p#RUf*
193z*DpEQwCq&t%5&3q-kG-LYR}pWx1PLjUwNi;)tTmHr>AYX(!J*V^leu=SD$TPd3wsG
194zD~tDD-+uc3vi-Mqo_}`i`pffoUcPz%`N)+gC$B$Wu={53y7Nb`JiYSZ&E<QqzJ2?C
195z>gJ2jU%oBgck}JXFNZEY-hSr6{b%p@TzI-@&-ELR-)%g8_xtzn|NsAIzzr0CvM@3*
196zm@(*plz{xiz}D<AyTC(7s^23z#dv0pk_YqJhXEQgyt58^?B=nX*Z9Lp`<y}Jft8}(
197z>;}e*)+h-yWNC)(RZ<o*;pbO2Z81=hVyP1o5KwC|Rg@L$bT$%UXV+`dP-PdXbvEW^
198uU{KPQS;D|w=wc$os;|SkSt!*th=-GdgOex9!`Mht(rAt6@e{6&4AuaOP^lOI
199
200diff --git a/django/contrib/admin/static/admin/img/selector-remove-active.gif b/django/contrib/admin/static/admin/img/selector-remove-active.gif
201new file mode 100644
202index 0000000000000000000000000000000000000000..6c5d45ae6e7722a0f0c568a20c21458bb1cc2f99
203GIT binary patch
204literal 370
205zcmZ?wbh9u|6krfwxXQp#yYM&=wXHY<L4E5k^l!L0ecM$yTD<oL5G_4$8;CX?zY9cb
206zjy>3N<}ncMyYTeLwHH8i>&g2&&ptkR^96|BeEbeXUw{0DAO;*j6e`XLrP*+(!zB#U
207zr}&cv$W&m^0VxFeiGi)(VS+$OBtu^lTbjikn@N*aq$pOD%xY*Z(KfVc>vv9(nK<Ei
208z>wDFk8R2GcE0{M#N{IdNQg42*&m|Pe&MqR`Cf&i?%*M*V#wOG@sjaNvot2e)@}&A1
209z9!yN^lO&h0FJPLvoN1Qis^$FR3^QhMOKjd;qTt`(&%UQW)Jb|%^U<RReRm&YV+iwc
210Oa&>3$^mcY+um%9w4umuS
211
212literal 0
213HcmV?d00001
214
215diff --git a/django/contrib/admin/static/admin/img/selector-remove.gif b/django/contrib/admin/static/admin/img/selector-remove.gif
216index 2b9b0a2ac35a2051834bb9a49a7d57aaeebdcb48..8c0774cbbd49ab78ba73df7042a5434f481670e3 100644
217GIT binary patch
218literal 263
219zcmZ?wbhEHb6krfwIKsfNcEjeiTla3<b$H8`ExUK`K62#9sZ*!UUAueb%9X2k9^bxw
220z`@w?;kDk4L`tse2Hy_@-dGqPhr>{SL|NHlkfjFS}lZBIkL6|`Yq#R@?18d6z6+ce~
221z9%ccV#~Pe13w64i1ez{$wLbd4@6ZCpCdEE?=}ihVOxW61Br;AEThzkrv#KLxak%qA
222z7mY7Uf}AO}ri(dPSgdUKAG-f^=aRS`^8;8jva`!Im^2y$`8!xT7<rfr3fTB3O=8wD
223hNSmEB+d?@yXi=|=l0I`{0<)#Al4?D(wyq+BH2?@EVr2jT
224
225literal 398
226zcmV;90df9ENk%w1VGsZi0M$MK!NI}2yu9=C^R%?Iv9Ynv*4?eOy|A&e#l^+DySw1v
227z;PCM9vb)91%*?sDx%~b8tgyARva;st@73Jn!^6YAzP`)L%gV~i`T6;>yTq=rvah$l
228z-QC^j?C`?E!rI!}-rnBp>+8?Y&$F|$v%JQ(wzkK|$N2d8?d|R4>Fx3H@xZ{qud%ZB
229z_V&`!(&Fap*x1<3&CRj8!??J(+uPg8$;r;n&b76*)z#I=$jG<1x5UK6zrVlr`1}9=
230z{{R30A^8LW002G!EC2ui01yBW000K7K%dYz*=R~SmZ2~lJ~9pwN1*_@60%NHMxlAX
231zUK2qgWbklk^e2tm$$Y6>%tp5<1a<nXK&s^aIUGGIfPVl65Ig{jFg-md0+AO0D+C7t
232zm^h9-7@Ikm5eGA)2%DXb2%`}Y12?V|jx7tbJgx)`13J1or6{|)HwG^wJjKNpA;!f6
233sObiY?(9k*2J6J<92{qc=+7)9?88;pm4Gk7MI$2FZMH;OKOHDxlJ9N|8EC2ui
234
235diff --git a/django/contrib/admin/static/admin/img/selector-removeall-active.gif b/django/contrib/admin/static/admin/img/selector-removeall-active.gif
236new file mode 100644
237index 0000000000000000000000000000000000000000..28b4fad628aabdf644d01457404c81577a44d42b
238GIT binary patch
239literal 234
240zcmZ?wbh9u|6krfwIKseCzvN{5$}<quv-ZN2EmweO(ViPXwDI^|AX;(c0T69F`vi#g
241zTzGo?+A}!1eDBqb$M1mX&HK-9KYsc4{Ra>+paR98EQ|~c(hNEvVUV2+tmzNb`cg9I
242zy$F+aEC|V%#&UF%h~uQ0o)`b{dn}%y5z4gfD6{iM)`Z2*4+|Pnj6_~dajA|qp3r1*
243zKvhOBo+Ht>kBN!p)YpqlG9ID_W?f)d&lsR=oD}SAsb*A_#KK^up{=X0IeCh@B7-#m
244D>j`T<
245
246literal 0
247HcmV?d00001
248
249diff --git a/django/contrib/admin/static/admin/img/selector_stacked-add-active.gif b/django/contrib/admin/static/admin/img/selector_stacked-add-active.gif
250new file mode 100644
251index 0000000000000000000000000000000000000000..74261696522de5819780082d9d92d75f8ffdb4fc
252GIT binary patch
253literal 612
254zcmZ?wbhEHb6krfwcoxdgw({()C+`>Uz23RzeCvwSk6wMQUT~~#(eW)O@4x%}qhZO(
255z=4B^W9lAAn)1{a1zimDJ=;PO)eQVFX`tbe1%TKd*UVs1P$KQYdUVr@FvFhyR6ZdwU
256ze>P#`rA;RvPThQ^Vacg^yRJ>!dS%hR+gr{&*>?76|N09vw_ojAb8ha=YxRpy&e(CS
257zX5q0dryguM`QY`3Zw-r2%-nIkdHLz4Wv6Nu9$&Km_M1=N`!`%%e(?6hjhE^cpICbE
258zPW_UT?JLi0J9WQr-Gy6EKkPjFXz{*VlQv#%T6(H>;qm&#Ct6mV*>vi0?V{s*E<9;p
259zb#~+NyGsw;*?ju(++8>N)?b{q<?7_km#1&Ly5`t}{`D8X{`md>|9^%71&Tje7#SEs
260z8FWCd0L2Ld`@x3LrchxXZVfp-CdTGwF-aChB`GOoO9?O0UN2rZpZN=XRJAypI8=gG
261zu3D|&6>7p|?7dlrpI>J4W)?;pTi^Y@;vpg82Yh*%1Red)_zN8tI_odX#vXkAI^SWw
262z8`quLnIE#U3LF+-wUd@+HWGAYV9+`IIYj*f0~?2-=O67a@_!~B5V-KDV{)@!9S?KU
263zg-$*<4i1Nz9ITzZT>%EXL7SAjj`z#?N@%FQnAjwxsS!|7=<Kn~t%*zbfa8+`i`*I+
264G7_0%~kOZIr
265
266literal 0
267HcmV?d00001
268
269diff --git a/django/contrib/admin/static/admin/img/selector_stacked-add.gif b/django/contrib/admin/static/admin/img/selector_stacked-add.gif
270index 74261696522de5819780082d9d92d75f8ffdb4fc..9b4c1b308e6576eeac6367579de8f77747b33027 100644
271GIT binary patch
272literal 238
273zcmZ?wbh9u|6krfwIKsfNcGC_Z+71Tmw;$NF>&S61IDhTl4KTQR=gG6@FX8CLn-5>V
274z{eU0_B7ovg7DfgJ5e6NQT9BO#tl0{xLEMZSOb!Z<B}AJP&pR=0{jf&*rSDVg*xo}9
275zlC5rxOw)QSlsy|YxeA>YH3Wa|yecJeRh{LK_uRDe=}Bx1QbI4k_5@rxsLZX%J?+JJ
276i$+~P-W!C)0IyMG75q(2WZthysZe`UdEgfY=25SIFEL#fz
277
278literal 612
279zcmZ?wbhEHb6krfwcoxdgw({()C+`>Uz23RzeCvwSk6wMQUT~~#(eW)O@4x%}qhZO(
280z=4B^W9lAAn)1{a1zimDJ=;PO)eQVFX`tbe1%TKd*UVs1P$KQYdUVr@FvFhyR6ZdwU
281ze>P#`rA;RvPThQ^Vacg^yRJ>!dS%hR+gr{&*>?76|N09vw_ojAb8ha=YxRpy&e(CS
282zX5q0dryguM`QY`3Zw-r2%-nIkdHLz4Wv6Nu9$&Km_M1=N`!`%%e(?6hjhE^cpICbE
283zPW_UT?JLi0J9WQr-Gy6EKkPjFXz{*VlQv#%T6(H>;qm&#Ct6mV*>vi0?V{s*E<9;p
284zb#~+NyGsw;*?ju(++8>N)?b{q<?7_km#1&Ly5`t}{`D8X{`md>|9^%71&Tje7#SEs
285z8FWCd0L2Ld`@x3LrchxXZVfp-CdTGwF-aChB`GOoO9?O0UN2rZpZN=XRJAypI8=gG
286zu3D|&6>7p|?7dlrpI>J4W)?;pTi^Y@;vpg82Yh*%1Red)_zN8tI_odX#vXkAI^SWw
287z8`quLnIE#U3LF+-wUd@+HWGAYV9+`IIYj*f0~?2-=O67a@_!~B5V-KDV{)@!9S?KU
288zg-$*<4i1Nz9ITzZT>%EXL7SAjj`z#?N@%FQnAjwxsS!|7=<Kn~t%*zbfa8+`i`*I+
289G7_0%~kOZIr
290
291diff --git a/django/contrib/admin/static/admin/img/selector_stacked-remove-active.gif b/django/contrib/admin/static/admin/img/selector_stacked-remove-active.gif
292new file mode 100644
293index 0000000000000000000000000000000000000000..aa8b67f90449c32d7b52bd4bb352940ca6a7f7a8
294GIT binary patch
295literal 262
296zcmZ?wbh9u|6krfwIKseCyYM&=wXQe=L4E5k^l!L0ZR-^{TD<oL5G^}!8;CX?zY9cb
297zjy>3N`VkQAx$xxHllQltet7))GZ4M`_#KG8{`d_+3}B%6lZBCiL5@KO!~@yMz}mb(
298zy((Op;YCpI<8KVd6y@7Kq`Xl+^CytOqQB2Q^Fz)&o&^VV0?cN+eh$CLxlTx<q;Rj-
299z?#Q>>y0hZ+9(5m0_;K*Y8y*wpbp2%GpK6zxJ-E0VxvM0bxY?Q+c)NLp`h<GawE0;D
300kr%j*1&aceR)<0i}-9guiTS!D?f|;X^s=B7OvLb^u04`vA&j0`b
301
302literal 0
303HcmV?d00001
304
305diff --git a/django/contrib/admin/static/admin/js/SelectFilter2.js b/django/contrib/admin/static/admin/js/SelectFilter2.js
306index b7bc9d5..1e2b462 100644
307--- a/django/contrib/admin/static/admin/js/SelectFilter2.js
308+++ b/django/contrib/admin/static/admin/js/SelectFilter2.js
309@@ -5,7 +5,7 @@ Different than SelectFilter because this is coupled to the admin framework.
310 
311 Requires core.js, SelectBox.js and addevent.js.
312 */
313-
314+(function($) {
315 function findForm(node) {
316     // returns the node of the form containing the given node
317     if (node.tagName.toLowerCase() != 'form') {
318@@ -14,7 +14,7 @@ function findForm(node) {
319     return node;
320 }
321 
322-var SelectFilter = {
323+window.SelectFilter = {
324     init: function(field_id, field_name, is_stacked, admin_media_prefix) {
325         if (field_id.match(/__prefix__/)){
326             // Don't intialize on empty forms.
327@@ -44,41 +44,42 @@ var SelectFilter = {
328         // <div class="selector-available">
329         var selector_available = quickElement('div', selector_div, '');
330         selector_available.className = 'selector-available';
331-        quickElement('h2', selector_available, interpolate(gettext('Available %s'), [field_name]));
332-        var filter_p = quickElement('p', selector_available, '');
333+        var title_available = quickElement('h2', selector_available, interpolate(gettext('Available %s') + ' ', [field_name]));
334+        quickElement('img', title_available, '', 'src', admin_media_prefix + 'img/icon-unknown.gif', 'title', interpolate(gettext('This is the list of available %s. You may add some by selecting them below and then clicking the "Add" button.'), [field_name]));
335+
336+        var filter_p = quickElement('p', selector_available, '', 'id', field_id + '_filter');
337         filter_p.className = 'selector-filter';
338 
339-        var search_filter_label = quickElement('label', filter_p, '', 'for', field_id + "_input", 'style', 'width:16px;padding:2px');
340+        var search_filter_label = quickElement('label', filter_p, '', 'for', field_id + "_input");
341 
342-        var search_selector_img = quickElement('img', search_filter_label, '', 'src', admin_media_prefix + 'img/selector-search.gif');
343-        search_selector_img.alt = gettext("Filter");
344+        var search_selector_img = quickElement('img', search_filter_label, '', 'src', admin_media_prefix + 'img/selector-search.gif', 'alt', '', 'title', interpolate(gettext("Type into the filter box to narrow down the list of available %s"), [field_name]));
345 
346         filter_p.appendChild(document.createTextNode(' '));
347 
348-        var filter_input = quickElement('input', filter_p, '', 'type', 'text');
349+        var filter_input = quickElement('input', filter_p, '', 'type', 'text', 'placeholder', gettext("Filter"));
350         filter_input.id = field_id + '_input';
351+
352         selector_available.appendChild(from_box);
353-        var choose_all = quickElement('a', selector_available, gettext('Choose all'), 'href', 'javascript: (function(){ SelectBox.move_all("' + field_id + '_from", "' + field_id + '_to"); })()');
354+        var choose_all = quickElement('a', selector_available, gettext('Add all'), 'href', 'javascript: (function(){ SelectBox.move_all("' + field_id + '_from", "' + field_id + '_to"); SelectFilter.refresh_icons("' + field_id + '");})()', 'id', field_id + '_add_all_link');
355         choose_all.className = 'selector-chooseall';
356 
357         // <ul class="selector-chooser">
358         var selector_chooser = quickElement('ul', selector_div, '');
359         selector_chooser.className = 'selector-chooser';
360-        var add_link = quickElement('a', quickElement('li', selector_chooser, ''), gettext('Add'), 'href', 'javascript: (function(){ SelectBox.move("' + field_id + '_from","' + field_id + '_to");})()');
361+        var add_link = quickElement('a', quickElement('li', selector_chooser, ''), gettext('Add'), 'title', gettext('Add'), 'href', 'javascript: (function(){ SelectBox.move("' + field_id + '_from","' + field_id + '_to"); SelectFilter.refresh_icons("' + field_id + '");})()', 'id', field_id + '_add_link');
362         add_link.className = 'selector-add';
363-        var remove_link = quickElement('a', quickElement('li', selector_chooser, ''), gettext('Remove'), 'href', 'javascript: (function(){ SelectBox.move("' + field_id + '_to","' + field_id + '_from");})()');
364+        var remove_link = quickElement('a', quickElement('li', selector_chooser, ''), gettext('Remove'), 'title', gettext('Remove'), 'href', 'javascript: (function(){ SelectBox.move("' + field_id + '_to","' + field_id + '_from"); SelectFilter.refresh_icons("' + field_id + '");})()', 'id', field_id + '_remove_link');
365         remove_link.className = 'selector-remove';
366 
367         // <div class="selector-chosen">
368         var selector_chosen = quickElement('div', selector_div, '');
369         selector_chosen.className = 'selector-chosen';
370-        quickElement('h2', selector_chosen, interpolate(gettext('Chosen %s'), [field_name]));
371-        var selector_filter = quickElement('p', selector_chosen, gettext('Select your choice(s) and click '));
372-        selector_filter.className = 'selector-filter';
373-        quickElement('img', selector_filter, '', 'src', admin_media_prefix + (is_stacked ? 'img/selector_stacked-add.gif':'img/selector-add.gif'), 'alt', 'Add');
374+        var title_chosen = quickElement('h2', selector_chosen, interpolate(gettext('Added %s') + ' ', [field_name]));
375+        quickElement('img', title_chosen, '', 'src', admin_media_prefix + 'img/icon-unknown.gif', 'title', interpolate(gettext('This is the list of already added %s. You may remove some by selecting them below and then clicking the "Remove" button.'), [field_name]));
376+
377         var to_box = quickElement('select', selector_chosen, '', 'id', field_id + '_to', 'multiple', 'multiple', 'size', from_box.size, 'name', from_box.getAttribute('name'));
378         to_box.className = 'filtered';
379-        var clear_all = quickElement('a', selector_chosen, gettext('Clear all'), 'href', 'javascript: (function() { SelectBox.move_all("' + field_id + '_to", "' + field_id + '_from");})()');
380+        var clear_all = quickElement('a', selector_chosen, gettext('Remove all'), 'href', 'javascript: (function() { SelectBox.move_all("' + field_id + '_to", "' + field_id + '_from"); SelectFilter.refresh_icons("' + field_id + '");})()', 'id', field_id + '_remove_all_link');
381         clear_all.className = 'selector-clearall';
382 
383         from_box.setAttribute('name', from_box.getAttribute('name') + '_old');
384@@ -86,16 +87,38 @@ var SelectFilter = {
385         // Set up the JavaScript event handlers for the select box filter interface
386         addEvent(filter_input, 'keyup', function(e) { SelectFilter.filter_key_up(e, field_id); });
387         addEvent(filter_input, 'keydown', function(e) { SelectFilter.filter_key_down(e, field_id); });
388-        addEvent(from_box, 'dblclick', function() { SelectBox.move(field_id + '_from', field_id + '_to'); });
389-        addEvent(to_box, 'dblclick', function() { SelectBox.move(field_id + '_to', field_id + '_from'); });
390+        addEvent(from_box, 'change', function(e) { SelectFilter.refresh_icons(field_id) });
391+        addEvent(to_box, 'change', function(e) { SelectFilter.refresh_icons(field_id) });
392+        addEvent(from_box, 'dblclick', function() { SelectBox.move(field_id + '_from', field_id + '_to'); SelectFilter.refresh_icons(field_id); });
393+        addEvent(to_box, 'dblclick', function() { SelectBox.move(field_id + '_to', field_id + '_from'); SelectFilter.refresh_icons(field_id); });
394         addEvent(findForm(from_box), 'submit', function() { SelectBox.select_all(field_id + '_to'); });
395         SelectBox.init(field_id + '_from');
396         SelectBox.init(field_id + '_to');
397         // Move selected from_box options to to_box
398         SelectBox.move(field_id + '_from', field_id + '_to');
399+
400+        if (!is_stacked) {
401+            // In horizontal mode, give the same height to the two boxes.
402+            $(to_box).height($(filter_p).outerHeight() + $(from_box).outerHeight());
403+        }
404+
405+        // Initial icon refresh
406+        SelectFilter.refresh_icons(field_id);
407+    },
408+    refresh_icons: function(field_id) {
409+        var from = $('#' + field_id + '_from');
410+        var to = $('#' + field_id + '_to');
411+        var is_from_selected = from.find('option:selected').length > 0;
412+        var is_to_selected = to.find('option:selected').length > 0;
413+        // Active if at least one item is selected
414+        $('#' + field_id + '_add_link').toggleClass('active', is_from_selected);
415+        $('#' + field_id + '_remove_link').toggleClass('active', is_to_selected);
416+        // Active if the corresponding box isn't empty
417+        $('#' + field_id + '_add_all_link').toggleClass('active', from.find('option').length > 0);
418+        $('#' + field_id + '_remove_all_link').toggleClass('active', to.find('option').length > 0);
419     },
420     filter_key_up: function(event, field_id) {
421-        from = document.getElementById(field_id + '_from');
422+        var from = document.getElementById(field_id + '_from');
423         // don't submit form if user pressed Enter
424         if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {
425             from.selectedIndex = 0;
426@@ -109,7 +132,7 @@ var SelectFilter = {
427         return true;
428     },
429     filter_key_down: function(event, field_id) {
430-        from = document.getElementById(field_id + '_from');
431+        var from = document.getElementById(field_id + '_from');
432         // right arrow -- move across
433         if ((event.which && event.which == 39) || (event.keyCode && event.keyCode == 39)) {
434             var old_index = from.selectedIndex;
435@@ -128,3 +151,5 @@ var SelectFilter = {
436         return true;
437     }
438 }
439+
440+})(django.jQuery);
Back to Top