diff --git a/IPython/frontend/html/notebook/static/css/celltoolbar.css b/IPython/frontend/html/notebook/static/css/celltoolbar.css index d9650ae..9c2c4f7 100644 --- a/IPython/frontend/html/notebook/static/css/celltoolbar.css +++ b/IPython/frontend/html/notebook/static/css/celltoolbar.css @@ -1,38 +1,52 @@ -/*Css for the metadata edit area*/ +/* Css for the metadata edit area */ -.celltoolbar{ - border:thin solid #DDD; - margin-left:81px; - border-bottom:none; + +.celltoolbar { + border: thin solid #DDD; + margin-left: 0px; + border-bottom: none; background : #EEE; border-top-right-radius: 3px; border-top-left-radius: 3px; - display:none; } -.code_cell .celltoolbar{ - margin-left:81px; +.no_input_radius { + border-top-right-radius: 0px; + border-top-left-radius: 0px; } -.text_cell .celltoolbar{ - margin-left:0px; +.text_cell .ctb_prompt { + display: none; } -.celltoolbar-on div.input_area , .celltoolbar-on div.text_cell_input{ - border-top-right-radius: 0px; - border-top-left-radius: 0px; +.code_cell .ctb_prompt { + display: block; } -.celltoolbar-on .celltoolbar { - display:block; +.ctb_hideshow { + display: none; } -.celltoolbar ui-button { - border :none; +/*ctb_show is added to either body or the ctb_hideshow div to show +all or one cell's toolbars. +*/ +.ctb_show.ctb_hideshow, .ctb_show .ctb_hideshow { + display: block; +} + +.ctb_show .ctb_hideshow + div > div.input_area, +.ctb_show .ctb_hideshow + div.text_cell_input { + border-top-right-radius: 0px; + border-top-left-radius: 0px; +} + +.ctb_show > .celltoolbar { + border-bottom-right-radius: 0px; + border-bottom-left-radius: 0px; } .button_container { - float:right; + float: right; } .button_container .ui-state-default, .button_container .ui-state-hover, .button_container .ui-state-hover span{ @@ -40,14 +54,22 @@ border : none; } -.celltoolbar select { - margin:10px; - margin-top:0px; - margin-bottom:0px; +.celltoolbar .button_container select { + margin: 10px; + margin-top: 0px; + margin-bottom: 0px; + font-size: 77%; +} + +.celltoolbar label span { + font-size: 77%; } .celltoolbar input[type=checkbox] { - margin-bottom:1px; + margin-bottom: 1px; +} +.celltoolbar ui-button { + border: none; } diff --git a/IPython/frontend/html/notebook/static/js/cell.js b/IPython/frontend/html/notebook/static/js/cell.js index f1ea132..6f87ff7 100644 --- a/IPython/frontend/html/notebook/static/js/cell.js +++ b/IPython/frontend/html/notebook/static/js/cell.js @@ -51,7 +51,6 @@ var IPython = (function (IPython) { * @method create_element */ Cell.prototype.create_element = function () { - this.celltoolbar = new IPython.CellToolbar(this); }; diff --git a/IPython/frontend/html/notebook/static/js/celltoolbar.js b/IPython/frontend/html/notebook/static/js/celltoolbar.js index 3e74131..c75e677 100644 --- a/IPython/frontend/html/notebook/static/js/celltoolbar.js +++ b/IPython/frontend/html/notebook/static/js/celltoolbar.js @@ -19,7 +19,6 @@ var IPython = (function (IPython) { "use strict"; - /** * @constructor * @class CellToolbar @@ -27,30 +26,51 @@ var IPython = (function (IPython) { */ var CellToolbar = function (cell) { CellToolbar._instances.push(this); - this.inner_element = $('
'); this.cell = cell; - this.element = $('').addClass('celltoolbar') - .append(this.inner_element) + this.create_element(); this.rebuild(); return this; }; - CellToolbar.dropdown_preset_element = $('') - .addClass('ui-widget ui-widget-content') - .attr('id', 'celltoolbar_selector') - .append($('').attr('value', '').text('None')) - - CellToolbar.dropdown_preset_element.change(function(){ - var val = CellToolbar.dropdown_preset_element.val() - if(val ==''){ - $('body').removeClass('celltoolbar-on') - } else { - $('body').addClass('celltoolbar-on') - CellToolbar.activate_preset(val) - } - }) + + CellToolbar.prototype.create_element = function () { + this.inner_element = $(''); + var ctb_element = $('').addClass('celltoolbar') + .append(this.inner_element); + ctb_element.addClass('box-flex1'); + var ctb_area = $('').addClass('ctb_area hbox'); + var ctb_prompt = $('').addClass('ctb_prompt prompt'); + ctb_area.append(ctb_prompt).append(ctb_element); + this.element = $('').addClass('ctb_hideshow') + .append(ctb_area); + }; + + + // The default css style for the outer celltoolbar div + // (ctb_hideshow) is display: none. We add the ctb_show + // class to either 1) the body to show all cell's toolbars + // or 2) to the individual celltoolbar divs to show just one + // cell's toolbar. + + CellToolbar.global_hide = function () { + $('body').removeClass('ctb_show'); + } + CellToolbar.global_show = function () { + $('body').addClass('ctb_show'); + } + + + CellToolbar.prototype.hide = function () { + this.element.removeClass('ctb_show'); + } + + + CellToolbar.prototype.show = function () { + this.element.addClass('ctb_show'); + } + /** * Class variable that should contain a dict of all availlable callback @@ -62,6 +82,7 @@ var IPython = (function (IPython) { */ CellToolbar._callback_dict = {}; + /** * Class variable that should contain the reverse order list of the button * to add to the toolbar of each cell @@ -72,6 +93,7 @@ var IPython = (function (IPython) { */ CellToolbar._ui_controls_list = []; + /** * Class variable that should contains the CellToolbar instances for each * cell of the notebook @@ -83,6 +105,7 @@ var IPython = (function (IPython) { */ CellToolbar._instances =[] + /** * keep a list of all the availlabel presets for the toolbar * @private @@ -92,6 +115,7 @@ var IPython = (function (IPython) { */ CellToolbar._presets ={} + // this is by design not a prototype. /** * Register a callback to create an UI element in a cell toolbar. @@ -139,6 +163,7 @@ var IPython = (function (IPython) { CellToolbar._callback_dict[name] = callback; }; + /** * Register a preset of UI element in a cell toolbar. * Not supported Yet. @@ -160,12 +185,28 @@ var IPython = (function (IPython) { * CellToolbar.register_preset('foo.foo_preset1', ['foo.c1', 'foo.c2', 'foo.c5']) * CellToolbar.register_preset('foo.foo_preset2', ['foo.c4', 'foo.c5']) */ - CellToolbar.register_preset = function(name, preset_list){ + CellToolbar.register_preset = function(name, preset_list) { CellToolbar._presets[name] = preset_list - CellToolbar.dropdown_preset_element.append( - $('').attr('value', name).text(name) - ) - } + $([IPython.events]).trigger('preset_added.CellToolbar', {name: name}); + }; + + + /** + * List the names of the presets that are currently registered. + * + * @method list_presets + * @static + */ + CellToolbar.list_presets = function() { + var keys = []; + for (var k in CellToolbar._presets) { + keys.push(k); + } + console.log(keys); + return keys; + }; + + /** * Activate an UI preset from `register_preset` * @@ -190,7 +231,6 @@ var IPython = (function (IPython) { } - // this is by design not a prototype. /** * This should be called on the class and not on a instance as it will trigger * rebuild of all the instances. @@ -224,7 +264,6 @@ var IPython = (function (IPython) { this.inner_element.append(local_div) cdict[preset[index]](local_div, this.cell) } - } @@ -232,6 +271,7 @@ var IPython = (function (IPython) { */ CellToolbar.utils = {}; + /** * A utility function to generate bindings between a checkbox and cell/metadata * @method utils.checkbox_ui_generator @@ -274,7 +314,7 @@ var IPython = (function (IPython) { var button_container = $(div) var chkb = $('').attr('type', 'checkbox'); - var lbl = $('').append($('').text(name).css('font-size', '77%')); + var lbl = $('').append($('').text(name)); lbl.append(chkb); chkb.attr("checked", getter(cell)); @@ -288,6 +328,7 @@ var IPython = (function (IPython) { } } + /** * A utility function to generate bindings between a dropdown list cell * @method utils.select_ui_generator @@ -334,8 +375,8 @@ var IPython = (function (IPython) { label= label? label: ""; return function(div, cell) { var button_container = $(div) - var lbl = $("").append($('').text(label).css('font-size', '77%')); - var select = $(''); + var lbl = $("").append($('').text(label)); + var select = $('').addClass('ui-widget ui-widget-content'); for(var itemn in list_list){ var opt = $(''); opt.attr('value', list_list[itemn][1]) diff --git a/IPython/frontend/html/notebook/static/js/celltoolbarpresets/default.js b/IPython/frontend/html/notebook/static/js/celltoolbarpresets/default.js index 6daa23a..f78489b 100644 --- a/IPython/frontend/html/notebook/static/js/celltoolbarpresets/default.js +++ b/IPython/frontend/html/notebook/static/js/celltoolbarpresets/default.js @@ -89,6 +89,6 @@ example_preset.push('default.rawedit'); CellToolbar.register_preset('Default',example_preset); - console.log('Default extension for metadata editting loaded.'); + console.log('Default extension for metadata editing loaded.'); }(IPython)); diff --git a/IPython/frontend/html/notebook/static/js/codecell.js b/IPython/frontend/html/notebook/static/js/codecell.js index 2fd80ce..cadc3c0 100644 --- a/IPython/frontend/html/notebook/static/js/codecell.js +++ b/IPython/frontend/html/notebook/static/js/codecell.js @@ -61,8 +61,11 @@ var IPython = (function (IPython) { IPython.Cell.prototype.create_element.apply(this, arguments); var cell = $('').addClass('cell border-box-sizing code_cell vbox'); - cell.append(this.celltoolbar.element); cell.attr('tabindex','2'); + + this.celltoolbar = new IPython.CellToolbar(this); + cell.append(this.celltoolbar.element); + var input = $('').addClass('input hbox'); input.append($('').addClass('prompt input_prompt')); var input_area = $('').addClass('input_area box-flex1'); diff --git a/IPython/frontend/html/notebook/static/js/maintoolbar.js b/IPython/frontend/html/notebook/static/js/maintoolbar.js index 8d5479c..9b8045f 100644 --- a/IPython/frontend/html/notebook/static/js/maintoolbar.js +++ b/IPython/frontend/html/notebook/static/js/maintoolbar.js @@ -12,14 +12,11 @@ var IPython = (function (IPython) { var MainToolBar = function (selector) { - this.selector = selector; IPython.ToolBar.apply(this, arguments); this.construct(); - this.add_drop_down_list(); + this.add_celltype_list(); + this.add_celltoolbar_list(); this.bind_events(); - $(this.selector) - .append($('').text('Cell Toolbar:')) - .append(IPython.CellToolbar.dropdown_preset_element) }; MainToolBar.prototype = new IPython.ToolBar(); @@ -120,23 +117,54 @@ var IPython = (function (IPython) { ],'run_int'); }; - MainToolBar.prototype.add_drop_down_list = function () { - var select = $(this.selector) + MainToolBar.prototype.add_celltype_list = function () { + this.element .append($('') .attr('id','cell_type') - .addClass('ui-widget ui-widget-content') - .append($('').attr('value','code').text('Code')) - .append($('').attr('value','markdown').text('Markdown')) - .append($('').attr('value','raw').text('Raw Text')) - .append($('').attr('value','heading1').text('Heading 1')) - .append($('').attr('value','heading2').text('Heading 2')) - .append($('').attr('value','heading3').text('Heading 3')) - .append($('').attr('value','heading4').text('Heading 4')) - .append($('').attr('value','heading5').text('Heading 5')) - .append($('').attr('value','heading6').text('Heading 6')) - ); + .addClass('ui-widget-content') + .append($('').attr('value','code').text('Code')) + .append($('').attr('value','markdown').text('Markdown')) + .append($('').attr('value','raw').text('Raw Text')) + .append($('').attr('value','heading1').text('Heading 1')) + .append($('').attr('value','heading2').text('Heading 2')) + .append($('').attr('value','heading3').text('Heading 3')) + .append($('').attr('value','heading4').text('Heading 4')) + .append($('').attr('value','heading5').text('Heading 5')) + .append($('').attr('value','heading6').text('Heading 6')) + ); }; + + MainToolBar.prototype.add_celltoolbar_list = function () { + var label = $('').text('Cell Toolbar:'); + var select = $('') + .addClass('ui-widget-content') + .attr('id', 'ctb_select') + .append($('').attr('value', '').text('None')); + this.element.append(label).append(select); + select.change(function() { + var val = $(this).val() + if (val =='') { + IPython.CellToolbar.global_hide(); + } else { + IPython.CellToolbar.global_show(); + IPython.CellToolbar.activate_preset(val); + } + }); + // Setup the currently registered presets. + var presets = IPython.CellToolbar.list_presets(); + for (var i=0; i