mirror/notebook
2
0
Fork 0
mirror of https://github.com/jupyter/notebook.git synced 2025-01-30 12:11:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

Adding prompt area to non-CodeCells to indent content.

Browse Source 
This is a reponse to the problem of having really long lines in
Markdown cells, which makes the content difficult to read. Users
want wide code cells, so we don't want to narrow everything. The
solution here is to give a prompt area to the heading/md cells
to narrow their content area slightly. The only problem is that
this makes it more difficult to distinguish between output
and md content that follows that output. The solve this, we are
adding a narrow line between output and following md.
This commit is contained in:
Brian E. Granger 2013-11-20 14:46:28 -08:00
parent ae9951d033
commit 79a12cf907
6 changed files with 30 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
IPython/html/static/notebook/js/codecell.js
View File

@ -122,17 +122,16 @@ var IPython = (function (IPython) {
var cell = $('<div></div>').addClass('cell border-box-sizing code_cell');
cell.attr('tabindex','2');
this.celltoolbar = new IPython.CellToolbar(this);
var input = $('<div></div>').addClass('input');
var vbox = $('<div/>').addClass('vbox box-flex1');
input.append($('<div/>').addClass('prompt input_prompt'));
vbox.append(this.celltoolbar.element);
var prompt = $('<div/>').addClass('prompt input_prompt');
var inner_cell = $('<div/>').addClass('inner_cell');
this.celltoolbar = new IPython.CellToolbar(this);
inner_cell.append(this.celltoolbar.element);
var input_area = $('<div/>').addClass('input_area');
this.code_mirror = CodeMirror(input_area.get(0), this.cm_config);
$(this.code_mirror.getInputField()).attr("spellcheck", "false");
vbox.append(input_area);
input.append(vbox);
inner_cell.append(input_area);
input.append(prompt).append(inner_cell);
var output = $('<div></div>');
cell.append(input).append(output);
this.element = cell;

11
IPython/html/static/notebook/js/textcell.js
View File

@ -72,19 +72,22 @@ var IPython = (function (IPython) {
*/
TextCell.prototype.create_element = function () {
IPython.Cell.prototype.create_element.apply(this, arguments);
var cell = $("<div>").addClass('cell text_cell border-box-sizing');
cell.attr('tabindex','2');
var prompt = $('<div/>').addClass('prompt input_prompt');
cell.append(prompt);
var inner_cell = $('<div/>').addClass('inner_cell');
this.celltoolbar = new IPython.CellToolbar(this);
cell.append(this.celltoolbar.element);
inner_cell.append(this.celltoolbar.element);
var input_area = $('<div/>').addClass('text_cell_input border-box-sizing');
this.code_mirror = CodeMirror(input_area.get(0), this.cm_config);
// The tabindex=-1 makes this div focusable.
var render_area = $('<div/>').addClass('text_cell_render border-box-sizing').
addClass('rendered_html').attr('tabindex','-1');
cell.append(input_area).append(render_area);
inner_cell.append(input_area).append(render_area);
cell.append(inner_cell);
this.element = cell;
};

5
IPython/html/static/notebook/less/cell.less
View File

@ -24,3 +24,8 @@ div.prompt {
/* This has to match that of the the CodeMirror class line-height below */
line-height: @code_line_height;
}
div.inner_cell {
.vbox();
.box-flex1();
}

6
IPython/html/static/notebook/less/textcell.less
View File

@ -1,5 +1,6 @@
div.text_cell {
padding: 5px 5px 5px 5px;
.hbox();
}
div.text_cell_input {
@ -30,3 +31,8 @@ h1,h2,h3,h4,h5,h6 {
visibility: visible;
}
}
.code_cell + .text_cell .inner_cell {
border-top: 1px solid @border_color;
}

4
IPython/html/static/style/ipython.min.css vendored
View File

@ -56,6 +56,7 @@ input.engine_num_input{height:20px;margin-bottom:2px;padding-top:0;padding-botto
.ansibggray{background-color:gray;}
div.cell{border:1px solid transparent;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;padding:5px 5px 5px 0px;margin:2px 0px 2px 7px;outline:none;}div.cell.selected{border-radius:4px;border:thin #ababab solid;}
div.prompt{min-width:11ex;padding:0.4em;margin:0px;font-family:monospace;text-align:right;line-height:1.231em;}
div.inner_cell{display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}
div.input{page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;}
div.input_area{border:1px solid #cfcfcf;border-radius:4px;background:#f7f7f7;}
div.input_prompt{color:navy;border-top:1px solid transparent;}
@ -139,8 +140,9 @@ p.p-space{margin-bottom:10px;}
.rendered_html *+p{margin-top:1em;}
.rendered_html *+table{margin-top:1em;}
.rendered_html *+img{margin-top:1em;}
div.text_cell{padding:5px 5px 5px 5px;}
div.text_cell{padding:5px 5px 5px 5px;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;}
div.text_cell_input{color:#000000;border:1px solid #cfcfcf;border-radius:4px;background:#f7f7f7;}
div.text_cell_render{outline:none;resize:none;width:inherit;border-style:none;padding:5px;color:#000000;}
a.anchor-link:link{text-decoration:none;padding:0px 20px;visibility:hidden;}
h1:hover .anchor-link,h2:hover .anchor-link,h3:hover .anchor-link,h4:hover .anchor-link,h5:hover .anchor-link,h6:hover .anchor-link{visibility:visible;}
.code_cell+.text_cell .inner_cell{border-top:1px solid #ababab;}

4
IPython/html/static/style/style.min.css vendored
View File

@ -1437,6 +1437,7 @@ input.engine_num_input{height:20px;margin-bottom:2px;padding-top:0;padding-botto
.ansibggray{background-color:gray;}
div.cell{border:1px solid transparent;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;padding:5px 5px 5px 0px;margin:2px 0px 2px 7px;outline:none;}div.cell.selected{border-radius:4px;border:thin #ababab solid;}
div.prompt{min-width:11ex;padding:0.4em;margin:0px;font-family:monospace;text-align:right;line-height:1.231em;}
div.inner_cell{display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}
div.input{page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;}
div.input_area{border:1px solid #cfcfcf;border-radius:4px;background:#f7f7f7;}
div.input_prompt{color:navy;border-top:1px solid transparent;}
@ -1520,11 +1521,12 @@ p.p-space{margin-bottom:10px;}
.rendered_html *+p{margin-top:1em;}
.rendered_html *+table{margin-top:1em;}
.rendered_html *+img{margin-top:1em;}
div.text_cell{padding:5px 5px 5px 5px;}
div.text_cell{padding:5px 5px 5px 5px;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;}
div.text_cell_input{color:#000000;border:1px solid #cfcfcf;border-radius:4px;background:#f7f7f7;}
div.text_cell_render{outline:none;resize:none;width:inherit;border-style:none;padding:5px;color:#000000;}
a.anchor-link:link{text-decoration:none;padding:0px 20px;visibility:hidden;}
h1:hover .anchor-link,h2:hover .anchor-link,h3:hover .anchor-link,h4:hover .anchor-link,h5:hover .anchor-link,h6:hover .anchor-link{visibility:visible;}
.code_cell+.text_cell .inner_cell{border-top:1px solid #ababab;}
body{background-color:#ffffff;}
body.notebook_app{overflow:hidden;}
span#notebook_name{height:1em;line-height:1em;padding:3px;border:none;font-size:146.5%;}