From 7a12d815d0cbdb5b9fc0091112a87e2c153cfbea Mon Sep 17 00:00:00 2001 From: Spencer Alger Date: Thu, 23 Jan 2014 01:52:47 -0700 Subject: [PATCH] adjusted the way the editor resizes - removed the "min-width" of the output, so that if the window is small it will adapt and allow the user to scroll the output (when wrap is disabled) - adjusted the styles of the resizer - revamped the positioning of the editor actions a bit while working out z-index issues - the top of the editors will always below the header closes #54 closes #51 --- sense/app/app.js | 55 +++++++++++++++--------- sense/app/misc_inputs.js | 34 +++++++++++++-- sense/app/sense_editor/editor.js | 72 +++++++++++++++++++------------- sense/css/sense.css | 52 +++++++++++------------ sense/index.html | 21 +++++----- 5 files changed, 144 insertions(+), 90 deletions(-) diff --git a/sense/app/app.js b/sense/app/app.js index 78e9a5e38933e..158760f029df3 100644 --- a/sense/app/app.js +++ b/sense/app/app.js @@ -162,25 +162,43 @@ define([ input.focus(); }; - /** - * Make the editor resizeable - */ - input.$el.resizable({ - autoHide: false, - handles: 'e', - start: function (e, ui) { - $(".ui-resizable-e").addClass("active"); - }, - stop: function (e, ui) { - $(".ui-resizable-e").removeClass("active"); - var parent = ui.element.parent(); - var editorSize = ui.element.outerWidth(); - output.$el.css("left", editorSize + 20); - input.$actions.css("margin-right", -editorSize + 3); - input.resize(true); - output.resize(true); + (function stuffThatsTooHardWithCSS() { + var $editors = input.$el.parent().add(output.$el.parent()); + var $resizer = miscInputs.$resizer; + var $header = miscInputs.$header; + + var delay; + var headerHeight; + var resizerHeight; + + $resizer + .html('︙') // vertical elipses + .css('vertical-align', 'middle'); + + function update() { + var newHeight; + + delay = clearTimeout(delay); + + newHeight = $header.outerHeight(); + if (headerHeight != newHeight) { + headerHeight = newHeight; + $editors.css('top', newHeight + 10); + } + + newHeight = $resizer.height(); + if (resizerHeight != newHeight) { + resizerHeight = newHeight; + $resizer.css('line-height', newHeight + 'px'); + } } - }); + + $(window).resize(function () { + if (!delay) delay = setTimeout(update, 25); + }); + + update(); + }()); /** * Setup the "send" shortcut @@ -206,7 +224,6 @@ define([ /* * initialize navigation menu */ - $.get('../common/marvelLinks.json', function (marvelLinks) { var linkMenu = $("#nav_btn ul"); _.map(marvelLinks.links, function (link) { diff --git a/sense/app/misc_inputs.js b/sense/app/misc_inputs.js index 961646e588700..35f2505ef78ad 100644 --- a/sense/app/misc_inputs.js +++ b/sense/app/misc_inputs.js @@ -3,10 +3,11 @@ define([ 'history', 'input', 'mappings', - + 'output', + 'bootstrap', 'jquery-ui' -], function ($, history, input, mappings) { +], function ($, history, input, mappings, output) { 'use strict'; var $esServer = $("#es_server"); @@ -32,9 +33,36 @@ define([ e.preventDefault(); }); + var $header = $('.navbar.navbar-static-top'); + + // containers for the two editors + var $left = input.$el.parent(); + var $right = output.$el.parent(); + + $left.resizable({ + autoHide: false, + handles: 'e', + start: function () { + $resizer.addClass('active'); + }, + resize: function () { + $right.css('left', $left.outerWidth() + 20); + }, + stop: function () { + $resizer.removeClass('active'); + $left.css('height', 'auto'); // $.resizeable sets the height which prevents it from reshaping later + input.resize(true); + output.resize(true); + } + }); + + var $resizer = input.$el.siblings('.ui-resizable-e'); + return { $esServer: $esServer, $send: $send, - $autoIndent: $autoIndent + $autoIndent: $autoIndent, + $header: $header, + $resizer: $resizer }; }) \ No newline at end of file diff --git a/sense/app/sense_editor/editor.js b/sense/app/sense_editor/editor.js index 3169ab9771f0c..4cfaefcfc8ed4 100644 --- a/sense/app/sense_editor/editor.js +++ b/sense/app/sense_editor/editor.js @@ -354,39 +354,51 @@ define([ editor.highlightCurrentRequestAndUpdateActionBar(); }); - editor.updateActionsBar = function () { - var editor_actions = $("#editor_actions"); - - if (CURRENT_REQ_RANGE) { - var row = CURRENT_REQ_RANGE.start.row; - var column = CURRENT_REQ_RANGE.start.column; - var session = editor.session; - var firstLine = session.getLine(row); - var offset = 0; - if (firstLine.length > session.getScreenWidth() - 5) { - // overlap first row - if (row > 0) row--; else row++; + editor.updateActionsBar = (function () { + var set = function (top) { + if (top == null) { + editor.$actions.css('visibility', 'hidden'); + } else { + editor.$actions.css({ + top: top, + visibility: 'visible' + }); } - var screen_pos = editor.renderer.textToScreenCoordinates(row, column); - offset += screen_pos.pageY; - var end_offset = editor.renderer.textToScreenCoordinates(CURRENT_REQ_RANGE.end.row, - CURRENT_REQ_RANGE.end.column).pageY; - - offset = Math.min(end_offset, Math.max(offset, 47)); - if (offset >= 47) { - editor_actions.css("top", Math.max(offset, 47)); - editor_actions.css('visibility', 'visible'); - } - else { - editor_actions.css("top", 0); - editor_actions.css('visibility', 'hidden'); + }; + + var hide = function () { + set(); + }; + + return function () { + if (CURRENT_REQ_RANGE) { + // elements are positioned relative to the editor's container + // pageY is relative to page, so subtract the offset + // from pageY to get the new top value + var offsetFromPage = editor.$el.offset().top; + + var topOfReq = editor.renderer.textToScreenCoordinates( + CURRENT_REQ_RANGE.start.row, + CURRENT_REQ_RANGE.start.column + ).pageY - offsetFromPage; + + if (topOfReq >= 0) { + return set(topOfReq); + } + + var bottomOfReq = editor.renderer.textToScreenCoordinates( + CURRENT_REQ_RANGE.end.row, + CURRENT_REQ_RANGE.end.column + ).pageY - offsetFromPage; + + if (bottomOfReq >= 0) { + return set(0); + } } + + hide(); } - else { - editor_actions.css("top", 0); - editor_actions.css('visibility', 'hidden'); - } - }; + }()); editor.getSession().on("changeScrollTop", editor.updateActionsBar); diff --git a/sense/css/sense.css b/sense/css/sense.css index 9c958caecbe72..69cb498b3b676 100644 --- a/sense/css/sense.css +++ b/sense/css/sense.css @@ -20,13 +20,28 @@ body.fouc { width: 100px; } +#editor_container { + position: absolute; + top: 50px; + bottom: 5px; + left: 5px; + width: 468px; +} + +#output_container { + position: absolute; + top: 50px; + bottom: 5px; + left: 488px; + right: 5px; +} + #editor_actions { position: absolute; - top: 47px; - right: 100%; + top: 0; + right: 0; line-height: 1; - margin-right: -468px; - z-index: 100; + padding: 1px 3px 0 0; } #editor_actions > .btn-group > a { @@ -44,25 +59,9 @@ body.fouc { z-index: 100; } -#editor_container { - position: absolute; - top: 50px; - bottom: 5px; - left: 5px; - width: 468px; -} - -#output_container { - position: absolute; - top: 50px; - bottom: 5px; - left: 488px; - right: 5px; - min-width: 700px; -} - #output, #editor { height: 100%; + width: 100%; } .ace_gutter { @@ -217,17 +216,16 @@ body.fouc { .ui-resizable-e { cursor: ew-resize; - width: 10px; - right: -5px; - top: 0; - bottom: 0; + width: 13px; + right: -14px; + top: -1px; + bottom: -2px; background-color: transparent; position: absolute; - z-index: 50 !important; } .ui-resizable-e:hover { - background-color: rgba(194, 193, 208, 0.80); + background-color: #DCDCDC; } .ui-resizable-e.active { diff --git a/sense/index.html b/sense/index.html index 512f4d51f2e80..7f4dbd8ba36c5 100644 --- a/sense/index.html +++ b/sense/index.html @@ -46,22 +46,21 @@
GET _search { "query": { "match_all": {} } -} +}
+
+ + +
{}
-
- - - -