more ui tweaking.

This commit is contained in:
Boaz Leskes 2013-12-17 13:30:08 +01:00
parent 7354035798
commit 57ffdaaf7c
6 changed files with 58 additions and 31 deletions

View file

@ -20,8 +20,10 @@ body {
position: absolute;
top: 47px;
right: 100%;
line-height: 1;
margin-right: -468px;
z-index: 100;
margin-top: 6px; /* compensate for being outside editor */
}
#editor_actions > .btn-group > a {
@ -36,7 +38,7 @@ body {
.editor_position {
position: absolute;
top: 50px;
bottom: 0;
bottom: 5px;
left: 5px;
width: 468px;
}
@ -50,12 +52,24 @@ body {
#output {
position: absolute;
top: 50px;
bottom: 0;
bottom: 5px;
left: 488px;
right: 5px;
min-width: 700px;
}
#output, #editor {
padding-top: 5px;
}
.ace_gutter {
margin-top: 6px;
}
.ace_scroller {
padding-top: 5px;
}
#autocomplete {
visibility: hidden;
position: absolute;
@ -184,6 +198,10 @@ body {
margin-left: -1000px;
}
.ace_layer.ace_marker-layer {
overflow: visible;
}
.ace_snippet-marker {
position: absolute;
width: 100% !important;

View file

@ -2,6 +2,7 @@
#editor, #output {
outline: 1px solid #101214;
border-top: 1px solid #3e444c;
background-color: #2e3236;
}
.ace_url {
@ -22,15 +23,14 @@
.ace_snippet-marker {
background: rgba(194, 193, 208, 0.05);
/*border: 1px dotted rgba(211, 208, 235, 0.62); */
}
.ace_snippet-marker.ace_start {
border-top: dotted 1px rgba(194, 193, 208, 0.30);
border-bottom: dotted 1px rgba(194, 193, 208, 0.30);
margin-top: -1px; /* compensate for background */
}
.ace_snippet-marker.ace_start + .ace_snippet-marker {
border-bottom: dotted 1px rgba(194, 193, 208, 0.30);
.ace_scroller {
border-top: 1px solid #101214;
border-left: 1px solid #101214;
}
#editor .ace_active-line {
@ -53,11 +53,15 @@
.ui-menu {
background-color: #3a3f44;
border: 1px solid rgba(0,0,0,0.2);
color: #7a8288;
color: #bbbfc2;
}
.ui-menu .ui-menu-item {
color: #7a8288;
color: #bbbfc2;
}
.ui-menu .ui-menu-item a {
color: #bbbfc2;
}
.ui-menu .ui-state-focus {

View file

@ -20,21 +20,24 @@ body {
color: rgb(3, 106, 7);
}
.ace-tm .ace_gutter {
background: transparent;
}
.ace_scroller {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.ace_method {
color: rgb(197, 6, 11);
}
.ace_snippet-marker {
background: rgba(194, 193, 208, 0.20);
/*border: 1px dotted rgba(211, 208, 235, 0.62); */
}
.ace_snippet-marker.ace_start {
border-top: dotted 1px rgba(194, 193, 208, 0.80);
}
.ace_snippet-marker.ace_start + .ace_snippet-marker {
border-bottom: dotted 1px rgba(194, 193, 208, 0.80);
margin-top: -1px; /* compensate for background */
}
#request_wrench i {

View file

@ -19,7 +19,7 @@
</form>
<span class="pull-left btn btn-link">
<span id="notification" style="visibility: hidden"
class="label label-info"></span></span>
class="label label-info"></span></span>
<ul class="nav pull-right">
<li id="history_btn" data-toggle="modal" data-target="#history_popup">
<a title="History" href="#" data-placement="bottom"><i class="fa fa-clock-o"></i></a>
@ -43,15 +43,13 @@
</div>
<div id="output">{}</div>
<div id="editor_actions">
<ul>
<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>
<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>
@ -137,6 +135,7 @@
</div>
<div class="control-group">
<label class="control-label" for="font_size">Font Size</label>
<div class="controls">
<input type="number" id="font_size">
</div>
@ -150,6 +149,7 @@
</div>
<div class="control-group">
<label class="control-label" for="font_size">Theme</label>
<div class="controls">
<select id="theme">
<option value="dark">Dark</option>

View file

@ -34,14 +34,16 @@ exports.isDark = true;
exports.cssClass = "ace-sense-dark";
exports.cssText = ".ace-sense-dark .ace_gutter {\
background: #2e3236;\
color: #grey\
color: #bbbfc2;\
}\
.ace-sense-dark .ace_print-margin {\
width: 1px;\
background: #555651\
}\
.ace-sense-dark .ace_scroller {\
background-color: #202328\
background-color: #202328;\
}\
.ace-sense-dark .ace_content {\
}\
.ace-sense-dark .ace_text-layer {\
color: #F8F8F2\

View file

@ -252,7 +252,7 @@ function updateEditorActionsBar() {
if (row > 0) row--; else row++;
}
var screen_pos = sense.editor.renderer.textToScreenCoordinates(row, column);
offset += screen_pos.pageY - 3;
offset += screen_pos.pageY;
var end_offset = sense.editor.renderer.textToScreenCoordinates(CURRENT_REQ_RANGE.end.row,
CURRENT_REQ_RANGE.end.column).pageY;
@ -295,7 +295,7 @@ function highlighCurrentRequestAndUpdateActionBar() {
CURRENT_REQ_RANGE = new_current_req_range;
if (CURRENT_REQ_RANGE) {
CURRENT_REQ_RANGE.marker_id = session.addMarker(CURRENT_REQ_RANGE, "ace_snippet-marker", "text");
CURRENT_REQ_RANGE.marker_id = session.addMarker(CURRENT_REQ_RANGE, "ace_snippet-marker", "fullLine");
}
updateEditorActionsBar();
}