apache/cloudstack
1
0
Fork 0
mirror of https://github.com/apache/cloudstack.git synced 2025-11-04 00:02:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

CS-15353: Larger click boxes in UI.

Browse Source
This commit is contained in:
olgasmola 2012-07-04 13:32:47 +03:00
parent 2b1758b233
commit 1075344f03
5 changed files with 57 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/css/cloudstack3.css
View File

@ -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;
}

9
ui/scripts/ui-custom/projects.js
View File

@ -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'));

5
ui/scripts/ui-custom/zoneWizard.js
View File

@ -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', {

37
ui/scripts/ui/core.js
View File

@ -349,9 +349,26 @@
// 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();
@ -359,11 +376,29 @@
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;

4
ui/scripts/ui/dialog.js
View File

@ -338,6 +338,10 @@
else
$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() {