CS-15353: Larger click boxes in UI.

wido · Jul 25, 2012 · 1075344 · 1075344
1 parent 2b1758b
commit 1075344
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 6 deletions.
diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
@@ -9967,3 +9967,7 @@ div.panel.ui-dialog div.list-view div.fixed-header {
   background-position: -230px -615px;
 }
 
+.label-hovered {
+  cursor: pointer;
+  color: blue !important;
+}
diff --git a/ui/scripts/ui-custom/projects.js b/ui/scripts/ui-custom/projects.js
@@ -171,7 +171,8 @@
                 var $input = $('<input>').attr({
                   type: 'text',
                   name: resource.type,
-                  value: resource.value
+                  value: resource.value,
+                  id: resource.type
                 }).addClass('required');
 
                 $field.append($label, $input);
@@ -305,13 +306,15 @@
             .append($('<label>').attr('for', 'project-name').html(_l('label.project.name')))
             .append($('<input>').addClass('required').attr({
               type: 'text',
-              name: 'project-name'
+              name: 'project-name',
+              id: 'project-name'
             }));
       var $projectDesc = $('<div>').addClass('field desc')
             .append($('<label>').attr('for', 'project-desc').html(_l('label.display.text')))
             .append($('<input>').attr({
               type: 'text',
-              name: 'project-display-text'
+              name: 'project-display-text',
+              id: 'project-desc'
             }));
       var $submit = $('<input>').attr({ type: 'submit' }).val(_l('label.create.project'));
       var $cancel = $('<div>').addClass('button cancel').html(_l('label.cancel'));

diff --git a/ui/scripts/ui-custom/zoneWizard.js b/ui/scripts/ui-custom/zoneWizard.js
@@ -831,6 +831,11 @@
     $form.find('.form-item .name').each(function() {
       $(this).html($(this).find('label'));
     });
+    $form.find('label[for]').each(function() {
+      var forAttr = $(this).attr('for');
+      $form.find('#' + forAttr).attr('id', id + '_' + forAttr);
+      $(this).attr('for', id + '_' + forAttr)
+    });
 
     $form.find('select, input').change(function() {
       cloudStack.evenOdd($form, '.field:visible', {

diff --git a/ui/scripts/ui/core.js b/ui/scripts/ui/core.js
@@ -349,21 +349,56 @@
 
   // Events
   $(function() {
+    // Check if target should be hovered
+    function checkHoveredLabel($target) {
+      var $multiWizard = $('div.ui-dialog div.multi-wizard');
+      if ($target.is('label[for]') || 
+        ($multiWizard.size() && 
+          ($target.is('.multi-wizard label') && $target.prev('input[type="radio"],input[type="checkbox"]').size()) || 
+          ($target.is('.multi-wizard .select-desc div.name') && $target.parent('div.select-desc').prev('input[type="radio"],input[type="checkbox"]').size())
+        ))
+        return true;
+
+      return false;
+    }
+
     // Rollover behavior for user options
     $(document).bind('mouseover', function(event) {
-      if ($(event.target).closest('#user, #user-options').size()) {
+      var $target = $(event.target);
+      if (checkHoveredLabel($target)) {
+        $target.addClass('label-hovered');
+      }
+      if ($target.closest('#user, #user-options').size()) {
         return false;
       }
       else $('#user-options').hide();
 
       return false;
     });
 
+    $(document).bind('mouseout', function(event) {
+      var $target = $(event.target);
+      if (checkHoveredLabel($target)) {
+        $target.removeClass('label-hovered');
+      }
+    });
+
     $(document).bind('click', function(event) {
       var $target = $(event.target);
       var $container = $target.closest('[cloudStack-container]');
       var args = $container.data('cloudStack-args');
       var $browser = $container.find('#browser .container');
+      var $multiWizard = $('div.ui-dialog div.multi-wizard');
+
+      // Wizard: trigger click event for input when click it label
+      if ($multiWizard.size()) {
+          if ($target.is('.multi-wizard label') && $target.prev('input[type="radio"],input[type="checkbox"]').size()) {
+            $target.prev('input').trigger('click');
+          }
+          if ($target.is('.multi-wizard .select-desc div.name') && $target.parent('div.select-desc').prev('input[type="radio"],input[type="checkbox"]').size()) {
+            $target.parent('div.select-desc').prev('input').trigger('click');
+          }
+      }
 
       if (!$container.size()) return true;
 

diff --git a/ui/scripts/ui/dialog.js b/ui/scripts/ui/dialog.js
@@ -336,8 +336,12 @@
 				if(field.validation != null)
           $input.data('validation-rules', field.validation);
 				else
-          $input.data('validation-rules', {});	
-
+          $input.data('validation-rules', {});
+
+          var fieldLabel = field.label;
+          var inputId = $input.attr('id') ? $input.attr('id') : fieldLabel.replace(/\./g,'_');
+          $input.attr('id', inputId);
+          $name.find('label').attr('for', inputId);
       });
 
       var getFormValues = function() {