Permalink
Browse files

CS-15353: Larger click boxes in UI.

  • Loading branch information...
1 parent 2b1758b commit 1075344f03e836de5b11222aaf68b90bdd4a9531 @olgasmola olgasmola committed Jul 4, 2012
View
@@ -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;
+}
@@ -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'));
@@ -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', {
View
@@ -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;
View
@@ -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() {

0 comments on commit 1075344

Please sign in to comment.