From d53c7d889bd72719da9ed6c13ac5c1abf663f864 Mon Sep 17 00:00:00 2001
From: larsz <eugen.lobicov@gmail.com>
Date: Wed, 1 Feb 2012 01:50:14 +0200
Subject: [PATCH] fixed checkboxes in edit forms (issue #41) static prototype:
 http://dl.dropbox.com/u/1750887/projects/vesta2/web-domain.html

---
 web/css/main.css                            |  26 +++++++---
 web/images/checkbox-selector-2012-01-31.png | Bin 0 -> 1523 bytes
 web/js/templates.js                         |  54 ++++++++++----------
 3 files changed, 47 insertions(+), 33 deletions(-)
 create mode 100644 web/images/checkbox-selector-2012-01-31.png

diff --git a/web/css/main.css b/web/css/main.css
index 602e3474c..a823f3bb9 100644
--- a/web/css/main.css
+++ b/web/css/main.css
@@ -3,7 +3,7 @@ Title  : Vesta
 Author : Eugen Lobicov, eugen.lobicov@gmail.com 
 
 created : November 27, 2009
-last updated : January 30, 2012
+last updated : February 1, 2012
 - - - - - - - - - - - - - - - - - - */
 
 html{
@@ -594,7 +594,8 @@ input::-moz-focus-inner{
 		width:11px;
 		height:11px;
 		margin:2px 2px 0 0;
-		background:url(../images/checkbox-selector-2012-01-29.png) no-repeat;
+		/*background:url(../i/checkbox-selector-2012-01-29.png) no-repeat;*/
+		background:url(../images/checkbox-selector-2012-01-31.png) no-repeat;
 		cursor:pointer;
 	}
 	.checkbox-selector .selector-title{
@@ -1674,17 +1675,30 @@ input::-moz-focus-inner{
 		}
 		
 	
-	.b-new-entry .checkbox{
+	/*.b-new-entry .checkbox,*/
+	.b-new-entry span.ui-checkbox{
 		display:block;
 		float:left;
 		width:18px;
 		height:18px;
 		margin:6px 0 0;
-		background:url(/images/form-checkboxes.png) no-repeat;
+		/*background:url(../i/checkbox-1.png) no-repeat;*/
+		/*background:url(../i/form-checkboxes.png) no-repeat;*/
+		background:url(../images/checkbox-selector-2012-01-31.png) no-repeat -12px 0;
 	}
-	.b-new-entry .checkbox:hover{
-		background-position:0 -100px;
+	.b-new-entry .ui-checkbox-hover{
+		cursor:pointer;
+	}
+	.b-new-entry span.ui-checkbox-hover{
+		background-position:-12px -20px;
 	}	
+	.b-new-entry span.ui-checkbox-state-checked{
+		background-position:-12px -40px;
+	}	
+	.b-new-entry span.ui-checkbox-state-checked-hover{
+		background-position:-12px -60px;
+	}
+	
 	.b-new-entry .stats-settings{
 		padding-left:40px;
 	}
diff --git a/web/images/checkbox-selector-2012-01-31.png b/web/images/checkbox-selector-2012-01-31.png
new file mode 100644
index 0000000000000000000000000000000000000000..0e0b31e33b031fda36d7b3584a4e100337a44b04
GIT binary patch
literal 1523
zcmbVLeM}o=96rPVqAd7_WZ;IELP!Xscl~5-+7alrtbrnFn}Hh}EA3H^a=qj3poN&h
zHsiLa(}4<On9YTiuR+AwAzvBP7zYtz{1~H@kpLMOLBM50<jX5i<{#o8zRA7!zHgrA
z`8~h)_j@m8q^E=gM+5@^5TZVcXxV=x`=tl@vomn|n3<i!8D$ouBk~xVfkJ^K6OoI8
zYTRH(wWz^VS~P&l0Kgx_^jS=nCQWK2aIV3N;o5Q1D+0(8?WDnIK^ZU?HDgveXQBHZ
z2gFQrPNql$Ye)r}j~y+eP+eKN-dJWaN=%%@BcRMKWd(4QF@Scw&`L|~a?X~nlwEs|
zAr80&VJvdawy7*l2B;t?6clmccq1%^K{1cZ69^L$5)OfUm<K~JAL8-jc?nVhUkbzE
z&fu`oC{vzPi>P*Du{${@pJ7NT1lephu1&xtC^N*9NF-hjK0lsC#M7l##$b=P(osGI
z1f`7>Mlu*-1-*)fT%wqfb6BU_Dd6O;td-umCicQ0yMcswT-ckE52(@nHx$Qr(KMq)
zpZon+VOn2GqL3D)iDJsg7A`N!8;X=FDAd3Zl%608eYcpAPcQ_XPmrKOCjv7utBJ7D
zTWF0&s<zUM!D>X+h@8Xnxfo`WDn*Bt0=`foREUyzJS9&8ON2=xfj}S>OGG06VILPE
zjKw%=Wqe%Ib1t$c*V_m<$wo#{3M)ZPDvH3tt%Rl6-d>XS)Z5{j_V$vzCl_MPK;E+c
zqs+b|ws*YC-KJ$XyKRqJ*<PpErmlD@$zvZxM@E`nxw^U<7#PUz{QUgZ*4D<y$7M3v
z`ue)l>GXI!F)=Zfm6cbnT&b<Cjf#pI8XBs*{z-Lp_3Z5I%F0SrRh7fx7#tkT&dzRa
zZGAN1IseYtk%zzBxLM~OdkDjDYHI4hz`&?`q@kgqspZzp%;T?|U(C<Xk9pkHHC55k
z(Xp|ycRRiue>7I_xG^;~MKjidf`Xi!9L!>bAV{TB-RWrR@9*z(^=@ozxLhu6<J{)f
zn0TcIV@=B$ZMtsz<p0gUOVI5cHu;lkBuQ^~Pk)T*TyW^SbVhLF#SZ(#a%*9wV{_9M
zj{Q_}r+zTdY<l}%apaHlrkqG|Q{_xRTBx`kJrMBPi$?$3S3{QHFKTY7kA3;gIES<R
z?r}whronO9|4io#$XoV^seS9z8g=2?$j$q6J+CUv3A`Uh{}f*RU~yqM0B$}m{%91q
z{1@7Nos;(D;BfPFsmjIQ{5-Kg3~lFig`K;W`StypL(D!|`N-OYjTw9FOj&s_>7<Je
zEV(zF&gJB6r03Z%@iR$=KXHHaS?FYi9k<nloqGL^OXf+ZsPos}k}li+GCcKnr02oH
ziLt5kPcM#iQJvqdlzbnr&Lle{Z0}9Q;ipnRtt_7w9XXM$^i!?f`qpCpLzH`=sJ*Wx
zXrqR^h@>p)I{Sd`HcdM>Y=2$J$+-02sIx)k#Y4t9XO~6Ld(4JAWX)|#&t!L)?!yK5
e#4~pT;1B2<m+Ayd2hXq-1JufNq%HaMxxWDm&U=ag

literal 0
HcmV?d00001

diff --git a/web/js/templates.js b/web/js/templates.js
index 6b538fd39..6b715e0e2 100644
--- a/web/js/templates.js
+++ b/web/js/templates.js
@@ -153,8 +153,8 @@ App.Templates.html = {
                             <input type="text" value="~!:SOA~!" id="soa" name="SOA" class="text-field rule-required rule-ns">\
                     </div>\
                     <div class="form-row suspended cc">\
-							<label for="#" class="field-label">Suspended:</label>\
-							<input type="checkbox" ~!:SUSPENDED_CHECKED~! value="~!:SUSPENDED_VALUE~!" class="styled do_action_toggle_suspend" name="SUSPEND" />\
+							<label for="suspended" class="field-label">Suspended:</label>\
+							<input id="suspended" type="checkbox" ~!:SUSPENDED_CHECKED~! value="~!:SUSPENDED_VALUE~!" class="cust-checkbox do_action_toggle_suspend" name="SUSPEND" />\
 					</div>\
                     <div class="form-row buttons-row cc">\
                        <input class="add-entry-btn do_action_save_form" type="submit" value="~!:save_button~!"/>\
@@ -420,8 +420,8 @@ App.Templates.html = {
 							<input type="text" name="CONTACT" class="text-field rule-email rule-required" value="~!:CONTACT~!">\
 						</div>\
 						<div class="form-row ~!:REPORTS_ENABLED_EDITABLE~! cc">\
-							<label for="#" class="field-label">Reports:</label>\
-							<input type="checkbox" name="REPORTS_ENABLED" ~!:CHECKED~! class="styled" value="~!:REPORTS_ENABLED~!">\
+							<label for="user-reports" class="field-label">Reports:</label>\
+							<input id="user-reports" class="cust-checkbox" type="checkbox" name="REPORTS_ENABLED" ~!:CHECKED~! value="~!:REPORTS_ENABLED~!">\
 						</div>\
                     		<div class="form-row cc">\
 							<label for="#" class="field-label"><span class="mandatory">First name:</span></label>\
@@ -441,8 +441,8 @@ App.Templates.html = {
 						</div>\
                         ~!:NS~!\
                         <div class="form-row suspended cc">\
-                            <label for="#" class="field-label">Suspended:</label>\
-                            <input type="checkbox" ~!:SUSPENDED_CHECKED~! value="~!:SUSPENDED_VALUE~!" class="styled do_action_toggle_suspend" name="SUSPEND"/>\
+                            <label for="suspended" class="field-label">Suspended:</label>\
+                            <input id="suspended" type="checkbox" ~!:SUSPENDED_CHECKED~! value="~!:SUSPENDED_VALUE~!" class="cust-checkbox do_action_toggle_suspend" name="SUSPEND"/>\
                         </div>\
                         <div class="form-row buttons-row cc">\
                            <input class="add-entry-btn do_action_save_form" type="submit" value="~!:save_button~!"/>\
@@ -616,8 +616,8 @@ App.Templates.html = {
 								</select>\
 							</div>\
                         <div class="form-row suspended cc">\
-                            <label for="#" class="field-label">Suspended:</label>\
-                            <input type="checkbox" ~!:SUSPENDED_CHECKED~! value="~!:SUSPENDED_VALUE~!" class="styled do_action_toggle_suspend" name="SUSPEND"/>\
+                            <label for="suspended" class="field-label">Suspended:</label>\
+                            <input id="suspended" type="checkbox" ~!:SUSPENDED_CHECKED~! value="~!:SUSPENDED_VALUE~!" class="cust-checkbox do_action_toggle_suspend" name="SUSPEND"/>\
                         </div>\
                         <!-- advanced options -->\
 						<div class="form-options-group">\
@@ -630,12 +630,12 @@ App.Templates.html = {
 							</div>\
                             <div class="sub_section hidden">\
 							<div class="form-row cc">\
-								<label for="#" class="field-label">CGI Support:</label>\
-								<input type="checkbox" value="~!:CGI~!" ~!:CHECKED_CGI~! name="CGI" class="styled">\
+								<label for="domain-cgi" class="field-label">CGI Support:</label>\
+								<input id="domain-cgi" type="checkbox" value="~!:CGI~!" ~!:CHECKED_CGI~! name="CGI" class="cust-checkbox">\
 							</div>\
                             <div class="form-row cc">\
-								<label for="#" class="field-label">Error Logging:</label>\
-								<input type="checkbox" value="~!:ELOG~!" ~!:CHECKED_ELOG~! name="ELOG" class="styled">\
+								<label for="domain-errlogging" class="field-label">Error Logging:</label>\
+								<input id="domain-errlogging" type="checkbox" value="~!:ELOG~!" ~!:CHECKED_ELOG~! name="ELOG" class="cust-checkbox">\
 							</div>\
                             <div class="form-row cc">\
 								<label for="#" class="field-label">Domain Aliases:</label>\
@@ -651,7 +651,7 @@ App.Templates.html = {
 							</div>\
 							<div class="stats-settings">\
 								<!-- div class="form-row cc">\
-									<label for="#" class="field-label">Password Protection:</label>\
+									<label for="stats-auth-enable" class="field-label">Password Protection:</label>\
 									<input id="stats-auth-enable" type="checkbox" name="STATS_AUTH" ~!:stats_auth_checked~!="" value="~!:STATS_AUTH~!" class="styled do_action_toggle_stats_block">\
 								</div -->\
 								<div class="form-row stats-block ~!:ACTIVE_LOGIN~! cc">\
@@ -665,12 +665,12 @@ App.Templates.html = {
 								</div>\
 							</div><!-- // stats settings -->\
 							<div class="form-row cc">\
-								<label for="#" class="field-label">SSL Support:</label>\
-								<input type="checkbox" name="SSL" class="styled do_action_toggle_ssl_support ssl_support" ~!:ssl_checked~! value="~!SSL~!">\
+								<label for="domain-ssl" class="field-label">SSL Support:</label>\
+								<input id="domain-ssl" type="checkbox" name="SSL" class="cust-checkbox do_action_toggle_ssl_support ssl_support" ~!:ssl_checked~! value="~!SSL~!">\
 							</div>\
 							<div class="form-row cc ssl-crtfct-box">\
-								<label for="#" class="field-label">SSL Shared DocRoot:</label>\
-								<input type="checkbox" name="SSL_HOME" class="styled" ~!:ssl_home_checked~! value="~!SSL_HOME~!">\
+								<label for="domain-ssl-docroot" class="field-label">SSL Shared DocRoot:</label>\
+								<input id="domain-ssl-docroot" type="checkbox" name="SSL_HOME" class="cust-checkbox" ~!:ssl_home_checked~! value="~!SSL_HOME~!">\
 							</div>\
                             <div class="form-row ssl-crtfct-box cc">\
 								<label for="#" class="field-label">SSL Crtificate: <span class="remark">(upload file or paste as text)</span></label>\
@@ -697,8 +697,8 @@ App.Templates.html = {
 							</div>\
 							<div class="sub_section hidden">\
                             <div class="form-row cc">\
-								<label for="#" class="field-label">create DNS domain:</label>\
-								<input type="checkbox" value="~!:DNS~!" ~!:CHECKED_DNS~! name="DNS" class="styled">\
+								<label for="domain-dns" class="field-label">create DNS domain:</label>\
+								<input id="domain-dns" type="checkbox" value="~!:DNS~!" ~!:CHECKED_DNS~! name="DNS" class="cust-checkbox">\
 							</div>\
 						</div><!-- DNS options -->\
 						<div class="form-options-group hidden">\
@@ -709,15 +709,15 @@ App.Templates.html = {
 							</div>\
 							<div class="sub_section hidden">\
                                 <div class="form-row cc">\
-                                    <label for="#" class="field-label">create mail domain:</label>\
-                                    <input type="checkbox" value="~!:MAIL~!" ~!:CHECKED_MAIL~! name="MAIL" class="styled">\
+                                    <label for="domain-mail" class="field-label">create mail domain:</label>\
+                                    <input id="domain-mail" type="checkbox" value="~!:MAIL~!" ~!:CHECKED_MAIL~! name="MAIL" class="cust-checkbox">\
                                 </div>\
                             </div>\
                         </div>\
                         </div><!-- Mail options -->\
     					<div class="form-row cc ~!:DNS_DOMAIN_ALSO~!">\
-        					<label for="#" class="field-label">Create DNS domain also:</label>\
-							<input type="checkbox" value="" name="DNS_DOMAIN" class="styled">\
+        					<label for="domain-mail-dns" class="field-label">Create DNS domain also:</label>\
+							<input id="domain-mail-dns" type="checkbox" value="" name="DNS_DOMAIN" class="cust-checkbox">\
 						</div>\
 						<div class="form-row buttons-row cc">\
                            <input class="add-entry-btn do_action_save_form" type="submit" value="~!:save_button~!"/>\
@@ -869,8 +869,8 @@ App.Templates.html = {
 							<select name="CHARSET" class="styled">~!:CHARSET_OPTIONS~!</select>\
 						</div>\
 						<div class="form-row suspended cc">\
-                            <label for="#" class="field-label">Suspended:</label>\
-                            <input type="checkbox" ~!:SUSPENDED_CHECKED~! value="~!:SUSPENDED_VALUE~!" class="styled do_action_toggle_suspend" name="SUSPEND" />\
+                            <label for="suspended" class="field-label">Suspended:</label>\
+                            <input id="suspended" type="checkbox" ~!:SUSPENDED_CHECKED~! value="~!:SUSPENDED_VALUE~!" class="cust-checkbox do_action_toggle_suspend" name="SUSPEND" />\
                         </div>\
                         <div class="form-row buttons-row cc">\
                            <input class="add-entry-btn do_action_save_form" type="submit" value="~!:save_button~!"/>\
@@ -983,8 +983,8 @@ App.Templates.html = {
 							<textarea class="textarea" name="REPORT_TO"></textarea>\
 						</div>\
 						<div class="form-row suspended cc">\
-                            <label for="#" class="field-label">Suspended:</label>\
-                            <input type="checkbox" ~!:SUSPENDED_CHECKED~! value="~!:SUSPENDED_VALUE~!" class="styled do_action_toggle_suspend" name="SUSPEND"/>\
+                            <label for="suspended" class="field-label">Suspended:</label>\
+                            <input id="suspended" type="checkbox" ~!:SUSPENDED_CHECKED~! value="~!:SUSPENDED_VALUE~!" class="cust-checkbox do_action_toggle_suspend" name="SUSPEND"/>\
                         </div>\
                         <div class="form-row buttons-row cc">\
                            <input class="add-entry-btn do_action_save_form" type="submit" value="~!:save_button~!"/>\