Merge pull request #5399 from WebsiteDeveloper/dialog-layout

Fix dialog positioning
adobe · Oct 9, 2013 · 0643bec · 0643bec
2 parents 87696f7 + 21adbce
commit 0643bec
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 35 deletions.
diff --git a/src/styles/bootstrap/modals.less b/src/styles/bootstrap/modals.less
@@ -27,10 +27,8 @@
 .modal {
   position: fixed;
   top: 50%;//changed from 10%
-  left: 50%;
   z-index: @zindexModal;
   width: 600px;
-  margin: -250px 0 0 -280px;//changed from -280px
   background-color: @white;
   border: 1px solid #999;
   border: 1px solid rgba(0,0,0,.3);

diff --git a/src/styles/brackets_patterns_override.less b/src/styles/brackets_patterns_override.less
@@ -396,9 +396,27 @@ a:focus {
 
 /* Dialog-related styles */
 
+.modal-wrapper {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    overflow: auto;
+    display: table;
+}
+
+.modal-inner-wrapper {
+    display: table-cell;
+    vertical-align: middle;
+}
+
 .modal {
     background-color: @tc-gray-panel;
-    width: auto;
+    min-width: 200px;
+    position: relative;
+    top: 0;
+    margin: auto;
 }
 
 .modal .close {
@@ -412,11 +430,15 @@ a:focus {
     border-bottom: 1px solid @tc-gray-panel-separator;
 }
 
-.modal-body, .modal-header {
+.modal-body {
+    background-color: @tc-gray-panel;
+}
+
+.modal-body, .modal-header, .modal-footer {
     /* See styles/bootstrap/patterns.less .modal class.
        Pushing this value down to .modal-header and .modal-body
        to allow the overall modal to take the width of the footer */
-    width: 580px;
+    width: 560px;
 }
 
 .modal-footer {
@@ -565,27 +587,21 @@ a[href^="http"] {
     width: 400px;
 }
 
-.install-extension-dialog {
-    margin-top: -125px;
-}
 .install-extension-dialog .modal-body input.url {
     margin: 10px 0;
     width: 550px;
 }
 
 /* Extension Manager dialog */
 .extension-manager-dialog {
-    top: 50%;
-    left: 50%;
-    margin-top: -275px;
-    margin-left: -350px;
     background-color: #d4d7d7;
-
+    width: 760px;
+
     .modal-header {
         border-bottom: none;
+        width: 760px;
         padding: 0;
-        width: auto;
-
+
         .nav-tabs {
             margin: 0;
             border-color: #c3c6c5;
@@ -670,12 +686,12 @@ a[href^="http"] {
         }
     }
     .modal-body {
-        width: 730px;
         height: 400px;
         overflow-y: scroll;
-        padding: 0;
         background-color: @tc-gray-panel;
-
+        padding: 0;
+        width: 760px;
+
         .empty-message {
             position: absolute;
             top: 50%;
@@ -748,6 +764,10 @@ a[href^="http"] {
             }
         }
     }
+
+    .modal-footer {
+        width: 730px;
+    }
 }
 
 /* About dialog */
@@ -902,7 +922,7 @@ input[type="color"],
     background-color: @tc-button-background;
     text-shadow: @tc-text-shadow;
     color: @tc-text;
-    cursor: default;    
+    cursor: default;
     font-size: (@baseFontSize + 1);
     font-weight: @font-weight-semibold;
     line-height: normal;

diff --git a/src/widgets/Dialogs.js b/src/widgets/Dialogs.js
@@ -1,24 +1,24 @@
 /*
  * Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
- *  
+ *
  * Permission is hereby granted, free of charge, to any person obtaining a
- * copy of this software and associated documentation files (the "Software"), 
- * to deal in the Software without restriction, including without limitation 
- * the rights to use, copy, modify, merge, publish, distribute, sublicense, 
- * and/or sell copies of the Software, and to permit persons to whom the 
+ * copy of this software and associated documentation files (the "Software"),
+ * to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the
  * Software is furnished to do so, subject to the following conditions:
- *  
+ *
  * The above copyright notice and this permission notice shall be included in
  * all copies or substantial portions of the Software.
- *  
+ *
  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
- * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
  * DEALINGS IN THE SOFTWARE.
- * 
+ *
  */
 
 
@@ -69,6 +69,7 @@ define(function (require, exports, module) {
     function _dismissDialog($dlg, buttonId) {
         $dlg.data("buttonId", buttonId);
         $dlg.modal("hide");
+        $(".modal-wrapper:last").remove();
     }
 
     /**
@@ -223,11 +224,13 @@ define(function (require, exports, module) {
             autoDismiss = true;
         }
 
+        $("body").append("<div class='modal-wrapper'><div class='modal-inner-wrapper'></div></div>");
+
         var result  = $.Deferred(),
             promise = result.promise(),
             $dlg    = $(template)
                 .addClass("instance")
-                .appendTo(window.document.body);
+                .appendTo(".modal-inner-wrapper:last");
 
         // Save the dialog promise for unit tests
         $dlg.data("promise", promise);
@@ -282,6 +285,7 @@ define(function (require, exports, module) {
             .modal({
                 backdrop: "static",
                 show:     true,
+                selector: ".modal-inner-wrapper:last",
                 keyboard: false // handle the ESC key ourselves so we can deal with nested dialogs
             })
             // Updates the z-index of the modal dialog and the backdrop
@@ -321,7 +325,7 @@ define(function (require, exports, module) {
     }
 
     /**
-     * Immediately closes any dialog instances with the given class. The dialog callback for each instance will 
+     * Immediately closes any dialog instances with the given class. The dialog callback for each instance will
      * be called with the special buttonId DIALOG_CANCELED (note: callback is run asynchronously).
      * @param {string} dlgClass The class name identifier for the dialog.
      * @param {string=} buttonId The button id to use when closing the dialog. Defaults to DIALOG_CANCELED

diff --git a/src/widgets/bootstrap-modal.js b/src/widgets/bootstrap-modal.js
@@ -57,7 +57,7 @@
           var transition = $.support.transition && that.$element.hasClass('fade')
 
           if (!that.$element.parent().length) {
-            that.$element.appendTo(document.body) //don't move modals dom position
+            that.$element.appendTo(this.options.selector) //don't move modals dom position
           }
 
           that.$element.show()
@@ -160,7 +160,7 @@
           var doAnimate = $.support.transition && animate
 
           this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
-            .appendTo(document.body)
+            .appendTo(this.options.selector)
 
           this.$backdrop.click(
             this.options.backdrop == 'static' ?
@@ -212,6 +212,7 @@
       backdrop: true
     , keyboard: true
     , show: true
+    , selector: "body"
   }
 
   $.fn.modal.Constructor = Modal