Repository: couchdb-fauxton Updated Branches: refs/heads/master ec16a8076 -> 5cc193875
Full page doc editor fixes It was noticed that with larger documents we needed the horizontal scrollbar to appear, since some users don't have right-left scrolling mice/trackpads and relying exclusively on the keyboard wasn't sufficient. This adds the horizontal scrollbar only when needed, and at the very bottom of the screen, regardless of the height of the editor, to make it look ok. Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/5cc19387 Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/5cc19387 Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/5cc19387 Branch: refs/heads/master Commit: 5cc19387555c5eb645e0accddafc05b7cabdbdea Parents: ec16a80 Author: Ben Keen <[email protected]> Authored: Wed Jan 21 15:13:12 2015 -0800 Committer: Ben Keen <[email protected]> Committed: Thu Jan 22 09:32:43 2015 -0800 ---------------------------------------------------------------------- app/addons/documents/templates/code_editor.html | 2 +- app/addons/documents/views-doceditor.js | 2 +- app/addons/fauxton/actions.js | 3 ++ app/addons/fauxton/components.js | 33 ++++++++++++++------ assets/less/codeeditor.less | 22 ++++++++++--- 5 files changed, 47 insertions(+), 15 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5cc19387/app/addons/documents/templates/code_editor.html ---------------------------------------------------------------------- diff --git a/app/addons/documents/templates/code_editor.html b/app/addons/documents/templates/code_editor.html index 4933847..c5fa517 100644 --- a/app/addons/documents/templates/code_editor.html +++ b/app/addons/documents/templates/code_editor.html @@ -65,7 +65,7 @@ the License. </div> </div> -<div class="scrollable"> +<div class="code-region"> <div class="bgEditorGutter"></div> <div id="editor-container" class="doc-code"><%- JSON.stringify(doc.attributes, null, " ") %></div> </div> http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5cc19387/app/addons/documents/views-doceditor.js ---------------------------------------------------------------------- diff --git a/app/addons/documents/views-doceditor.js b/app/addons/documents/views-doceditor.js index 2a0e969..186375e 100644 --- a/app/addons/documents/views-doceditor.js +++ b/app/addons/documents/views-doceditor.js @@ -207,7 +207,7 @@ function (app, FauxtonAPI, Components, Documents, Databases, prettify) { 'click button.upload': 'upload', 'click button.string-edit': 'stringEditing', 'click a.js-back': 'onClickGoBack', - 'click .scrollable': 'focusOnLastLine' + 'click .code-region': 'focusOnLastLine' }, disableLoader: true, http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5cc19387/app/addons/fauxton/actions.js ---------------------------------------------------------------------- diff --git a/app/addons/fauxton/actions.js b/app/addons/fauxton/actions.js index 74eaeef..cfaa722 100644 --- a/app/addons/fauxton/actions.js +++ b/app/addons/fauxton/actions.js @@ -22,6 +22,9 @@ function (app, FauxtonAPI, ActionTypes) { FauxtonAPI.dispatch({ type: ActionTypes.TOGGLE_NAVBAR_MENU }); + + // TODO temporary patch for COUCHDB-2555 + FauxtonAPI.Events.trigger(FauxtonAPI.constants.EVENTS.BURGER_CLICKED); }, addHeaderLink: function (link) { http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5cc19387/app/addons/fauxton/components.js ---------------------------------------------------------------------- diff --git a/app/addons/fauxton/components.js b/app/addons/fauxton/components.js index fa537c1..13d5a72 100644 --- a/app/addons/fauxton/components.js +++ b/app/addons/fauxton/components.js @@ -777,11 +777,22 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) { this.couchJSHINT = options.couchJSHINT; this.edited = false; + var that = this; + this.onPageResize = _.debounce(function () { + that.setAvailableEditorHeight(); + that.setHeightToLineCount(); + that.editor.resize(true); + }, 300); + + $(window).on('resize.editor', this.onPageResize); + this.listenTo(FauxtonAPI.Events, FauxtonAPI.constants.EVENTS.NAVBAR_SIZE_CHANGED, this.onPageResize); + _.bindAll(this); }, afterRender: function () { this.editor = ace.edit(this.editorId); + this.setAvailableEditorHeight(); this.setHeightToLineCount(); this.editor.setTheme("ace/theme/" + this.theme); @@ -814,28 +825,32 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) { return 'Your changes have not been saved. Click cancel to return to the document.'; } }); - - var resizeEditor = _.debounce(function () { - that.editor.resize(true); - }, 500); - - $(window).resize(resizeEditor); - this.listenTo(FauxtonAPI.Events, FauxtonAPI.constants.EVENTS.NAVBAR_SIZE_CHANGED, resizeEditor); }, cleanup: function () { $(window).off('beforeunload.editor_'+this.editorId); + $(window).off('resize.editor', this.onPageResize); FauxtonAPI.removeBeforeUnload("editor_"+this.editorId); this.editor.destroy(); + this.stopListening(FauxtonAPI.Events, FauxtonAPI.constants.EVENTS.NAVBAR_SIZE_CHANGED); + }, + + // we need to track the possible available height of the editor to tell it how large it can grow vertically + setAvailableEditorHeight: function () { + this.availableEditorHeight = $('.code-region').height(); }, setHeightToLineCount: function () { var lines = this.editor.getSession().getDocument().getLength(); + var maxLines = this.getMaxAvailableLinesOnPage(); this.editor.setOptions({ - maxLines: lines + maxLines: lines < maxLines ? lines : maxLines }); + }, - this.editor.resize(); + getMaxAvailableLinesOnPage: function () { + var singleLine = this.getRowHeight(); + return Math.floor(this.availableEditorHeight / singleLine); }, getLines: function(){ http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5cc19387/assets/less/codeeditor.less ---------------------------------------------------------------------- diff --git a/assets/less/codeeditor.less b/assets/less/codeeditor.less index c4a2670..7c6ad35 100644 --- a/assets/less/codeeditor.less +++ b/assets/less/codeeditor.less @@ -102,9 +102,6 @@ .ace_gutter-cell { min-width: 49px; } - .ace_scrollbar-h { - overflow: hidden !important; - } .ace_marker-layer .ace_bracket { margin: 0px; @@ -125,7 +122,24 @@ } } - #dashboard-content .scrollable { + #dashboard-content .code-region { + overflow-y: hidden; + position: absolute; top: 125px; + height: auto; + width: 100%; + padding: 0; + left: 0; + right: 0; + bottom: 0; } } + +.ace_scrollbar-h { + right: 0px !important; + height: 15px !important; +} + +#editor-container { + height: 100% !important; +}
