make input_area css generic to cells

removes otherwise-identical text_cell_input class in text cells
This commit is contained in:
MinRK 2014-02-23 12:47:14 -08:00
parent 88460cd212
commit 15fac2c1d6
6 changed files with 13 additions and 21 deletions

View File

@ -80,7 +80,7 @@ var IPython = (function (IPython) {
var inner_cell = $('<div/>').addClass('inner_cell'); var inner_cell = $('<div/>').addClass('inner_cell');
this.celltoolbar = new IPython.CellToolbar(this); this.celltoolbar = new IPython.CellToolbar(this);
inner_cell.append(this.celltoolbar.element); inner_cell.append(this.celltoolbar.element);
var input_area = $('<div/>').addClass('text_cell_input border-box-sizing'); var input_area = $('<div/>').addClass('input_area');
this.code_mirror = new CodeMirror(input_area.get(0), this.cm_config); this.code_mirror = new CodeMirror(input_area.get(0), this.cm_config);
// The tabindex=-1 makes this div focusable. // The tabindex=-1 makes this div focusable.
var render_area = $('<div/>').addClass('text_cell_render border-box-sizing'). var render_area = $('<div/>').addClass('text_cell_render border-box-sizing').
@ -193,7 +193,7 @@ var IPython = (function (IPython) {
var text_cell = this.element; var text_cell = this.element;
var output = text_cell.find("div.text_cell_render"); var output = text_cell.find("div.text_cell_render");
output.hide(); output.hide();
text_cell.find('div.text_cell_input').show(); text_cell.find('div.input_area').show();
if (this.get_text() === this.placeholder) { if (this.get_text() === this.placeholder) {
this.set_text(''); this.set_text('');
} }
@ -361,7 +361,7 @@ var IPython = (function (IPython) {
.html() .html()
); );
} }
this.element.find('div.text_cell_input').hide(); this.element.find('div.input_area').hide();
this.element.find("div.text_cell_render").show(); this.element.find("div.text_cell_render").show();
this.typeset(); this.typeset();
} }
@ -542,7 +542,7 @@ var IPython = (function (IPython) {
// user input and should be handled before set_rendered. // user input and should be handled before set_rendered.
this.set_rendered(h); this.set_rendered(h);
this.typeset(); this.typeset();
this.element.find('div.text_cell_input').hide(); this.element.find('div.input_area').hide();
this.element.find("div.text_cell_render").show(); this.element.find("div.text_cell_render").show();
} }

View File

@ -38,6 +38,13 @@ div.inner_cell {
.box-flex1(); .box-flex1();
} }
/* input_area and input_prompt must match in top border and margin for alignment */
div.input_area {
border: 1px solid @light_border_color;
.corner-all;
background: @cell_background;
}
/* This is needed so that empty prompt areas can collapse to zero height when there /* 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 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. */ to make sure that empty JavaScript output_subareas have no height. */

View File

