mirror/notebook
2
0
Fork 0
mirror of https://github.com/jupyter/notebook.git synced 2025-03-31 13:40:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fixing various output related things:

Browse Source 
This was inspired by PR #4105.

* JavaScript output no longer requires calling container.show()
* Added output_javascript CSS class that has zero height when
  empty.
* JavaScript error messages are properly indented with the prompt
  area.
This commit is contained in:
Brian E. Granger 2013-12-04 14:27:48 -08:00
parent fd74cc7eee
commit 32bd409fc1
5 changed files with 30 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
IPython/html/static/notebook/js/outputarea.js
View File

@ -371,18 +371,16 @@ var IPython = (function (IPython) {
}
OutputArea.prototype._append_javascript_error = function (err, container) {
OutputArea.prototype._append_javascript_error = function (err, element) {
// display a message when a javascript error occurs in display output
var msg = "Javascript error adding output!"
console.log(msg, err);
if ( container === undefined ) return;
container.append(
if ( element === undefined ) return;
element.append(
$('<div/>').html(msg + "<br/>" +
err.toString() +
'<br/>See your browser Javascript console for more details.'
).addClass('js-error')
);
container.show();
};
OutputArea.prototype._safe_append = function (toinsert) {
@ -394,7 +392,13 @@ var IPython = (function (IPython) {
this.element.append(toinsert);
} catch(err) {
console.log(err);
this._append_javascript_error(err, this.element);
// Create an actual output_area and output_subarea, which creates
// the prompt area and the proper indentation.
var toinsert = this.create_output_area();
var subarea = $('<div/>').addClass('output_subarea');
toinsert.append(subarea);
this._append_javascript_error(err, subarea);
this.element.append(toinsert);
}
};
@ -512,16 +516,13 @@ var IPython = (function (IPython) {
OutputArea.prototype.append_javascript = function (js, md, container) {
// We just eval the JS code, element appears in the local scope.
var element = this.create_output_subarea(md, "");
var element = this.create_output_subarea(md, "output_javascript");
container.append(element);
// Div for js shouldn't be drawn, as it will add empty height to the area.
container.hide();
// If the Javascript appends content to `element` that should be drawn, then
// it must also call `container.show()`.
try {
eval(js);
} catch(err) {
this._append_javascript_error(err, container);
console.log(err);
this._append_javascript_error(err, element);
}
};

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

@ -29,3 +29,11 @@ div.inner_cell {
.vbox();
.box-flex1();
}
/* This is needed so that empty prompt areas can collapse to zero height when there
is no content in the output_subarea and the prompt. The main purpose of this is
to make sure that empty JavaScript output_subareas have no height. */
div.prompt:empty {
padding-top: 0;
padding-bottom: 0;
}

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

@ -127,6 +127,11 @@ div.output_png {
div.output_jpeg {
}
/* Empty output_javascript divs should have no height */
div.output_javascript:empty {
padding: 0;
}
.js-error {
color: darkred;
}

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

@ -57,6 +57,7 @@ input.engine_num_input{height:20px;margin-bottom:2px;padding-top:0;padding-botto
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:0px;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.prompt:empty{padding-top:0;padding-bottom:0;}
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;}
@ -102,6 +103,7 @@ div.output_subarea{padding:0.4em 0.4em 0em 0.4em;-webkit-box-flex:1;-moz-box-fle
div.output_text{text-align:left;color:#000000;font-family:monospace;line-height:1.231em;}
div.output_stderr{background:#fdd;}
div.output_latex{text-align:left;}
div.output_javascript:empty{padding:0;}
.js-error{color:darkred;}
div.raw_input{padding-top:0px;padding-bottom:0px;height:1em;line-height:1em;font-family:monospace;}
span.input_prompt{font-family:inherit;}

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

@ -1438,6 +1438,7 @@ input.engine_num_input{height:20px;margin-bottom:2px;padding-top:0;padding-botto
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:0px;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.prompt:empty{padding-top:0;padding-bottom:0;}
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;}
@ -1483,6 +1484,7 @@ div.output_subarea{padding:0.4em 0.4em 0em 0.4em;-webkit-box-flex:1;-moz-box-fle
div.output_text{text-align:left;color:#000000;font-family:monospace;line-height:1.231em;}
div.output_stderr{background:#fdd;}
div.output_latex{text-align:left;}
div.output_javascript:empty{padding:0;}
.js-error{color:darkred;}
div.raw_input{padding-top:0px;padding-bottom:0px;height:1em;line-height:1em;font-family:monospace;}
span.input_prompt{font-family:inherit;}