AMBARI-5605. Usability UX: Default key actions for dialog boxes.(xiwang)

ambari-web/app/styles/application.less

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+
 @space-s: 5px;
 @space-m: 10px;
 @space-l: 20px;
@@ -129,6 +130,7 @@ footer {
       background-image: -webkit-linear-gradient(top, @top-nav-bg-color-from, @top-nav-bg-color-to);
       background-image: -o-linear-gradient(top, @top-nav-bg-color-from, @top-nav-bg-color-to);
       background-image: linear-gradient(to bottom, @top-nav-bg-color-from, @top-nav-bg-color-to);
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= @top-nav-bg-color-from, endColorstr=@top-nav-bg-color-to); //for IE9-
       -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
       -moz-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
       box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
@@ -156,7 +158,7 @@ footer {
     .brand.cluster-name {
       margin-left: 10px;
 
-      .operations-count {
+      .label.operations-count {
         background-color: #006DCC;
         -webkit-animation-name: greenPulse;
         -webkit-animation-duration: 1s;
@@ -167,7 +169,6 @@ footer {
         animation-name: greenPulse;
         animation-duration: 1s;
         animation-iteration-count: infinite;
-        //margin: 2px;
       }
       .label  {
          padding: 3px 5px 3px;

ambari-web/app/views/application.js

@@ -20,5 +20,32 @@
 var App = require('app');
 
 App.ApplicationView = Em.View.extend({
-    templateName: require('templates/application')
+  templateName: require('templates/application'),
+
+  didInsertElement: function () {
+    // on 'Enter' pressed, trigger modal window primary button if primary button is enabled(green)
+    // on 'Esc' pressed, close the modal
+    $(document).keydown(function(event){
+      if (event.which == 13 || event.keyCode == 13 ) {
+        var primaryButton = $(document).find('#modal > .modal-footer > .btn-success').first();
+        if (primaryButton.length > 0 && primaryButton.attr('disabled') != 'disabled') {
+          event.preventDefault();
+          primaryButton.click();
+          return false;
+        }
+      }
+      return true;
+    });
+    $(document).keyup(function(event){
+      if (event.which == 27 || event.keyCode == 27) {
+        var closeButton = $(document).find('#modal > .modal-header > .close').first();
+        if (closeButton.length > 0) {
+          event.preventDefault();
+          closeButton.click();
+          return false;
+        }
+      }
+      return true;
+    });
+  }
 });

ambari-web/app/views/common/modal_popup.js

@@ -169,6 +169,7 @@ App.showConfirmationFeedBackPopup = function (primary, bodyMessage, secondary) {
       this.set('disablePrimary', true);
       this.set('disableSecondary', true);
       this.set('statusMessage', Em.I18n.t('popup.confirmationFeedBack.sending'));
+      this.hide();
       primary(this.get('query'));
     },
     statusMessage: function () {