Allow toolbar buttons to have short label

I've wanted this for ages - little monochrome icons can only convey so much information. So far, I've only added a label to the run button.
jupyter · Apr 21, 2017 · af244a6 · af244a6
1 parent b93820b
commit af244a6
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 13 deletions.
diff --git a/notebook/static/notebook/js/maintoolbar.js b/notebook/static/notebook/js/maintoolbar.js
@@ -49,7 +49,8 @@ define([
              'jupyter-notebook:move-cell-down'
             ],
             'move_up_down'],
-          [ ['jupyter-notebook:run-cell-and-select-next',
+          [ [new toolbar.Button('jupyter-notebook:run-cell-and-select-next',
+                {label: 'Run'}),
              'jupyter-notebook:interrupt-kernel',
              'jupyter-notebook:confirm-restart-kernel'
             ],

diff --git a/notebook/static/notebook/js/toolbar.js b/notebook/static/notebook/js/toolbar.js
@@ -82,26 +82,26 @@ define(['jquery'], function($) {
         if( group_id !== undefined ) {
             btn_group.attr('id',group_id);
         }
-        for(var i=0; i < list.length; i++) {
-
-            // IIFE because javascript don't have loop scope so
-            // action_name would otherwise be the same on all iteration
-            // of the loop
-            (function(i,list){
-                var el = list[i];
+        list.forEach(function(el) {
                 var action_name;
                 var action;
                 if(typeof(el) === 'string'){
                     action = that.actions.get(el);
                     action_name = el;
-
+                } else if (el.action) {
+                    action = that.actions.get(el.action);
+                    action_name = el.action
                 }
                 var button  = $('<button/>')
                     .addClass('btn btn-default')
                     .attr("title", el.label||action.help)
                     .append(
                         $("<i/>").addClass(el.icon||(action||{icon:'fa-exclamation-triangle'}).icon).addClass('fa')
                     );
+                if (el.label) {
+                    var label = $('<span/>').text(el.label).addClass('toolbar-btn-label');
+                    button.append(label);
+                }
                 var id = el.id;
                 if( id !== undefined ){
                     button.attr('id',id);
@@ -112,9 +112,7 @@ define(['jquery'], function($) {
                 };
                 button.click(fun);
                 btn_group.append(button);
-            })(i,list);
-            // END IIFE
-        }
+        });
         $(this.selector).append(btn_group);
         return btn_group;
     };
@@ -131,5 +129,20 @@ define(['jquery'], function($) {
         this.element.toggle();
     };
 
-    return {'ToolBar': ToolBar};
+    /**
+     * A simple class to hold information defining one toolbar button.
+     * @class ToolBar
+     * @constructor
+     * @param action {String} name of a Jupyter action taken when pressed
+     * @param options.label {String} short label to display on the button
+     */
+    var Button = function(action, options) {
+        this.action = action;
+        this.label = (options||{}).label;
+    };
+
+    return {
+        'ToolBar': ToolBar,
+        'Button': Button
+    };
 });
diff --git a/notebook/static/notebook/less/toolbar.less b/notebook/static/notebook/less/toolbar.less
@@ -28,6 +28,10 @@
   margin-left: 5px;
 }
 
+.toolbar-btn-label {
+  margin-left: 6px;
+}
+
 #maintoolbar {
   margin-bottom: -3px;
   margin-top: -8px;