Merge pull request #527 from minrk/demote-cell-toolbar

Move cell toolbar selection to View menu

notebook/static/notebook/js/maintoolbar.js

@@ -55,7 +55,6 @@ define([
             ],
             'run_int'],
          ['<add_celltype_list>'],
-         ['<add_celltoolbar_list>'],
          [['ipython.command-palette']]
         ];
         this.construct(grps);
@@ -107,56 +106,5 @@ define([
 
     };
 
-    MainToolBar.prototype._pseudo_actions.add_celltoolbar_list = function () {
-        var label = $('<span/>').addClass("navbar-text").text('Cell Toolbar:');
-        var select = $('<select/>')
-            .attr('id', 'ctb_select')
-            .addClass('form-control select-xs')
-            .append($('<option/>').attr('value', '').text('None'));
-        var that = this;
-        select.change(function() {
-                var val = $(this).val();
-                if (val ==='') {
-                    celltoolbar.CellToolbar.global_hide();
-                    delete that.notebook.metadata.celltoolbar;
-                } else {
-                    celltoolbar.CellToolbar.global_show();
-                    celltoolbar.CellToolbar.activate_preset(val, that.events);
-                    that.notebook.metadata.celltoolbar = val;
-                }
-                that.notebook.focus_cell();
-            });
-        this.notebook.keyboard_manager.register_events(select);
-        // Setup the currently registered presets.
-        var presets = celltoolbar.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.
-        this.events.on('preset_added.CellToolbar', function (event, data) {
-            var name = data.name;
-            select.append($('<option/>').attr('value', name).text(name));
-        });
-        this.events.on('unregistered_preset.CellToolbar', function (event, data) {
-            if (select.val() === data.name){
-                select.val('');
-                celltoolbar.CellToolbar.global_hide();
-                delete that.notebook.metadata.celltoolbar;
-            }
-            select.find("option[value='"+name+"']" ).remove();
-        });
-        // Update select value when a preset is activated.
-        this.events.on('preset_activated.CellToolbar', function (event, data) {
-            if (select.val() !== data.name){
-                select.val(data.name);
-            }
-        });
-
-        var wrapper = $('<div/>').addClass('btn-group');
-        wrapper.append(label).append(select);
-        return wrapper;
-    };
-
     return {'MainToolBar': MainToolBar};
 });

notebook/static/notebook/js/menubar.js

@@ -6,9 +6,10 @@ define([
     'base/js/namespace',
     'base/js/dialog',
     'base/js/utils',
-    'notebook/js/tour',
+    './celltoolbar',
+    './tour',
     'moment',
-], function($, IPython, dialog, utils, tour, moment) {
+], function($, IPython, dialog, utils, celltoolbar, tour, moment) {
     "use strict";
     
     var MenuBar = function (selector, options) {
@@ -191,6 +192,9 @@ define([
             that.notebook.session.delete(close_window, close_window);
         });
 
+        // View
+        this._add_celltoolbar_list();
+
         // Edit
         this.element.find('#edit_nb_metadata').click(function () {
             that.notebook.edit_metadata({
@@ -296,6 +300,50 @@ define([
             that.add_kernel_help_links(data.kernel.info_reply.help_links || []);
         });
     };
+    
+    MenuBar.prototype._add_celltoolbar_list = function () {
+        var that = this;
+        var submenu = $("#menu-cell-toolbar-submenu");
+        
+        function preset_added(event, data) {
+            var name = data.name;
+            submenu.append(
+                $("<li/>")
+                .attr('data-name', encodeURIComponent(name))
+                .append(
+                    $("<a/>")
+                    .attr('href', '#')
+                    .text(name)
+                    .click(function () {
+                        if (name ==='None') {
+                            celltoolbar.CellToolbar.global_hide();
+                            delete that.notebook.metadata.celltoolbar;
+                        } else {
+                            celltoolbar.CellToolbar.global_show();
+                            celltoolbar.CellToolbar.activate_preset(name, that.events);
+                            that.notebook.metadata.celltoolbar = name;
+                        }
+                        that.notebook.focus_cell();
+                    })
+                )
+            );
+        }
+        
+        // Setup the existing presets
+        var presets = celltoolbar.CellToolbar.list_presets();
+        preset_added(null, {name: "None"});
+        presets.map(function (name) {
+            preset_added(null, {name: name});
+        });
+
+        // Setup future preset registrations
+        this.events.on('preset_added.CellToolbar', preset_added);
+        
+        // Handle unregistered presets
+        this.events.on('unregistered_preset.CellToolbar', function (event, data) {
+            submenu.find("li[data-name='" + encodeURIComponent(data.name) + "']").remove();
+        });
+    };
 
     MenuBar.prototype.update_restore_checkpoint = function(checkpoints) {
         var ul = this.element.find("#restore_checkpoint").find("ul");

notebook/templates/notebook.html

@@ -153,6 +153,10 @@ data-notebook-path="{{notebook_path | urlencode}}"
                         <li id="toggle_toolbar"
                             title="Show/Hide the action icons (below menu bar)">
                             <a href="#">Toggle Toolbar</a></li>
+                        <li id="menu-cell-toolbar" class="dropdown-submenu">
+                            <a href="#">Cell Toolbar</a>
+                            <ul class="dropdown-menu" id="menu-cell-toolbar-submenu"></ul>
+                        </li>
                     </ul>
                 </li>
                 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Insert</a>