Permalink
Browse files

Controls in cell section have a solid layout.

  • Loading branch information...
ellisonbg committed Jul 20, 2011
1 parent a7ef503 commit 71e81687700579eb94a86840e4c22aa640e1d20c
@@ -123,14 +123,42 @@ div.section_content {
padding: 5px;
}
+#expand_cell, #collapse_cell, #insert_cell_above, #insert_cell_below,
+#move_cell_up, #move_cell_down, #to_code, #to_text, #run_selected_cell,
+#run_all_cells {
+ width: 65px;
+}
+
+.cell_section_row {
+ margin: 5px 0px;
+}
+
+.cell_section_row_buttons {
+ float: right;
+}
+
+.cell_section_row_header {
+ float: left;
+ font-size: 0.8em;
+ padding: 0.2em 0em;
+ font-weight: bold;
+}
span.button_label {
- padding: 0.3em 1em;
+ padding: 0.2em 1em;
font-size: 0.8em;
+ float: right;
}
+/* This is needed because FF was adding a 2px margin top and bottom. */
+.cell_section_row .ui-button {
+ margin-top: 0px;
+ margin-bottom: 0px;
+}
+
+
.ui-button .ui-button-text {
- padding: 0.3em 0.9em;
+ padding: 0.2em 0.8em;
font-size: 0.7em;
}
@@ -53,16 +53,6 @@ $(document).ready(function () {
// $("#delete_cell").button("option", "text", false);
// $("#delete_cell").click(function () {IPython.notebook.delete_cell();});
-// $("#cell_type").buttonset();
-// $("#to_code").click(function () {IPython.notebook.text_to_code();});
-// $("#to_text").click(function () {IPython.notebook.code_to_text();});
-
-// $("#sort").buttonset();
-// $("#sort_cells").click(function () {IPython.notebook.sort_cells();});
-
-// $("#toggle").buttonset();
-// $("#collapse").click(function () {IPython.notebook.collapse();});
-// $("#expand").click(function () {IPython.notebook.expand();});
});
@@ -131,65 +131,66 @@ var IPython = (function (IPython) {
this.content.find('#to_text').click(function () {
IPython.notebook.code_to_text();
});
+ this.content.find('#run_selected_cell').click(function () {
+ alert("Not Implemented");
+ });
+ this.content.find('#run_all_cells').click(function () {
+ alert("Not Implemented");
+ });
};
CellSection.prototype.create_children = function () {
- var row0 = $('<div>').
- append($('<span/>').attr('id','toggle').
- append( $('<button>Collapse</button>').attr('id','collapse_cell') ).
- append( $('<button>Expand</button>').attr('id','expand_cell') ) ).
- append($('<span/>').
- append($('<button>X</button>').attr('id','delete_cell')));
- row0.find('#toggle').buttonset();
- row0.find('button#delete_cell').button();
- this.content.append(row0);
- var row1 = $('<div>').
- append($('<span/>').html('Insert').addClass('button_label')).
- append($('<span/>').attr('id','insert').
+ this.content.addClass('ui-helper-clearfix');
+
+ var row1 = $('<div>').addClass('cell_section_row ui-helper-clearfix').
+ append($('<span/>').addClass('cell_section_row_buttons').
+ append($('<button>X</button>').attr('id','delete_cell'))).
+ append($('<span/>').html('Actions').addClass('cell_section_row_header'));
+ row1.find('#delete_cell').button();
+ this.content.append(row1);
+
+ var row1 = $('<div>').addClass('cell_section_row ui-helper-clearfix').
+ append($('<span/>').attr('id','insert').addClass('cell_section_row_buttons').
append( $('<button>Above</button>').attr('id','insert_cell_above') ).
- append( $('<button>Below</button>').attr('id','insert_cell_below') ) );
+ append( $('<button>Below</button>').attr('id','insert_cell_below') )).
+ append($('<span/>').html('Insert').addClass('button_label'));
row1.find('#insert').buttonset();
this.content.append(row1);
- var row2 = $('<div>').
- append($('<span/>').html('Move').addClass('button_label')).
- append($('<span/>').attr('id','move').
+ var row2 = $('<div>').addClass('cell_section_row ui-helper-clearfix').
+ append($('<span/>').attr('id','move').addClass('cell_section_row_buttons').
append( $('<button>Up</button>').attr('id','move_cell_up') ).
- append( $('<button>Down</button>').attr('id','move_cell_down') ) );
+ append( $('<button>Down</button>').attr('id','move_cell_down') ) ).
+ append($('<span/>').html('Move').addClass('button_label'));
row2.find('#move').buttonset();
this.content.append(row2);
- var row3 = $('<div>').
- append($('<span/>').html('Cell Type').addClass('button_label')).
- append($('<span/>').attr('id','cell_type').
+ var row3 = $('<div>').addClass('cell_section_row ui-helper-clearfix').
+ append($('<span/>').attr('id','cell_type').addClass('cell_section_row_buttons').
append( $('<button>Code</button>').attr('id','to_code') ).
- append( $('<button>Text</button>').attr('id','to_text') ) );
+ append( $('<button>Text</button>').attr('id','to_text') ) ).
+ append($('<span/>').html('Cell Type').addClass('button_label'));
row3.find('#cell_type').buttonset();
- this.content.append(row3)
+ this.content.append(row3);
+
+ var row0 = $('<div>').addClass('cell_section_row ui-helper-clearfix').
+ append($('<span/>').attr('id','toggle_output').addClass('cell_section_row_buttons').
+ append( $('<button>Collapse</button>').attr('id','collapse_cell') ).
+ append( $('<button>Expand</button>').attr('id','expand_cell') ) ).
+ append($('<span/>').html('Output').addClass('button_label'));
+ row0.find('#toggle_output').buttonset();
+ this.content.append(row0);
+
+ var row0 = $('<div>').addClass('cell_section_row').
+ append($('<span/>').attr('id','run_cells').addClass('cell_section_row_buttons').
+ append( $('<button>Selected</button>').attr('id','run_selected_cell') ).
+ append( $('<button>All</button>').attr('id','run_all_cells') ) ).
+ append($('<span/>').html('Run').addClass('button_label'));
+ row0.find('#run_cells').buttonset();
+ this.content.append(row0);
};
-// <span id="move_cell">
-// <button id="move_up">Move up</button>
-// <button id="move_down">Move down</button>
-// </span>
-// <span id="insert_delete">
-// <button id="insert_cell_before">Before</button>
-// <button id="insert_cell_after">After</button>
-// <button id="delete_cell">Delete</button>
-// </span>
-// <span id="cell_type">
-// <button id="to_code">Code</button>
-// <button id="to_text">Text</button>
-// </span>
-// <span id="sort">
-// <button id="sort_cells">Sort</button>
-// </span>
-// <span id="toggle">
-// <button id="collapse">Collapse</button>
-// <button id="expand">Expand</button>
-// </span>
-// </span>
// KernelSection
@@ -16,7 +16,7 @@ var IPython = (function (IPython) {
TextCell.prototype.create_element = function () {
- var cell = $("<div>").addClass('cell text_cell').
+ var cell = $("<div>").addClass('cell text_cell border-box-sizing').
append(
$("<textarea>" + this.placeholder + "</textarea>").
addClass('text_cell_input monospace-font').

0 comments on commit 71e8168

Please sign in to comment.