From: Stas Vilchik <vilchiks@gmail.com>
Date: Fri, 26 Dec 2014 14:56:18 +0000 (+0100)
Subject: Improve modal view ui
X-Git-Tag: latest-silver-master-#65~404
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=da49a252b0f19f737a5fe6dd764c8325ea1df20d;p=sonarqube.git

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 99917d9e090..ad8758d9e02 100644
--- 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 6581e6691c6..f54692e5b8e 100644
--- 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;
 }