From eaf93c8974a20369a79bdc273bf48bb70b2fdeaa Mon Sep 17 00:00:00 2001 From: Gabriel Hurley Date: Thu, 19 Jan 2012 23:08:04 -0800 Subject: [PATCH] Tooltip implementation cleanup. Re-enables tooltips for modal forms (previously not using delegated events). Fixes bug 918950. Aligned the x position of the tooltips. Fixes 915762. Reworks triggers for checkboxes to better handle focus/hover. Fixes bug 915765. Change-Id: Ic728fd426418c5d81f87256b0674f21050c0e79c --- .../dashboard/static/dashboard/css/style.css | 9 ++- .../dashboard/static/dashboard/js/forms.js | 77 +++++++++++-------- .../dashboard/static/dashboard/js/modals.js | 3 +- 3 files changed, 54 insertions(+), 35 deletions(-) diff --git a/openstack-dashboard/dashboard/static/dashboard/css/style.css b/openstack-dashboard/dashboard/static/dashboard/css/style.css index 4e168c7e755..09dea4bd323 100644 --- a/openstack-dashboard/dashboard/static/dashboard/css/style.css +++ b/openstack-dashboard/dashboard/static/dashboard/css/style.css @@ -643,10 +643,17 @@ table tfoot tr td { width: 372px; } -.modal fieldset input, .modal fieldset select, .modal fieldset textarea, .modal fieldset ul { +.modal .form-field, +.modal fieldset ul { width: 90%; } +.modal fieldset .form-field input, +.modal fieldset .form-field select, +.modal fieldset .form-field textarea { + width: 100%; +} + .modal .modal-footer input { width: auto; } diff --git a/openstack-dashboard/dashboard/static/dashboard/js/forms.js b/openstack-dashboard/dashboard/static/dashboard/js/forms.js index 3a6b6dfa0c5..880623d7555 100644 --- a/openstack-dashboard/dashboard/static/dashboard/js/forms.js +++ b/openstack-dashboard/dashboard/static/dashboard/js/forms.js @@ -1,80 +1,91 @@ -horizon.addInitFunction(function() { +horizon.addInitFunction(function () { // Disable multiple submissions when launching a form. - $("form").submit(function() { - $(this).submit(function() { - return false; - }); - $('input:submit').removeClass('primary').addClass('disabled'); - $('input:submit').attr('disabled', 'disabled'); - return true; + $("form").submit(function () { + $(this).submit(function () { + return false; + }); + $('input:submit').removeClass('primary').addClass('disabled'); + $('input:submit').attr('disabled', 'disabled'); + return true; }); // TODO (tres): WTF? - $(document).on("submit", ".modal #create_keypair_form", function(e) { + $(document).on("submit", ".modal #create_keypair_form", function (e) { var $this = $(this); $this.closest(".modal").modal("hide"); $('#main_content .page-header').after('
' - + '

Info: The data on this page may have changed, ' - + 'click here to refresh it.

' - + '
'); + + '

Info: The data on this page may have changed, ' + + 'click here to refresh it.

' + + ''); return true; }); // Confirmation on deletion of items. // TODO (tres): These need to be localizable or to just plain go away in favor // of modals. - $(".terminate").click(function() { + $(".terminate").click(function () { var response = confirm('Are you sure you want to terminate the Instance: ' + $(this).attr('title') + "?"); return response; }); - $(".delete").click(function(e) { + $(".delete").click(function (e) { var response = confirm('Are you sure you want to delete the ' + $(this).attr('title') + " ?"); return response; }); - $(".reboot").click(function(e) { + $(".reboot").click(function (e) { var response = confirm('Are you sure you want to reboot the ' + $(this).attr('title') + " ?"); return response; }); - $(".disable").click(function(e) { + $(".disable").click(function (e) { var response = confirm('Are you sure you want to disable the ' + $(this).attr('title') + " ?"); return response; }); - $(".enable").click(function(e) { + $(".enable").click(function (e) { var response = confirm('Are you sure you want to enable the ' + $(this).attr('title') + " ?"); return response; }); - $(".detach").click(function(e) { + $(".detach").click(function (e) { var response = confirm('Are you sure you want to detach the ' + $(this).attr('title') + " ?"); return response; }); - // Twipsy tooltips + /* Twipsy tooltips */ + function getTwipsyTitle() { - return $(this).closest('div.form-field').children('.help-block').text(); + return $(this).closest('div.form-field').children('.help-block').text(); } + // Standard handler for everything but checkboxes $("div.form-field").find("input:not(:checkbox), textarea, select").twipsy({ - placement:'right', - trigger: 'focus', - offset: 4, - title: getTwipsyTitle + placement: 'right', + trigger: 'focus', + offset: 4, + title: getTwipsyTitle, + live: true }); - /* Trigger the twipsy on hover for checkboxes since focus only happens - when the user clicks the element (which is too late for a tooltip to - be useful). */ - $('div.form-field').has("input:checkbox").twipsy({ - placement: 'right', - trigger: 'hover', - offset: 4, - title: getTwipsyTitle + // Checkbox handler for keyboard nav + hover w/ event handlers (see below) + $("div.form-field input:checkbox:first").twipsy({ + placement: 'right', + trigger: 'focus', + offset: 315, + title: getTwipsyTitle, + live: true + }); + + // Handlers to steal focus from other inputs and prevent + // multiple twipsies from opening simultaneously. + $("body").on("mouseenter", 'div.form-field', function (evt) { + $(this).find(":checkbox:first").focus(); + }); + $("body").on("mouseleave", 'div.form-field', function (evt) { + $(this).find(":checkbox:first").blur(); }); // Hide the text for js-capable browsers - $('span.help-block').hide(); + $('span.help-block').hide(); }); diff --git a/openstack-dashboard/dashboard/static/dashboard/js/modals.js b/openstack-dashboard/dashboard/static/dashboard/js/modals.js index edd9d6cae10..a4e44654705 100644 --- a/openstack-dashboard/dashboard/static/dashboard/js/modals.js +++ b/openstack-dashboard/dashboard/static/dashboard/js/modals.js @@ -9,7 +9,8 @@ horizon.addInitFunction(function() { $.ajax($this.attr('href'), { complete: function (jqXHR, status) { $('body').append(jqXHR.responseText); - $('body .modal:last').modal({'show':true, 'backdrop': true, 'keyboard': true}); + $('.modal span.help-block').hide(); + $('.modal:last').modal({'show':true, 'backdrop': true, 'keyboard': true}); // TODO(tres): Find some better way to deal with grouped form fields. var volumeField = $("#id_volume");