From 2b6c6620cb9f846e4e9b1dd29b8f52c0783d59b4 Mon Sep 17 00:00:00 2001 From: Bernhard Sirlinger Date: Wed, 2 Oct 2013 19:06:01 +0200 Subject: [PATCH 1/2] Fix dialog positioning --- src/styles/bootstrap/modals.less | 2 - src/styles/brackets_patterns_override.less | 50 ++++++++++++++-------- src/widgets/Dialogs.js | 33 ++++++++------ src/widgets/bootstrap-modal.js | 5 ++- 4 files changed, 55 insertions(+), 35 deletions(-) diff --git a/src/styles/bootstrap/modals.less b/src/styles/bootstrap/modals.less index ec57254b52c..6a04cec462d 100644 --- 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 index 5fc2ac1a93e..2a20a015ecd 100644 --- a/src/styles/brackets_patterns_override.less +++ b/src/styles/brackets_patterns_override.less @@ -376,9 +376,27 @@ /* 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 { @@ -392,11 +410,15 @@ 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: 100%; } .modal-footer { @@ -558,9 +580,6 @@ a[href^="http"] { width: 400px; } -.install-extension-dialog { - margin-top: -125px; -} .install-extension-dialog .modal-body input.url { margin: 10px 0; width: 550px; @@ -568,17 +587,14 @@ a[href^="http"] { /* Extension Manager dialog */ .extension-manager-dialog { - top: 50%; - left: 50%; - margin-top: -275px; - margin-left: -350px; background-color: #d4d7d7; - + width: 730px; + .modal-header { border-bottom: none; + width: 760px; padding: 0; - width: auto; - + .nav-tabs { margin: 0; border-color: #c3c6c5; @@ -663,12 +679,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%; @@ -897,7 +913,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 index fbc788f7253..7fbb67edd8f 100644 --- 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(); } /** @@ -219,15 +220,18 @@ define(function (require, exports, module) { * @return {Dialog} */ function showModalDialogUsingTemplate(template, autoDismiss) { + console.log("Appended"); if (autoDismiss === undefined) { autoDismiss = true; } + $("body").append("
"); + 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 +286,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 +326,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 index 12abe06f17a..14a918c6dca 100755 --- 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 = $('
') - .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 From 21adbceca411a1db3b37bb42fada689b5f2454a1 Mon Sep 17 00:00:00 2001 From: Bernhard Sirlinger Date: Wed, 2 Oct 2013 21:14:55 +0200 Subject: [PATCH 2/2] Fix not exactly centering and remove console.log --- src/styles/brackets_patterns_override.less | 8 ++++++-- src/widgets/Dialogs.js | 1 - 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/styles/brackets_patterns_override.less b/src/styles/brackets_patterns_override.less index 2a20a015ecd..c251de2639b 100644 --- a/src/styles/brackets_patterns_override.less +++ b/src/styles/brackets_patterns_override.less @@ -418,7 +418,7 @@ /* 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: 100%; + width: 560px; } .modal-footer { @@ -588,7 +588,7 @@ a[href^="http"] { /* Extension Manager dialog */ .extension-manager-dialog { background-color: #d4d7d7; - width: 730px; + width: 760px; .modal-header { border-bottom: none; @@ -759,6 +759,10 @@ a[href^="http"] { } } } + + .modal-footer { + width: 730px; + } } /* About dialog */ diff --git a/src/widgets/Dialogs.js b/src/widgets/Dialogs.js index 7fbb67edd8f..b2209df395f 100644 --- a/src/widgets/Dialogs.js +++ b/src/widgets/Dialogs.js @@ -220,7 +220,6 @@ define(function (require, exports, module) { * @return {Dialog} */ function showModalDialogUsingTemplate(template, autoDismiss) { - console.log("Appended"); if (autoDismiss === undefined) { autoDismiss = true; }