diff --git a/notebook/static/notebook/js/maintoolbar.js b/notebook/static/notebook/js/maintoolbar.js
index 6505df201b..2c7ae6a609 100644
--- 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
index be4c2bc7c8..7f66db2eeb 100644
--- a/notebook/static/notebook/js/toolbar.js
+++ b/notebook/static/notebook/js/toolbar.js
@@ -82,19 +82,15 @@ 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 = $('')
.addClass('btn btn-default')
@@ -102,6 +98,10 @@ define(['jquery'], function($) {
.append(
$("").addClass(el.icon||(action||{icon:'fa-exclamation-triangle'}).icon).addClass('fa')
);
+ if (el.label) {
+ var label = $('').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
index 743027436f..af074b445c 100644
--- 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;