@ -11,12 +11,6 @@ div.input {
} }
/* input_area and input_prompt must match in top border and margin for alignment */ /* input_area and input_prompt must match in top border and margin for alignment */
div.input_area {
border: 1px solid @light_border_color;
.corner-all;
background: @cell_background;
}
div.input_prompt { div.input_prompt {
color: navy; color: navy;
border-top: 1px solid transparent; border-top: 1px solid transparent;

View File

@ -3,13 +3,6 @@ div.text_cell {
.hbox(); .hbox();
} }
div.text_cell_input {
color: @textColor;
border: 1px solid @light_border_color;
.corner-all;
background: @cell_background;
}
div.text_cell_render { div.text_cell_render {
/*font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;*/ /*font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;*/
outline: none; outline: none;

View File

@ -73,9 +73,9 @@ div.cell.edit_mode{border-radius:4px;border:thin #008000 solid}
div.cell{width:100%;padding:5px 5px 5px 0;margin:0;outline:none} div.cell{width:100%;padding:5px 5px 5px 0;margin:0;outline:none}
div.prompt{min-width:11ex;padding:.4em;margin:0;font-family:monospace;text-align:right;line-height:1.231em} div.prompt{min-width:11ex;padding:.4em;margin:0;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%;display:flex;flex-direction:column;align-items:stretch;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;flex:1} 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%;display:flex;flex-direction:column;align-items:stretch;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;flex:1}
div.input_area{border:1px solid #cfcfcf;border-radius:4px;background:#f7f7f7}
div.prompt:empty{padding-top:0;padding-bottom:0} 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;display:flex;flex-direction:row;align-items:stretch} 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;display:flex;flex-direction:row;align-items:stretch}
div.input_area{border:1px solid #cfcfcf;border-radius:4px;background:#f7f7f7}
div.input_prompt{color:#000080;border-top:1px solid transparent} div.input_prompt{color:#000080;border-top:1px solid transparent}
.CodeMirror{line-height:1.231em;height:auto;background:none;} .CodeMirror{line-height:1.231em;height:auto;background:none;}
.CodeMirror-scroll{overflow-y:hidden;overflow-x:auto} .CodeMirror-scroll{overflow-y:hidden;overflow-x:auto}
@ -166,7 +166,6 @@ p.p-space{margin-bottom:10px}
.rendered_html img{display:block;margin-left:auto;margin-right:auto} .rendered_html img{display:block;margin-left:auto;margin-right:auto}
.rendered_html *+img{margin-top:1em} .rendered_html *+img{margin-top:1em}
div.text_cell{padding:5px 5px 5px 0;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;display:flex;flex-direction:row;align-items:stretch} div.text_cell{padding:5px 5px 5px 0;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;display:flex;flex-direction:row;align-items:stretch}
div.text_cell_input{color:#000;border:1px solid #cfcfcf;border-radius:4px;background:#f7f7f7}
div.text_cell_render{outline:none;resize:none;width:inherit;border-style:none;padding:.5em .5em .5em .4em;color:#000} div.text_cell_render{outline:none;resize:none;width:inherit;border-style:none;padding:.5em .5em .5em .4em;color:#000}
a.anchor-link:link{text-decoration:none;padding:0 20px;visibility:hidden} a.anchor-link:link{text-decoration:none;padding:0 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} 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}

View File

@ -1350,9 +1350,9 @@ div.cell.edit_mode{border-radius:4px;border:thin #008000 solid}
div.cell{width:100%;padding:5px 5px 5px 0;margin:0;outline:none} div.cell{width:100%;padding:5px 5px 5px 0;margin:0;outline:none}
div.prompt{min-width:11ex;padding:.4em;margin:0;font-family:monospace;text-align:right;line-height:1.231em} div.prompt{min-width:11ex;padding:.4em;margin:0;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%;display:flex;flex-direction:column;align-items:stretch;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;flex:1} 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%;display:flex;flex-direction:column;align-items:stretch;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;flex:1}
div.input_area{border:1px solid #cfcfcf;border-radius:4px;background:#f7f7f7}
div.prompt:empty{padding-top:0;padding-bottom:0} 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;display:flex;flex-direction:row;align-items:stretch} 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;display:flex;flex-direction:row;align-items:stretch}
div.input_area{border:1px solid #cfcfcf;border-radius:4px;background:#f7f7f7}
div.input_prompt{color:#000080;border-top:1px solid transparent} div.input_prompt{color:#000080;border-top:1px solid transparent}
.CodeMirror{line-height:1.231em;height:auto;background:none;} .CodeMirror{line-height:1.231em;height:auto;background:none;}
.CodeMirror-scroll{overflow-y:hidden;overflow-x:auto} .CodeMirror-scroll{overflow-y:hidden;overflow-x:auto}
@ -1443,7 +1443,6 @@ p.p-space{margin-bottom:10px}
.rendered_html img{display:block;margin-left:auto;margin-right:auto} .rendered_html img{display:block;margin-left:auto;margin-right:auto}
.rendered_html *+img{margin-top:1em} .rendered_html *+img{margin-top:1em}
div.text_cell{padding:5px 5px 5px 0;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;display:flex;flex-direction:row;align-items:stretch} div.text_cell{padding:5px 5px 5px 0;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;display:flex;flex-direction:row;align-items:stretch}
div.text_cell_input{color:#000;border:1px solid #cfcfcf;border-radius:4px;background:#f7f7f7}
div.text_cell_render{outline:none;resize:none;width:inherit;border-style:none;padding:.5em .5em .5em .4em;color:#000} div.text_cell_render{outline:none;resize:none;width:inherit;border-style:none;padding:.5em .5em .5em .4em;color:#000}
a.anchor-link:link{text-decoration:none;padding:0 20px;visibility:hidden} a.anchor-link:link{text-decoration:none;padding:0 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} 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}