Merge pull request #3238 from ellisonbg/tabstyle

Improve the design of the tab completion UI
This commit is contained in:
Brian E. Granger 2013-04-30 20:06:01 -07:00
commit 56e4759813
2 changed files with 15 additions and 30 deletions

View File

@ -194,12 +194,12 @@ var IPython = (function (IPython) {
this.complete.attr('id', 'complete');
this.sel = $('<select style="width: auto"/>').attr('multiple', 'true').attr('size', Math.min(10, this.raw_result.length));
var pos = this.editor.cursorCoords();
// TODO: I propose to remove enough horizontal pixel
// to align the text later
this.complete.css('left', pos.left + 'px');
this.complete.css('top', pos.bottom + 'px');
//var pos = this.editor.cursorCoords();
var cur = this.editor.getCursor();
cur.ch = cur.ch-matched_text.length;
var pos = this.editor.cursorCoords(cur);
this.complete.css('left', pos.left-3 + 'px');
this.complete.css('top', pos.bottom+1 + 'px');
this.complete.append(this.sel);
$('body').append(this.complete);

View File

@ -42,9 +42,7 @@ span#notebook_name {
}
.ui-menu {
-moz-box-shadow: 0px 6px 10px -1px #adadad;
-webkit-box-shadow: 0px 6px 10px -1px #adadad;
box-shadow: 0px 6px 10px -1px #adadad;
.box-shadow(0px 6px 10px -1px #adadad);
}
.ui-menu .ui-menu-item a {
@ -243,7 +241,7 @@ div.output_scroll {
overflow: auto;
.corner-all;
box-shadow: inset 0 2px 8px rgba(0, 0, 0, .8);
.box-shadow(inset 0 2px 8px rgba(0, 0, 0, .8));
}
/* output div while it is collapsed */
@ -260,7 +258,7 @@ div.out_prompt_overlay {
div.out_prompt_overlay:hover {
/* use inner shadow to get border that is computed the same on WebKit/FF */
box-shadow: inset 0 0 1px #000;
.box-shadow(inset 0 0 1px #000);
background: rgba(240, 240, 240, 0.5);
}
@ -408,6 +406,8 @@ div.text_cell_render {
z-index: 10;
overflow: hidden;
border: 1px solid @border_color;
.corner-all;
.box-shadow(0px 6px 10px -1px #adadad);
}
.completions select {
@ -418,27 +418,12 @@ div.text_cell_render {
margin: 0px;
overflow: auto;
font-family: monospace;
font-size: 110%;
color: @fontBaseColor;
}
option.context {
background-color: #DEF7FF;
}
option.introspection {
background-color: #EBF4EB;
}
/*fixed part of the completion*/
.completions p b {
font-weight:bold;
}
.completions p {
background: #DDF;
/*outline: none;
padding: 0px;*/
border-bottom: black solid 1px;
padding: 1px;
font-family: monospace;
.completions select option.context {
color: @blueDark;
}
pre.dialog {