Further work on the toolbar UI.

* Cell type selection box is wired up and styled.
* New View menu that allows toolbar/header to be toggled.
This commit is contained in:
Brian Granger 2012-01-27 13:45:43 -08:00
parent 4c88c4686c
commit 428c82877f
5 changed files with 41 additions and 1 deletions

View File

@ -61,6 +61,10 @@ span#notebook_name {
padding: 3px 15px;
}
#cell_type {
font-size: 85%;
}
span#quick_help_area {
position: static;
padding: 5px 0px;

View File

@ -98,6 +98,14 @@ var IPython = (function (IPython) {
this.element.find('#select_next').click(function () {
IPython.notebook.select_next();
});
// View
this.element.find('#toggle_header').click(function () {
$('div#header').toggle();
IPython.layout_manager.do_resize();
});
this.element.find('#toggle_toolbar').click(function () {
IPython.toolbar.toggle();
});
// Insert
this.element.find('#insert_cell_above').click(function () {
IPython.notebook.insert_cell_above('code');

View File

@ -357,7 +357,9 @@ var IPython = (function (IPython) {
if (sindex !== null && index !== sindex) {
this.get_cell(sindex).unselect();
};
this.get_cell(index).select();
var cell = this.get_cell(index)
cell.select();
IPython.toolbar.set_cell_type(cell.cell_type);
};
return this;
};

View File

@ -23,6 +23,7 @@ var IPython = (function (IPython) {
ToolBar.prototype.style = function () {
this.element.addClass('border-box-sizing');
this.element.find('#cell_type').addClass('ui-widget ui-widget-content');
this.element.find('#save_b').button({
icons : {primary: 'ui-icon-disk'},
text : false
@ -71,10 +72,29 @@ var IPython = (function (IPython) {
ToolBar.prototype.bind_events = function () {
this.element.find('#cell_type').change(function () {
var cell_type = $(this).val();
if (cell_type === 'code') {
IPython.notebook.to_code();
} else if (cell_type === 'markdown') {
IPython.notebook.to_markdown();
};
});
};
ToolBar.prototype.set_cell_type = function (cell_type) {
this.element.find('#cell_type').val(cell_type);
};
ToolBar.prototype.toggle = function () {
this.element.toggle();
IPython.layout_manager.do_resize();
};
IPython.ToolBar = ToolBar;
return IPython;

View File

@ -99,6 +99,12 @@
<li id="select_next"><a href="#">Select Next</a></li>
</ul>
</li>
<li><a href="#">View</a>
<ul>
<li id="toggle_header"><a href="#">Toggle Header</a></li>
<li id="toggle_toolbar"><a href="#">Toggle Toolbar</a></li>
</ul>
</li>
<li><a href="#">Insert</a>
<ul>
<li id="insert_cell_above"><a href="#">Insert Cell Above</a></li>