Updated Branches: refs/heads/ui-restyle 659832377 -> ad5d3bc0d
Dialog: Use jquery UI overlay Instead of old custom overlay widget, use jquery UI's modal: true option to add overlay to dialogs Project: http://git-wip-us.apache.org/repos/asf/cloudstack/repo Commit: http://git-wip-us.apache.org/repos/asf/cloudstack/commit/ad5d3bc0 Tree: http://git-wip-us.apache.org/repos/asf/cloudstack/tree/ad5d3bc0 Diff: http://git-wip-us.apache.org/repos/asf/cloudstack/diff/ad5d3bc0 Branch: refs/heads/ui-restyle Commit: ad5d3bc0dd360d2fa0b338508474072323095860 Parents: 6598323 Author: Brian Federle <[email protected]> Authored: Mon Oct 7 11:16:09 2013 -0700 Committer: Brian Federle <[email protected]> Committed: Mon Oct 7 11:16:09 2013 -0700 ---------------------------------------------------------------------- ui/scripts/ui-custom/accountsWizard.js | 8 +++----- ui/scripts/ui-custom/instanceWizard.js | 8 ++------ ui/scripts/ui-custom/projects.js | 25 +++++++++++++------------ ui/scripts/ui-custom/regions.js | 7 +------ ui/scripts/ui-custom/zoneWizard.js | 6 ++---- ui/scripts/ui/core.js | 4 ++-- ui/scripts/ui/dialog.js | 21 +++++++-------------- ui/scripts/ui/widgets/notifications.js | 11 ----------- ui/stylesheets/csui/_dialog.scss | 6 ++++++ 9 files changed, 36 insertions(+), 60 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/cloudstack/blob/ad5d3bc0/ui/scripts/ui-custom/accountsWizard.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui-custom/accountsWizard.js b/ui/scripts/ui-custom/accountsWizard.js index 5e68549..bb5cac9 100644 --- a/ui/scripts/ui-custom/accountsWizard.js +++ b/ui/scripts/ui-custom/accountsWizard.js @@ -26,9 +26,6 @@ var close = function() { $wizard.dialog('destroy'); - $('div.overlay').fadeOut(function() { - $('div.overlay').remove(); - }); }; var completeAction = function() { @@ -160,8 +157,9 @@ width: 800, height: 800, closeOnEscape: false, - zIndex: 5000 - }).closest('.ui-dialog').overlay(); + zIndex: 5000, + modal: true + }); }; accountsWizard(args); http://git-wip-us.apache.org/repos/asf/cloudstack/blob/ad5d3bc0/ui/scripts/ui-custom/instanceWizard.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui-custom/instanceWizard.js b/ui/scripts/ui-custom/instanceWizard.js index f4d4560..2b111f5 100644 --- a/ui/scripts/ui-custom/instanceWizard.js +++ b/ui/scripts/ui-custom/instanceWizard.js @@ -35,9 +35,6 @@ // Close instance wizard var close = function() { $wizard.dialog('destroy'); - $('div.overlay').fadeOut(function() { - $('div.overlay').remove(); - }); }; // Save instance and close wizard @@ -78,7 +75,6 @@ }, error: function(message) { $wizard.remove(); - $('div.overlay').remove(); if (message) { cloudStack.dialog.notice({ @@ -1033,10 +1029,10 @@ title: _l('label.vm.add'), width: 800, height: 570, + modal: true, closeOnEscape: false, zIndex: 5000 - }) - .closest('.ui-dialog').overlay(); + }); }; instanceWizard(args); http://git-wip-us.apache.org/repos/asf/cloudstack/blob/ad5d3bc0/ui/scripts/ui-custom/projects.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui-custom/projects.js b/ui/scripts/ui-custom/projects.js index d897ac9..2641226 100644 --- a/ui/scripts/ui-custom/projects.js +++ b/ui/scripts/ui-custom/projects.js @@ -489,11 +489,11 @@ $saveButton.html(_l('label.save')); $saveButton.click(function() { $('#new-project-review-tabs-resouces').find('form').submit(); - $('.ui-dialog, .overlay').remove(); + $('.ui-dialog').remove(); }); $laterButton.click(function() { - $(':ui-dialog, .overlay').remove(); + $(':ui-dialog').remove(); return false; }); @@ -515,7 +515,7 @@ var $laterButton = $('<div>').addClass('button later').html(_l('label.remind.later')); $laterButton.click(function() { - $(':ui-dialog, .overlay').remove(); + $(':ui-dialog').remove(); return false; }); @@ -537,7 +537,7 @@ }); $cancel.click(function() { - $(':ui-dialog, .overlay').remove(); + $(':ui-dialog').remove(); }); return $newProject @@ -627,7 +627,7 @@ //Cancel button $cancel.click(function() { - $(':ui-dialog, .overlay').remove(); + $(':ui-dialog').remove(); $('.select.default-view').click(); }); @@ -638,15 +638,16 @@ cloudStack.dialog.notice({ message: isAdmin() || isDomainAdmin() || g_userProjectsEnabled ? _l('message.no.projects') : _l('message.no.projects.adminOnly') }).closest('.ui-dialog'); - $.merge($selector, $('.overlay')).remove(); + $selector.remove(); $('.select.default-view').click(); } else { $selector.dialog({ + modal: true, title: _l('label.select.project'), dialogClass: 'project-selector-dialog', closeOnEscape: false, width: 420 - }).closest('.ui-dialog').overlay(); + }); } }); @@ -668,9 +669,8 @@ // Put project name in header $switcher.html('<span class="icon"> </span>' + projectName); - - - $.merge($selector, $('.overlay')).remove(); + + $selector.remove(); // Select active project $projectSelect @@ -707,8 +707,9 @@ pageElems.newProjectForm().dialog({ title: 'New Project', closeOnEscape: false, - width: 760 - }).closest('.ui-dialog').overlay(); + width: 760, + modal: true + }); }; var deleteProject = function(args) { http://git-wip-us.apache.org/repos/asf/cloudstack/blob/ad5d3bc0/ui/scripts/ui-custom/regions.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui-custom/regions.js b/ui/scripts/ui-custom/regions.js index 986e009..5858d33 100644 --- a/ui/scripts/ui-custom/regions.js +++ b/ui/scripts/ui-custom/regions.js @@ -81,9 +81,6 @@ var closeRegionSelector = function(args) { $regionSwitcherButton.removeClass('active'); $regionSelector.fadeOut(args ? args.complete : null); - $('body > .overlay').fadeOut(function() { - $('body > .overlay').remove() - }); }; var switchRegion = function(url) { @@ -116,9 +113,7 @@ closeRegionSelector(); } else { $regionSwitcherButton.addClass('active'); - $regionSelector.fadeIn('fast').overlay({ - closeAction: closeRegionSelector - }); + $regionSelector.fadeIn('fast'); } }); http://git-wip-us.apache.org/repos/asf/cloudstack/blob/ad5d3bc0/ui/scripts/ui-custom/zoneWizard.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui-custom/zoneWizard.js b/ui/scripts/ui-custom/zoneWizard.js index 28df193..b4ba5c74 100644 --- a/ui/scripts/ui-custom/zoneWizard.js +++ b/ui/scripts/ui-custom/zoneWizard.js @@ -968,9 +968,6 @@ // Close wizard var close = function() { $wizard.dialog('destroy'); - $('div.overlay').fadeOut(function() { - $('div.overlay').remove(); - }); }; // Save and close wizard @@ -1417,8 +1414,9 @@ width: 750, height: 665, zIndex: 5000, + modal: true, resizable: false - }).closest('.ui-dialog').overlay(); + }); }; }; })(jQuery, cloudStack); http://git-wip-us.apache.org/repos/asf/cloudstack/blob/ad5d3bc0/ui/scripts/ui/core.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui/core.js b/ui/scripts/ui/core.js index 07fb6cb..8e84acd 100644 --- a/ui/scripts/ui/core.js +++ b/ui/scripts/ui/core.js @@ -325,10 +325,10 @@ buttons: { 'Close': function() { $(this).dialog("close"); - $(':ui-dialog, .overlay').remove(); + $(':ui-dialog').remove(); } } - }).closest('.ui-dialog').overlay(); + }); return false; }); http://git-wip-us.apache.org/repos/asf/cloudstack/blob/ad5d3bc0/ui/scripts/ui/dialog.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui/dialog.js b/ui/scripts/ui/dialog.js index bfd0d93..c207788 100644 --- a/ui/scripts/ui/dialog.js +++ b/ui/scripts/ui/dialog.js @@ -70,13 +70,12 @@ }); var ret = function() { - $('.overlay').remove(); - return $formContainer.dialog({ dialogClass: 'create-form', closeOnEscape: false, draggable: false, width: 800, + modal: true, title: _l(args.form.title), open: function() { if (args.form.preFilter) { @@ -94,7 +93,6 @@ return false; } - $('div.overlay').remove(); $('.tooltip-box').remove(); $formContainer.remove(); $(this).dialog('destroy'); @@ -107,7 +105,6 @@ text: _l('label.cancel'), 'class': 'cancel', click: function() { - $('div.overlay').remove(); $('.tooltip-box').remove(); $formContainer.remove(); $(this).dialog('destroy'); @@ -115,7 +112,7 @@ $('.hovered-elem').hide(); } }] - }).closest('.ui-dialog').overlay(); + }); }; var isLastAsync = function(idx) { @@ -666,6 +663,7 @@ $listView.dialog({ dialogClass: 'multi-edit-add-list panel', width: 825, + modal: true, title: _l('Select VM'), buttons: [{ text: _l('label.apply'), @@ -692,8 +690,6 @@ }); $listView.remove(); - - $('div.overlay').remove(); } }, { text: _l('label.cancel'), @@ -702,12 +698,9 @@ $listView.fadeOut(function() { $listView.remove(); }); - $('div.overlay').fadeOut(function() { - $('div.overlay').remove(); - }); } }] - }).parent('.ui-dialog').overlay(); + }); }, /** @@ -761,13 +754,13 @@ title: _l('label.confirmation'), dialogClass: 'confirm', closeOnEscape: false, + modal: true, zIndex: 5000, buttons: [{ text: _l('label.no'), 'class': 'cancel', click: function() { $(this).dialog('destroy'); - $('div.overlay').remove(); if (args.cancelAction) { args.cancelAction(); } @@ -779,11 +772,10 @@ click: function() { args.action(); $(this).dialog('destroy'); - $('div.overlay').remove(); $('.hovered-elem').hide(); } }] - }).closest('.ui-dialog').overlay(); + }); }, /** @@ -800,6 +792,7 @@ dialogClass: 'notice', closeOnEscape: false, zIndex: 5000, + modal: true, buttons: [{ text: _l('Close'), 'class': 'close', http://git-wip-us.apache.org/repos/asf/cloudstack/blob/ad5d3bc0/ui/scripts/ui/widgets/notifications.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui/widgets/notifications.js b/ui/scripts/ui/widgets/notifications.js index 9b7fc4c..ff6eed9 100644 --- a/ui/scripts/ui/widgets/notifications.js +++ b/ui/scripts/ui/widgets/notifications.js @@ -223,11 +223,6 @@ show: function($popup, $attachTo) { notifications.resetTotal($popup); return notifications.popup.reposition($popup, $attachTo) - .overlay({ - closeAction: function() { - notifications.popup.hide($popup); - } - }) .fadeIn(); }, hide: function($popup) { @@ -342,7 +337,6 @@ $('#navigation ul li').filter(function() { return $(this).hasClass($li.data('notification-section')); }).click(); - $('div.overlay').click(); return false; } @@ -361,11 +355,6 @@ notifications.removeItem($popup, $target.closest('li')); } - // Close button - else if ($target.closest('.button.close')) { - $('div.overlay').click(); - } - return false; } http://git-wip-us.apache.org/repos/asf/cloudstack/blob/ad5d3bc0/ui/stylesheets/csui/_dialog.scss ---------------------------------------------------------------------- diff --git a/ui/stylesheets/csui/_dialog.scss b/ui/stylesheets/csui/_dialog.scss index 043027b..f3b708f 100644 --- a/ui/stylesheets/csui/_dialog.scss +++ b/ui/stylesheets/csui/_dialog.scss @@ -61,4 +61,10 @@ .ui-dialog { // jqUI dialog @include csui-dialog; @include animation-duration(300ms); +} + +.ui-widget-overlay { + position: absolute; + top: 0px; + background: rgba(#000, 0.5); } \ No newline at end of file
