Merge pull request #2789 from ellisonbg/celltoolbar-style

Fixing styling issues with CellToolbar.

IPython/frontend/html/notebook/static/css/celltoolbar.css

@@ -1,38 +1,52 b''
-/*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 b''
     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;
 }
 

IPython/frontend/html/notebook/static/js/cell.js

@@ -51,7 +51,6 b' var IPython = (function (IPython) {'
      * @method create_element
      */
     Cell.prototype.create_element = function () {
-        this.celltoolbar = new IPython.CellToolbar(this);
     };
 
 

IPython/frontend/html/notebook/static/js/celltoolbar.js

@@ -19,7 +19,6 b''
 var IPython = (function (IPython) {
     "use strict";
 
-
     /**
      * @constructor
      * @class CellToolbar
@@ -27,30 +26,51 b' var IPython = (function (IPython) {'
      */
     var CellToolbar = function (cell) {
         CellToolbar._instances.push(this);
-        this.inner_element = $('<div/>');
         this.cell = cell;
-        this.element = $('<div/>').addClass('celltoolbar')
-                .append(this.inner_element)
+        this.create_element();
         this.rebuild();
         return this;
     };
 
-    CellToolbar.dropdown_preset_element = $('<select/>')
-        .addClass('ui-widget ui-widget-content')
-        .attr('id', 'celltoolbar_selector')
-        .append($('<option/>').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 = $('<div/>');
+        var ctb_element = $('<div/>').addClass('celltoolbar')
+            .append(this.inner_element);
+        ctb_element.addClass('box-flex1');
+        var ctb_area = $('<div/>').addClass('ctb_area hbox');
+        var ctb_prompt = $('<div/>').addClass('ctb_prompt prompt');
+        ctb_area.append(ctb_prompt).append(ctb_element);
+        this.element = $('<div/>').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 b' 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 b' 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 b' var IPython = (function (IPython) {'
      */
     CellToolbar._instances =[]
 
+
     /**
      * keep a list of all the availlabel presets for the toolbar
      * @private
@@ -92,6 +115,7 b' 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 b' 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 b' 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(
-           $('<option/>').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 b' 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 b' var IPython = (function (IPython) {'
             this.inner_element.append(local_div)
             cdict[preset[index]](local_div, this.cell)
         }
-
     }
 
 
@@ -232,6 +271,7 b' 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 b' var IPython = (function (IPython) {'
             var button_container = $(div)
 
             var chkb = $('<input/>').attr('type', 'checkbox');
-            var lbl = $('<label/>').append($('<span/>').text(name).css('font-size', '77%'));
+            var lbl = $('<label/>').append($('<span/>').text(name));
             lbl.append(chkb);
             chkb.attr("checked", getter(cell));
 
@@ -288,6 +328,7 b' var IPython = (function (IPython) {'
         }
     }
 
+
     /**
      * A utility function to generate bindings between a dropdown list cell
      * @method utils.select_ui_generator
@@ -334,8 +375,8 b' var IPython = (function (IPython) {'
         label= label? label: "";
         return function(div, cell) {
             var button_container = $(div)
-            var lbl = $("<label/>").append($('<span/>').text(label).css('font-size', '77%'));
-            var select = $('<select/>');
+            var lbl = $("<label/>").append($('<span/>').text(label));
+            var select = $('<select/>').addClass('ui-widget ui-widget-content');
             for(var itemn in list_list){
                 var opt = $('<option/>');
                         opt.attr('value', list_list[itemn][1])

IPython/frontend/html/notebook/static/js/celltoolbarpresets/default.js

@@ -89,6 +89,6 b''
     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));

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

@@ -61,8 +61,11 b' var IPython = (function (IPython) {'
         IPython.Cell.prototype.create_element.apply(this, arguments);
 
         var cell =  $('<div></div>').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 = $('<div></div>').addClass('input hbox');
         input.append($('<div/>').addClass('prompt input_prompt'));
         var input_area = $('<div/>').addClass('input_area box-flex1');

IPython/frontend/html/notebook/static/js/maintoolbar.js

@@ -12,14 +12,11 b''
 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($('<label/>').text('Cell Toolbar:'))
-        .append(IPython.CellToolbar.dropdown_preset_element)
     };
 
     MainToolBar.prototype = new IPython.ToolBar(); 
@@ -120,23 +117,54 b' 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($('<select/>')
                 .attr('id','cell_type')
-                .addClass('ui-widget ui-widget-content')
-                    .append($('<option/>').attr('value','code').text('Code'))
-                    .append($('<option/>').attr('value','markdown').text('Markdown'))
-                    .append($('<option/>').attr('value','raw').text('Raw Text'))
-                    .append($('<option/>').attr('value','heading1').text('Heading 1'))
-                    .append($('<option/>').attr('value','heading2').text('Heading 2'))
-                    .append($('<option/>').attr('value','heading3').text('Heading 3'))
-                    .append($('<option/>').attr('value','heading4').text('Heading 4'))
-                    .append($('<option/>').attr('value','heading5').text('Heading 5'))
-                    .append($('<option/>').attr('value','heading6').text('Heading 6'))
-                );
+                .addClass('ui-widget-content')
+                .append($('<option/>').attr('value','code').text('Code'))
+                .append($('<option/>').attr('value','markdown').text('Markdown'))
+                .append($('<option/>').attr('value','raw').text('Raw Text'))
+                .append($('<option/>').attr('value','heading1').text('Heading 1'))
+                .append($('<option/>').attr('value','heading2').text('Heading 2'))
+                .append($('<option/>').attr('value','heading3').text('Heading 3'))
+                .append($('<option/>').attr('value','heading4').text('Heading 4'))
+                .append($('<option/>').attr('value','heading5').text('Heading 5'))
+                .append($('<option/>').attr('value','heading6').text('Heading 6'))
+            );
     };
 
+
+    MainToolBar.prototype.add_celltoolbar_list = function () {
+        var label = $('<label/>').text('Cell Toolbar:');
+        var select = $('<select/>')
+            .addClass('ui-widget-content')
+            .attr('id', 'ctb_select')
+            .append($('<option/>').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<presets.length; i++) {
+            var name = presets[i];
+            select.append($('<option/>').attr('value', name).text(name));
+        }
+        // Setup future preset registrations.
+        $([IPython.events]).on('preset_added.CellToolbar', function (event, data) {
+            var name = data.name;
+            select.append($('<option/>').attr('value', name).text(name));
+        });
+    };
+
+
     MainToolBar.prototype.bind_events = function () {
         var that = this;
         

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

@@ -44,8 +44,11 b' 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 vbox');
-        cell.append(this.celltoolbar.element);
         cell.attr('tabindex','2');
+
+        this.celltoolbar = new IPython.CellToolbar(this);
+        cell.append(this.celltoolbar.element);
+
         var input_area = $('<div/>').addClass('text_cell_input border-box-sizing');
         this.code_mirror = CodeMirror(input_area.get(0), {
             indentUnit : 4,