Improve modal view ui

diff --git a/server/sonar-web/src/main/js/common/modals.js b/server/sonar-web/src/main/js/common/modals.js
index 99917d9e090076e490f88a3007c653e621cf8134..ad8758d9e02d7466cbbabad0d5b97a6d019b3a36 100644 (file)
--- a/server/sonar-web/src/main/js/common/modals.js
+++ b/server/sonar-web/src/main/js/common/modals.js
@@ -6,6 +6,7 @@ define(['backbone.marionette'], function (Marionette) {
   return Marionette.ItemView.extend({
     className: 'modal',
     overlayClassName: 'modal-overlay',
+    htmlClassName: 'modal-open',
 
     events: function () {
       return {
@@ -16,6 +17,7 @@ define(['backbone.marionette'], function (Marionette) {
     onRender: function () {
       var that = this;
       this.$el.detach().appendTo($('body'));
+      $('html').addClass(this.htmlClassName);
       this.renderOverlay();
       this.keyScope = key.getScope();
       key.setScope('modal');
@@ -23,9 +25,19 @@ define(['backbone.marionette'], function (Marionette) {
         that.close();
         return false;
       });
+      this.show();
+    },
+
+    show: function () {
+      var that = this;
+      setTimeout(function () {
+        that.$el.addClass('in');
+        $('.' + that.overlayClassName).addClass('in');
+      }, 0);
     },
 
     onClose: function () {
+      $('html').removeClass(this.htmlClassName);
       this.removeOverlay();
       key.deleteScope('modal');
       key.setScope(this.keyScope);

diff --git a/server/sonar-web/src/main/less/components/modals.less b/server/sonar-web/src/main/less/components/modals.less
index 6581e6691c66e1ea1de15ffb861880a8eba3f113..f54692e5b8e00320e790320defbdb60277ab4c55 100644 (file)
--- a/server/sonar-web/src/main/less/components/modals.less
+++ b/server/sonar-web/src/main/less/components/modals.less
@@ -1,16 +1,33 @@
 .modal {
   position: fixed;
   z-index: 9000;
-  top: 15%;
+  top: 0;
   left: 50%;
   margin-left: -270px;
   width: 540px;
   background-color: #fff;
+  opacity: 0;
+  .trans;
+}
+
+.modal.in {
+  top: 15%;
+  opacity: 1;
 }
 
 .modal-overlay {
   position: fixed;
   z-index: 8999;
   top: 0; bottom: 0; left: 0; right: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.7);
+  opacity: 0;
+  .trans;
+}
+
+.modal-overlay.in {
+  opacity: 1;
+}
+
+.modal-open {
+  overflow: hidden;
 }