diff --git a/src/editor/EditorManager.js b/src/editor/EditorManager.js index e7d1f38a5f7..cea08c2439b 100644 --- a/src/editor/EditorManager.js +++ b/src/editor/EditorManager.js @@ -65,9 +65,6 @@ define(function (require, exports, module) { /** @type {Document} */ var _currentEditorsDocument = null; - /** @type {number} Used by {@link #_updateEditorSize()} */ - var _resizeTimeout = null; - /** * Registered inline-editor widget providers. See {@link #registerInlineEditProvider()}. * @type {Array.} @@ -313,29 +310,54 @@ define(function (require, exports, module) { } + /** + * Calculates the available height for the full-size Editor (or the no-editor placeholder), + * accounting for the current size of all visible panels, toolbar, & status bar. + * @return {number} + */ + function _calcEditorHeight() { + var availableHt = $(".content").height(); + + _editorHolder.siblings().each(function (i, elem) { + var $elem = $(elem); + if ($elem.css("display") !== "none") { + availableHt -= $elem.outerHeight(); + } + }); + return availableHt; + } + /** - * Resize the editor. This should only be called if the contents of the editor holder are changed - * or if the height of the editor holder changes (except for overall window resizes, which are - * already taken care of automatically). - * @see #_updateEditorSize() + * Resize the editor. This must be called any time the contents of the editor area are swapped + * or any time the editor area might change height. EditorManager takes care of calling this when + * the Editor is swapped, and on window resize. But anyone who changes size/visiblity of editor + * area siblings (toolbar, status bar, bottom panels) *must* manually call resizeEditor(). + * + * @param {boolean=} skipRefresh For internal use, to avoid redundant refresh()es during window resize */ - function resizeEditor() { + function resizeEditor(skipRefresh) { + if (!_editorHolder) { + return; // still too early during init + } + + var editorAreaHt = _calcEditorHeight(); + _editorHolder.height(editorAreaHt); // affects size of "not-editor" placeholder as well + if (_currentEditor) { - $(_currentEditor.getScrollerElement()).height(_editorHolder.height()); - _currentEditor.refresh(); + $(_currentEditor.getScrollerElement()).height(editorAreaHt); + if (!skipRefresh) { + _currentEditor.refresh(); + } } } /** * NJ's editor-resizing fix. Whenever the window resizes, we immediately adjust the editor's * height. - * @see #resizeEditor() */ - function _updateEditorSize() { - // The editor itself will call refresh() when it gets the window resize event. - if (_currentEditor) { - $(_currentEditor.getScrollerElement()).height(_editorHolder.height()); - } + function _updateEditorDuringResize() { + // skipRefresh=true since CodeMirror will call refresh() itself when it sees the resize event + resizeEditor(true); } /** @@ -479,6 +501,8 @@ define(function (require, exports, module) { } _editorHolder = holder; + + resizeEditor(); // if no files open at startup, we won't get called back later to resize the "no-editor" placeholder } /** @@ -719,7 +743,7 @@ define(function (require, exports, module) { // Add this as a capture handler so we're guaranteed to run it before the editor does its own // refresh on resize. - window.addEventListener("resize", _updateEditorSize, true); + window.addEventListener("resize", _updateEditorDuringResize, true); // Initialize: status bar focused listener $(exports).on("focusedEditorChange", _onFocusedEditorChange); diff --git a/src/htmlContent/main-view.html b/src/htmlContent/main-view.html index 52e63313f37..57e5f730788 100644 --- a/src/htmlContent/main-view.html +++ b/src/htmlContent/main-view.html @@ -62,7 +62,14 @@ - +
diff --git a/src/project/SidebarView.js b/src/project/SidebarView.js index 9ae9b74c4c0..f1774dda4fa 100644 --- a/src/project/SidebarView.js +++ b/src/project/SidebarView.js @@ -90,14 +90,22 @@ define(function (require, exports, module) { if (isSidebarClosed) { $sidebarResizer.css("left", 0); + + // Adjust content area left/width - see below + $(".content", $sidebar.parent()).css("margin-left", 0); + } else { $sidebar.width(width); $sidebarResizer.css("left", width - 1); - // the following three lines help resize things when the sidebar shows - // but ultimately these should go into ProjectManager.js with a "notify" - // event that we can just call from anywhere instead of hard-coding it. - // waiting on a ProjectManager refactor to add that. + // This maintains the content area's position to the right of the sidebar. (A simple float is not enough + // because the non-floated content technically underlaps the floated sidebar; this breaks CodeMirror + // listeners and relative positioning). + // TODO: Ultimately this should go into EditorManager.js, triggered via an event we dispatch + $(".content", $sidebar.parent()).css("margin-left", width); + + // This helps resize things within the sidebar when it's shown. + // TODO: Ultimately this should go into ProjectManager.js, triggered via an event we dispatch $sidebar.find(".sidebar-selection").width(width); if (width > 10) { @@ -146,6 +154,7 @@ define(function (require, exports, module) { $sidebarResizer.css("left", sidebarWidth - 1); + // Initially size sidebar at app startup if (prefs.getValue("sidebarClosed")) { toggleSidebar(sidebarWidth); } else { @@ -169,7 +178,7 @@ define(function (require, exports, module) { isMouseDown = true; - // take away the shadows (for performance reasons during sidebarmovement) + // take away the shadows (for performance reasons during sidebar movement) $sidebar.find(".scroller-shadow").css("display", "none"); $body.toggleClass("resizing"); diff --git a/src/styles/brackets.less b/src/styles/brackets.less index 0f2e02d57be..270651e92fa 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -60,7 +60,7 @@ html, body { } body { - .vbox; + height: 100%; &.resizing a, &.resizing #projects a, &.resizing .main-view, &.resizing .CodeMirror-lines { cursor: col-resize; @@ -88,17 +88,17 @@ a, img { } .main-view { - .hbox; - .box-flex(1); + height: 100%; .sidebar { + height: 100%; .vbox; width: @sidebar-width; + float: left; } .content { - .vbox; - .box-flex(1); + height: 100%; } } @@ -222,13 +222,11 @@ a, img { } #editor-holder { - .vbox; - .box-flex(1); position: relative; /* Placeholder shown when there is no editor open */ #not-editor { - .box-flex(1); + height: 100%; .vbox; .box-pack(center); .box-align(center);