Fixes an usability issue. Now description text is clickable on the

CTK.CheckboxText and CTK.CheckCfgText widgets.

git-svn-id: svn://cherokee-project.com/CTK/trunk@5382 5dc97367-97f1-0310-9951-d761b3857238

CTK/Checkbox.py

@@ -32,6 +32,18 @@
 <input type="checkbox" id="%(id)s" %(props)s />
 """
 
+CLICK_CHANGE_JS = """
+   $('#%s').each (function() {
+      var checkbox_text = $(this);
+
+      checkbox_text.find('.description').bind ('click', function() {
+          var checkbox = checkbox_text.find('input:checkbox');
+          checkbox.attr("checked", !checkbox.attr("checked"));
+          checkbox.trigger ({type: "change"});
+      });
+   });
+"""
+
 class Checkbox (Widget):
     def __init__ (self, props={}):
         # Sanity check
@@ -90,7 +102,8 @@ def __init__ (self, props=None, text='Enabled'):
 
     def Render (self):
         render = Checkbox.Render (self)
-        render.html = '<div id="%s" class="checkbox-text">%s %s</div>' %(self.id, render.html, self.text)
+        render.html  = '<div id="%s" class="checkbox-text">%s <div class="description">%s</div></div>' %(self.id, render.html, self.text)
+        render.js   += CLICK_CHANGE_JS %(self.id)
         return render
 
 
@@ -105,5 +118,6 @@ def __init__ (self, key, default, text='Enabled', props=None):
 
     def Render (self):
         render = CheckCfg.Render (self)
-        render.html = '<div id="%s" class="checkbox-text">%s %s</div>' %(self.id, render.html, self.text)
+        render.html =  '<div id="%s" class="checkbox-text">%s <div class="description">%s</div></div>' %(self.id, render.html, self.text)
+        render.js   += CLICK_CHANGE_JS %(self.id)
         return render

static/css/CTK.css

@@ -73,6 +73,7 @@ input[type=text]focus, input[type=password]focus, textarea:focus { border: 2px s
 input[type=text], input[type=password] { width: 240px; }
 select { border: 1px solid #b0bfce; ibackground: #fff; padding: 2px; outline: none; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
 .checkbox-text { padding: 4px; }
+.checkbox-text .description { display: inline-block; }
 
 /* Styles for cherokee-admin layout
  */
@@ -130,16 +131,16 @@ html>body #container { min-height: 100%; }
 
 /* Button
  */
-button { 
-    border: 0; 
-    margin: 0; 
-    padding: 6px 8px; 
+button {
+    border: 0;
+    margin: 0;
+    padding: 6px 8px;
     outline: none;
     color: #27c;
     font-weight: bold;
-    text-shadow: #fff 0px 1px 0px; 
+    text-shadow: #fff 0px 1px 0px;
     border: 1px solid #cde;
-    -moz-border-radius: 4px; 
+    -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
     border-radius: 4px;
     background: #2277cc;
@@ -150,10 +151,10 @@ button {
     -webkit-box-shadow: inset 1px 1px 0 #fff;
     box-shadow: inset 1px 1px 0 #fff;
 }
-button:active { 
+button:active {
     -moz-box-shadow: inset 0 1px 4px #def;
     -webkit-box-shadow: inset 0 1px 4px #def;
-    box-shadow: inset 0 1px 4px #def; 
+    box-shadow: inset 0 1px 4px #def;
     padding: 7px 8px 5px 8px;
 }