mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
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
This commit is contained in:
Spencer Alger
Boaz Leskes
parent
22e22a8423
commit
7a12d815d0
5 changed files with 143 additions and 89 deletions
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
};
|
||||
})
|
||||
|
|
@ -354,39 +354,51 @@ define([
|
|||
editor.highlightCurrentRequestAndUpdateActionBar();
|
||||
});
|
||||
|
||||
editor.updateActionsBar = function () {
|
||||
var editor_actions = $("#editor_actions");
|
||||
editor.updateActionsBar = (function () {
|
||||
var set = function (top) {
|
||||
if (top == null) {
|
||||
editor.$actions.css('visibility', 'hidden');
|
||||
} else {
|
||||
editor.$actions.css({
|
||||
top: top,
|
||||
visibility: 'visible'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
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++;
|
||||
}
|
||||
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;
|
||||
var hide = function () {
|
||||
set();
|
||||
};
|
||||
|
||||
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');
|
||||
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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -46,22 +46,21 @@
|
|||
<div id="editor">GET _search
|
||||
{
|
||||
"query": { "match_all": {} }
|
||||
}
|
||||
}</div>
|
||||
<div id="editor_actions">
|
||||
<a id="send" href="#" data-toggle="tooltip" title="click to send request"><i
|
||||
class="fa fa-play"></i></a>
|
||||
<a id="request_wrench" data-toggle="dropdown" href="#"><i
|
||||
class="fa fa-wrench"></i></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a id="copy_as_curl" tabindex="-1" href="#">Copy as cURL</a></li>
|
||||
<li><a id="auto_indent" tabindex="-1" href="#">Auto indent</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="output_container">
|
||||
<div id="output">{}</div>
|
||||
</div>
|
||||
<div id="editor_actions">
|
||||
<a id="send" href="#" data-toggle="tooltip" title="click to send request"><i
|
||||
class="fa fa-play"></i></a>
|
||||
<a id="request_wrench" data-toggle="dropdown" href="#"><i
|
||||
class="fa fa-wrench"></i></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a id="copy_as_curl" tabindex="-1" href="#">Copy as cURL</a></li>
|
||||
<li><a id="auto_indent" tabindex="-1" href="#">Auto indent</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul id="autocomplete" style="left: -1000px;"></ul>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue