Merge pull request ipython#4567 from ellisonbg/indent-cell

Adding prompt area to non-CodeCells to indent content.

prompts now appear in the margin of the document.

IPython/html/static/notebook/js/codecell.js

@@ -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;

IPython/html/static/notebook/js/textcell.js

@@ -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;
     };
 

IPython/html/static/notebook/less/cell.less

@@ -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();
+}

IPython/html/static/notebook/less/textcell.less

@@ -1,5 +1,6 @@
 div.text_cell {
     padding: 5px 5px 5px 5px;
+    .hbox();
 }
 
 div.text_cell_input {
@@ -30,3 +31,4 @@ h1,h2,h3,h4,h5,h6 {
         visibility: visible;
     }
 }
+

IPython/html/static/style/ipython.min.css

@@ -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,7 +140,7 @@ 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;}