Merge pull request #7725 from SylvainCorlay/fabutton

Adding font-awesome icon to button and toggle button

IPython/html/static/widgets/js/widget_bool.js

@@ -1,158 +1,157 b''
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 define([
     "widgets/js/widget",
     "jquery",
     "bootstrap",
 ], function(widget, $){
 
     var CheckboxView = widget.DOMWidgetView.extend({
         render : function(){
             /**
              * Called when view is rendered.
              */
             this.$el
                 .addClass('widget-hbox widget-checkbox');
             this.$label = $('<div />')
                 .addClass('widget-label')
                 .appendTo(this.$el)
                 .hide();
             this.$checkbox = $('<input />')
                 .attr('type', 'checkbox')
                 .appendTo(this.$el)
                 .click($.proxy(this.handle_click, this));
 
             this.update(); // Set defaults.
         },
 
         update_attr: function(name, value) {
             /**
              * Set a css attr of the widget view.
              */
             if (name == 'padding' || name == 'margin') {
                 this.$el.css(name, value);
             } else {
                 this.$checkbox.css(name, value);
             }
         },
 
         handle_click: function() {
             /**
              * Handles when the checkbox is clicked.
              *
              * Calling model.set will trigger all of the other views of the 
              * model to update.
              */
             var value = this.model.get('value');
             this.model.set('value', ! value, {updated_view: this});
             this.touch();
         },
         
         update : function(options){
             /**
              * Update the contents of this view
              *
              * Called when the model is changed.  The model may have been 
              * changed by another view or by a state update from the back-end.
              */
             this.$checkbox.prop('checked', this.model.get('value'));
 
             if (options === undefined || options.updated_view != this) {
-                var disabled = this.model.get('disabled');
-                this.$checkbox.prop('disabled', disabled);
+                this.$checkbox.prop("disabled", this.model.get("disabled"));
 
-                var description = this.model.get('description');
+                var description = this.model.get("description");
                 if (description.trim().length === 0) {
                     this.$label.hide();
                 } else {
                     this.typeset(this.$label, description);
                     this.$label.show();
                 }
             }
             return CheckboxView.__super__.update.apply(this);
         },
         
     });
 
 
     var ToggleButtonView = widget.DOMWidgetView.extend({
         render : function() {
             /**
              * Called when view is rendered.
              */
             var that = this;
             this.setElement($('<button />')
                 .addClass('btn btn-default')
                 .attr('type', 'button')
                 .on('click', function (e) {
                     e.preventDefault();
                     that.handle_click();
                 }));
             this.$el.attr("data-toggle", "tooltip");
             this.model.on('change:button_style', function(model, value) {
                 this.update_button_style();
             }, this);
             this.update_button_style('');
 
             this.update(); // Set defaults.
         },
 
         update_button_style: function(previous_trait_value) {
             var class_map = {
                 primary: ['btn-primary'],
                 success: ['btn-success'],
                 info: ['btn-info'],
                 warning: ['btn-warning'],
                 danger: ['btn-danger']
             };
             this.update_mapped_classes(class_map, 'button_style', previous_trait_value);
         },
         
         update : function(options){
             /**
              * Update the contents of this view
              *
-             * Called when the model is changed.  The model may have been 
+             * Called when the model is changed. The model may have been 
              * changed by another view or by a state update from the back-end.
              */
             if (this.model.get('value')) {
                 this.$el.addClass('active');
             } else {
                 this.$el.removeClass('active');
             }
 
             if (options === undefined || options.updated_view != this) {
-
-                var disabled = this.model.get('disabled');
-                this.$el.prop('disabled', disabled);
-
-                var description = this.model.get('description');
+                this.$el.prop("disabled", this.model.get("disabled"));
                 this.$el.attr("title", this.model.get("tooltip"));
-                if (description.trim().length === 0) {
+
+                var description = this.model.get("description");
+                var icon = this.model.get("icon");
+                if (description.trim().length === 0 && icon.trim().length ===0) {
                     this.$el.html("&nbsp;"); // Preserve button height
                 } else {
                     this.$el.text(description);
+                    $('<i class="fa"></i>').prependTo(this.$el).addClass(icon);
                 }
             }
             return ToggleButtonView.__super__.update.apply(this);
         },
         
         handle_click: function(e) { 
             /**
              * Handles and validates user input.
              *
              * Calling model.set will trigger all of the other views of the 
              * model to update.
              */
             var value = this.model.get('value');
             this.model.set('value', ! value, {updated_view: this});
             this.touch();
         },
     });
 
     return {
         'CheckboxView': CheckboxView,
         'ToggleButtonView': ToggleButtonView,
     };
 });

IPython/html/static/widgets/js/widget_button.js

@@ -1,77 +1,75 b''
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 define([
     "widgets/js/widget",
     "jquery",
     "bootstrap",
 ], function(widget, $){
 
     var ButtonView = widget.DOMWidgetView.extend({
         render : function(){
             /**
              * Called when view is rendered.
              */
             this.setElement($("<button />")
                 .addClass('btn btn-default'));
             this.$el.attr("data-toggle", "tooltip");
             this.model.on('change:button_style', function(model, value) {
                 this.update_button_style();
             }, this);
             this.update_button_style('');
 
             this.update(); // Set defaults.
         },
         
         update : function(){
             /**
              * Update the contents of this view
              *
-             * Called when the model is changed.  The model may have been 
+             * Called when the model is changed. The model may have been 
              * changed by another view or by a state update from the back-end.
              */
-            var description = this.model.get('description');
+            this.$el.prop("disabled", this.model.get("disabled"));
             this.$el.attr("title", this.model.get("tooltip"));
-            if (description.length === 0) {
+
+            var description = this.model.get("description");
+            var icon = this.model.get("icon");
+            if (description.trim().length === 0 && icon.trim().length ===0) {
                 this.$el.html("&nbsp;"); // Preserve button height
             } else {
                 this.$el.text(description);
-            }
-            
-            if (this.model.get('disabled')) {
-                this.$el.attr('disabled','disabled');
-            } else {
-                this.$el.removeAttr('disabled');
+                $('<i class="fa"></i>').prependTo(this.$el).addClass(icon);
             }
 
             return ButtonView.__super__.update.apply(this);
         },
 
         update_button_style: function(previous_trait_value) {
             var class_map = {
                 primary: ['btn-primary'],
                 success: ['btn-success'],
                 info: ['btn-info'],
                 warning: ['btn-warning'],
                 danger: ['btn-danger']
             };
             this.update_mapped_classes(class_map, 'button_style', previous_trait_value);
         },
 
         events: {
             // Dictionary of events and their handlers.
             'click': '_handle_click',
         },
         
         _handle_click: function(){
             /**
              * Handles when the button is clicked.
              */
             this.send({event: 'click'});
         },
     });
 
     return {
         'ButtonView': ButtonView,
     };
 });

IPython/html/static/widgets/js/widget_selection.js

@@ -1,573 +1,583 b''
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 define([
     "widgets/js/widget",
     "base/js/utils",
     "jquery",
     "underscore",
     "bootstrap",
 ], function(widget, utils, $, _){
 
     var DropdownView = widget.DOMWidgetView.extend({
         render : function(){
             /**
              * Called when view is rendered.
              */
             this.$el
                 .addClass('widget-hbox widget-dropdown');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-label')
                 .hide();
             this.$buttongroup = $('<div />')
                 .addClass('widget_item')
                 .addClass('btn-group')
                 .appendTo(this.$el);
             this.$droplabel = $('<button />')
                 .addClass('btn btn-default')
                 .addClass('widget-combo-btn')
                 .html("&nbsp;")
                 .appendTo(this.$buttongroup);
             this.$dropbutton = $('<button />')
                 .addClass('btn btn-default')
                 .addClass('dropdown-toggle')
                 .addClass('widget-combo-carrot-btn')
                 .attr('data-toggle', 'dropdown')
                 .append($('<span />').addClass("caret"))
                 .appendTo(this.$buttongroup);
             this.$droplist = $('<ul />')
                 .addClass('dropdown-menu')
                 .appendTo(this.$buttongroup);
 
             this.model.on('change:button_style', function(model, value) {
                 this.update_button_style();
             }, this);
             this.update_button_style('');
             
             // Set defaults.
             this.update();
         },
         
         update : function(options){
             /**
              * Update the contents of this view
              *
              * Called when the model is changed.  The model may have been
              * changed by another view or by a state update from the back-end.
              */
 
             if (options === undefined || options.updated_view != this) {
                 var selected_item_text = this.model.get('selected_label');
                 if (selected_item_text.trim().length === 0) {
                     this.$droplabel.html("&nbsp;");
                 } else {
                     this.$droplabel.text(selected_item_text);
                 }
                 
                 var items = this.model.get('_options_labels');
                 var $replace_droplist = $('<ul />')
                     .addClass('dropdown-menu');
                 // Copy the style
                 $replace_droplist.attr('style', this.$droplist.attr('style'));
                 var that = this;
                 _.each(items, function(item, i) {
                     var item_button = $('<a href="#"/>')
                         .text(item)
                         .on('click', $.proxy(that.handle_click, that));
                     $replace_droplist.append($('<li />').append(item_button));
                 });
 
                 this.$droplist.replaceWith($replace_droplist);
                 this.$droplist.remove();
                 this.$droplist = $replace_droplist;
                 
                 if (this.model.get('disabled')) {
                     this.$buttongroup.attr('disabled','disabled');
                     this.$droplabel.attr('disabled','disabled');
                     this.$dropbutton.attr('disabled','disabled');
                     this.$droplist.attr('disabled','disabled');
                 } else {
                     this.$buttongroup.removeAttr('disabled');
                     this.$droplabel.removeAttr('disabled');
                     this.$dropbutton.removeAttr('disabled');
                     this.$droplist.removeAttr('disabled');
                 }
 
                 var description = this.model.get('description');
                 if (description.length === 0) {
                     this.$label.hide();
                 } else {
                     this.typeset(this.$label, description);
                     this.$label.show();
                 }
             }
             return DropdownView.__super__.update.apply(this);
         },
 
         update_button_style: function(previous_trait_value) {
             var class_map = {
                 primary: ['btn-primary'],
                 success: ['btn-success'],
                 info: ['btn-info'],
                 warning: ['btn-warning'],
                 danger: ['btn-danger']
             };
             this.update_mapped_classes(class_map, 'button_style', previous_trait_value, this.$droplabel);
             this.update_mapped_classes(class_map, 'button_style', previous_trait_value, this.$dropbutton);
         },
 
         update_attr: function(name, value) {
             /**
              * Set a css attr of the widget view.
              */
             if (name.substring(0, 6) == 'border' || name == 'background' || name == 'color') {
                 this.$droplabel.css(name, value);
                 this.$dropbutton.css(name, value);
                 this.$droplist.css(name, value);
             } else if (name == 'width') {
                 this.$droplist.css(name, value);
                 this.$droplabel.css(name, value);
             } else if (name == 'padding') {
                 this.$droplist.css(name, value);
                 this.$buttongroup.css(name, value);
             } else if (name == 'margin') {
                 this.$buttongroup.css(name, value);
             } else if (name == 'height') {
                 this.$droplabel.css(name, value);
                 this.$dropbutton.css(name, value);
             } else if (name == 'padding' || name == 'margin') {
                 this.$el.css(name, value);
             } else {
                 this.$droplist.css(name, value);
                 this.$droplabel.css(name, value);
             }
         },
 
         handle_click: function (e) {
             /**
              * Handle when a value is clicked.
              *
              * Calling model.set will trigger all of the other views of the 
              * model to update.
              */
             this.model.set('selected_label', $(e.target).text(), {updated_view: this});
             this.touch();
 
             // Manually hide the droplist.
             e.stopPropagation();
             e.preventDefault();
             this.$buttongroup.removeClass('open');
         },
         
     });
 
 
     var RadioButtonsView = widget.DOMWidgetView.extend({    
         render : function(){
             /**
              * Called when view is rendered.
              */
             this.$el
                 .addClass('widget-hbox widget-radio');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-label')
                 .hide();
             this.$container = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-radio-box');
             this.update();
         },
         
         update : function(options){
             /**
              * Update the contents of this view
              *
              * Called when the model is changed.  The model may have been 
              * changed by another view or by a state update from the back-end.
              */
             if (options === undefined || options.updated_view != this) {
                 // Add missing items to the DOM.
                 var items = this.model.get('_options_labels');
                 var disabled = this.model.get('disabled');
                 var that = this;
                 _.each(items, function(item, index) {
                     var item_query = ' :input[data-value="' + encodeURIComponent(item) + '"]';
                     if (that.$el.find(item_query).length === 0) {
                         var $label = $('<label />')
                             .addClass('radio')
                             .text(item)
                             .appendTo(that.$container);
                         
                         $('<input />')
                             .attr('type', 'radio')
                             .addClass(that.model)
                             .val(item)
                             .attr('data-value', encodeURIComponent(item))
                             .prependTo($label)
                             .on('click', $.proxy(that.handle_click, that));
                     }
                     
                     var $item_element = that.$container.find(item_query);
                     if (that.model.get('selected_label') == item) {
                         $item_element.prop('checked', true);
                     } else {
                         $item_element.prop('checked', false);
                     }
                     $item_element.prop('disabled', disabled);
                 });
                 
                 // Remove items that no longer exist.
                 this.$container.find('input').each(function(i, obj) {
                     var value = $(obj).val();
                     var found = false;
                     _.each(items, function(item, index) {
                         if (item == value) {
                             found = true;
                             return false;
                         }
                     });
                     
                     if (!found) {
                         $(obj).parent().remove();
                     }
                 });
 
                 var description = this.model.get('description');
                 if (description.length === 0) {
                     this.$label.hide();
                 } else {
                     this.$label.text(description);
                     this.typeset(this.$label, description);
                     this.$label.show();
                 }
             }
             return RadioButtonsView.__super__.update.apply(this);
         },
 
         update_attr: function(name, value) {
             /**
              * Set a css attr of the widget view.
              */
             if (name == 'padding' || name == 'margin') {
                 this.$el.css(name, value);
             } else {
                 this.$container.css(name, value);
             }
         },
 
         handle_click: function (e) {
             /**
              * Handle when a value is clicked.
              *
              * Calling model.set will trigger all of the other views of the 
              * model to update.
              */
             this.model.set('selected_label', $(e.target).val(), {updated_view: this});
             this.touch();
         },
     });
     
 
     var ToggleButtonsView = widget.DOMWidgetView.extend({
         initialize: function() {
             this._css_state = {};
             ToggleButtonsView.__super__.initialize.apply(this, arguments);
         },
 
         render: function() {
             /**
              * Called when view is rendered.
              */
             this.$el
                 .addClass('widget-hbox widget-toggle-buttons');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-label')
                 .hide();
             this.$buttongroup = $('<div />')
                 .addClass('btn-group')
                 .appendTo(this.$el);
 
             this.model.on('change:button_style', function(model, value) {
                 this.update_button_style();
             }, this);
             this.update_button_style('');
             this.update();
         },
         
         update : function(options){
             /**
              * Update the contents of this view
              *
              * Called when the model is changed.  The model may have been 
              * changed by another view or by a state update from the back-end.
              */
             if (options === undefined || options.updated_view != this) {
                 // Add missing items to the DOM.
                 var items = this.model.get('_options_labels');
+                var icons = this.model.get('icons');
+                var previous_icons = this.model.previous('icons') || [];
                 var disabled = this.model.get('disabled');
                 var that = this;
                 var item_html;
                 _.each(items, function(item, index) {
-                    if (item.trim().length === 0) {
+                    if (item.trim().length === 0 && (!icons[index] ||
+                        icons[index].trim().length === 0)) {
                         item_html = "&nbsp;";
                     } else {
                         item_html = utils.escape_html(item);
                     }
                     var item_query = '[data-value="' + encodeURIComponent(item) + '"]';
                     var $item_element = that.$buttongroup.find(item_query);
+                    var $icon_element = $item_element.find('.fa');
                     if (!$item_element.length) {
                         $item_element = $('<button/>')
                             .attr('type', 'button')
                             .addClass('btn btn-default')
                             .html(item_html)
                             .appendTo(that.$buttongroup)
                             .attr('data-value', encodeURIComponent(item))
+                            .attr('data-toggle', 'tooltip')
                             .attr('value', item)
                             .on('click', $.proxy(that.handle_click, that));
                         that.update_style_traits($item_element);
+                        $icon_element = $('<i class="fa"></i>').prependTo($item_element);
                     }
                     if (that.model.get('selected_label') == item) {
                         $item_element.addClass('active');
                     } else {
                         $item_element.removeClass('active');
                     }
-                    $item_element.prop('disabled', disabled); 
+                    $item_element.prop('disabled', disabled);
+                    $item_element.attr('title', that.model.get('tooltips')[index]);
+                    $icon_element
+                        .removeClass(previous_icons[index])
+                        .addClass(icons[index]);
                 });
                 
                 // Remove items that no longer exist.
                 this.$buttongroup.find('button').each(function(i, obj) {
                     var value = $(obj).attr('value');
                     var found = false;
                     _.each(items, function(item, index) {
                         if (item == value) {
                             found = true;
                             return false;
                         }
                     });
 
                     if (!found) {
                         $(obj).remove();
                     }
                 });
 
                 var description = this.model.get('description');
                 if (description.length === 0) {
                     this.$label.hide();
                 } else {
                     this.$label.text();
                     this.typeset(this.$label, description);
                     this.$label.show();
                 }
             }
             return ToggleButtonsView.__super__.update.apply(this);
         },
 
         update_attr: function(name, value) {
             /**
              * Set a css attr of the widget view.
              */
             if (name == 'padding' || name == 'margin') {
                 this.$el.css(name, value);
             } else {
                 this._css_state[name] = value;
                 this.update_style_traits();
             }
         },
 
         update_style_traits: function(button) {
             for (var name in this._css_state) {
                 if (this._css_state.hasOwnProperty(name)) {
                     if (name == 'margin') {
                         this.$buttongroup.css(name, this._css_state[name]);
                     } else if (name != 'width') {
                         if (button) {
                             button.css(name, this._css_state[name]);
                         } else {
                             this.$buttongroup.find('button').css(name, this._css_state[name]);
                         }
                     }
                 }
             }
         },
 
         update_button_style: function(previous_trait_value) {
             var class_map = {
                 primary: ['btn-primary'],
                 success: ['btn-success'],
                 info: ['btn-info'],
                 warning: ['btn-warning'],
                 danger: ['btn-danger']
             };
             this.update_mapped_classes(class_map, 'button_style', previous_trait_value, this.$buttongroup.find('button'));
         },
 
         handle_click: function (e) {
             /**
              * Handle when a value is clicked.
              *
              * Calling model.set will trigger all of the other views of the 
              * model to update.
              */
             this.model.set('selected_label', $(e.target).attr('value'), {updated_view: this});
             this.touch();
         },    
     });
     
 
     var SelectView = widget.DOMWidgetView.extend({    
         render : function(){
             /**
              * Called when view is rendered.
              */
             this.$el
                 .addClass('widget-hbox widget-select');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-label')
                 .hide();
             this.$listbox = $('<select />')
                 .addClass('widget-listbox form-control')
                 .attr('size', 6)
                 .appendTo(this.$el)
                 .on('change', $.proxy(this.handle_change, this));
             this.update();
         },
         
         update : function(options){
             /**
              * Update the contents of this view
              *
              * Called when the model is changed.  The model may have been 
              * changed by another view or by a state update from the back-end.
              */
             if (options === undefined || options.updated_view != this) {
                 // Add missing items to the DOM.
                 var items = this.model.get('_options_labels');
                 var that = this;
                 _.each(items, function(item, index) {
                    var item_query = 'option[data-value="' + encodeURIComponent(item) + '"]';
                     if (that.$listbox.find(item_query).length === 0) {
                         $('<option />')
                             .text(item)
                             .attr('data-value', encodeURIComponent(item))
                             .attr('selected_label', item)
                             .on("click", $.proxy(that.handle_click, that))
                             .appendTo(that.$listbox);
                     } 
                 });
 
                 // Select the correct element
                 this.$listbox.val(this.model.get('selected_label'));
                 
                 // Disable listbox if needed
                 var disabled = this.model.get('disabled');
                 this.$listbox.prop('disabled', disabled);
 
                 // Remove items that no longer exist.
                 this.$listbox.find('option').each(function(i, obj) {
                     var value = $(obj).text();
                     var found = false;
                     _.each(items, function(item, index) {
                         if (item == value) {
                             found = true;
                             return false;
                         }
                     });
                     
                     if (!found) {
                         $(obj).remove();
                     }
                 });
 
                 var description = this.model.get('description');
                 if (description.length === 0) {
                     this.$label.hide();
                 } else {
                     this.typeset(this.$label, description);
                     this.$label.show();
                 }
             }
             return SelectView.__super__.update.apply(this);
         },
 
         update_attr: function(name, value) {
             /**
              * Set a css attr of the widget view.
              */
             if (name == 'padding' || name == 'margin') {
                 this.$el.css(name, value);
             } else {
                 this.$listbox.css(name, value);
             }
         },
 
         handle_click: function (e) {
             /**
              * Handle when a new value is clicked.
              */
             this.$listbox.val($(e.target).val()).change();
         },
 
         handle_change: function (e) {
             /**
              * Handle when a new value is selected.
              *
              * Calling model.set will trigger all of the other views of the 
              * model to update.
              */
             this.model.set('selected_label', this.$listbox.val(), {updated_view: this});
             this.touch();
         },
     });
 
 
     var SelectMultipleView = SelectView.extend({
         render: function(){
             /**
              * Called when view is rendered.
              */
             SelectMultipleView.__super__.render.apply(this);
             this.$el.removeClass('widget-select')
               .addClass('widget-select-multiple');
             this.$listbox.attr('multiple', true)
               .on('change', $.proxy(this.handle_change, this));
             return this;
         },
 
         update: function(){
             /**
              * Update the contents of this view
              *
              * Called when the model is changed.  The model may have been 
              * changed by another view or by a state update from the back-end.
              */
             SelectMultipleView.__super__.update.apply(this, arguments);
             this.$listbox.val(this.model.get('selected_labels'));
         },
 
         handle_change: function (e) {
             /**
              * Handle when a new value is selected.
              *
              * Calling model.set will trigger all of the other views of the 
              * model to update.
              */
             this.model.set('selected_labels',
                 (this.$listbox.val() || []).slice(),
                 {updated_view: this});
             this.touch();
         },
     });
     
 
     return {
         'DropdownView': DropdownView,
         'RadioButtonsView': RadioButtonsView,
         'ToggleButtonsView': ToggleButtonsView,
         'SelectView': SelectView,
         'SelectMultipleView': SelectMultipleView,
     };
 });

IPython/html/tests/widgets/widget_bool.js

@@ -1,92 +1,92 b''
 // Test widget bool class
 casper.notebook_test(function () {
     "use strict";
 
     // Create a checkbox and togglebutton.
     var bool_index = this.append_cell(
         'from IPython.html import widgets\n' + 
         'from IPython.display import display, clear_output\n' +
         'bool_widgets = [widgets.Checkbox(description="Title", value=True),\n' +
         '    widgets.ToggleButton(description="Title", value=True)]\n' +
         'display(bool_widgets[0])\n' +
         'display(bool_widgets[1])\n' +
         'print("Success")');
     this.execute_cell_then(bool_index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Create bool widget cell executed with correct output.');
     });
 
     // Wait for the widgets to actually display.
     var widget_checkbox_selector = '.widget-area .widget-subarea .widget-hbox input';
     var widget_togglebutton_selector = '.widget-area .widget-subarea button';
     this.wait_for_element(bool_index, widget_checkbox_selector);
     this.wait_for_element(bool_index, widget_togglebutton_selector);
 
     // Continue the tests.
     this.then(function() {
         this.test.assert(this.cell_element_exists(bool_index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
         this.test.assert(this.cell_element_exists(bool_index, 
             widget_checkbox_selector),
             'Checkbox exists.');
 
         this.test.assert(this.cell_element_function(bool_index, 
             widget_checkbox_selector, 'prop', ['checked']),
             'Checkbox is checked.');
 
         this.test.assert(this.cell_element_exists(bool_index, 
             '.widget-area .widget-subarea .widget-hbox .widget-label'),
             'Checkbox label exists.');
 
         this.test.assert(this.cell_element_function(bool_index, 
             '.widget-area .widget-subarea .widget-hbox .widget-label', 'html')=="Title",
             'Checkbox labeled correctly.');
 
         this.test.assert(this.cell_element_exists(bool_index, 
             widget_togglebutton_selector),
             'Toggle button exists.');
 
         this.test.assert(this.cell_element_function(bool_index, 
-            widget_togglebutton_selector, 'html')=="Title",
+            widget_togglebutton_selector, 'html')=='<i class="fa"></i>Title',
             'Toggle button labeled correctly.');
 
         this.test.assert(this.cell_element_function(bool_index, 
             widget_togglebutton_selector, 'hasClass', ['active']),
             'Toggle button is toggled.');
     });
 
     // Try changing the state of the widgets programatically.
     var index = this.append_cell(
         'bool_widgets[0].value = False\n' +
         'bool_widgets[1].value = False\n' +
         'print("Success")');
     this.execute_cell_then(index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Change bool widget value cell executed with correct output.');
 
         this.test.assert(! this.cell_element_function(bool_index, 
             widget_checkbox_selector, 'prop', ['checked']),
             'Checkbox is not checked. (1)');
 
         this.test.assert(! this.cell_element_function(bool_index, 
             widget_togglebutton_selector, 'hasClass', ['active']),
             'Toggle button is not toggled. (1)');
  
         // Try toggling the bool by clicking on the checkbox.
         this.cell_element_function(bool_index, widget_checkbox_selector, 'click');
 
         this.test.assert(this.cell_element_function(bool_index, 
             widget_checkbox_selector, 'prop', ['checked']),
             'Checkbox is checked. (2)');
 
         // Try toggling the bool by clicking on the toggle button.
         this.cell_element_function(bool_index, widget_togglebutton_selector, 'click');
 
         this.test.assert(this.cell_element_function(bool_index, 
             widget_togglebutton_selector, 'hasClass', ['active']),
             'Toggle button is toggled. (3)');
 
     });
 });

IPython/html/tests/widgets/widget_button.js

@@ -1,48 +1,48 b''
 // Test widget button class
 casper.notebook_test(function () {
     var button_index = this.append_cell(
         'from IPython.html import widgets\n' + 
         'from IPython.display import display, clear_output\n' +
         'button = widgets.Button(description="Title")\n' +
         'display(button)\n' +
         'print("Success")\n' +
         'def handle_click(sender):\n' +
         '    display("Clicked")\n' +
         'button.on_click(handle_click)');
     this.execute_cell_then(button_index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n',
             'Create button cell executed with correct output.');
     });
 
     // Wait for the widgets to actually display.
     var widget_button_selector = '.widget-area .widget-subarea button';
     this.wait_for_element(button_index, widget_button_selector);
 
     // Continue with the tests.
     this.then(function() {
         this.test.assert(this.cell_element_exists(button_index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
         this.test.assert(this.cell_element_exists(button_index, 
             widget_button_selector),
             'Widget button exists.');
 
         this.test.assert(this.cell_element_function(button_index, 
-            widget_button_selector, 'html')=='Title',
+            widget_button_selector, 'html')=='<i class="fa"></i>Title',
             'Set button description.');
 
         this.cell_element_function(button_index, 
             widget_button_selector, 'click');
     });
 
     this.wait_for_output(button_index, 1);
 
     this.then(function () {
         var warning_text = this.get_output_cell(button_index, 1).text;
         this.test.assertNotEquals(warning_text.indexOf('Warning'), -1,
             'Importing widgets show a warning');
         this.test.assertEquals(this.get_output_cell(button_index, 2).data['text/plain'], "'Clicked'",
             'Button click event fires.');
     });
 });

IPython/html/widgets/widget_bool.py

@@ -1,71 +1,76 b''
 """Bool class.  
 
 Represents a boolean using a widget.
 """
 #-----------------------------------------------------------------------------
 # Copyright (c) 2013, the IPython Development Team.
 #
 # Distributed under the terms of the Modified BSD License.
 #
 # The full license is in the file COPYING.txt, distributed with this software.
 #-----------------------------------------------------------------------------
 
 #-----------------------------------------------------------------------------
 # Imports
 #-----------------------------------------------------------------------------
 from .widget import DOMWidget, register
 from IPython.utils.traitlets import Unicode, Bool, CaselessStrEnum
 from IPython.utils.warn import DeprecatedClass
 
 #-----------------------------------------------------------------------------
 # Classes
 #-----------------------------------------------------------------------------
 class _Bool(DOMWidget):
     """A base class for creating widgets that represent booleans."""
     value = Bool(False, help="Bool value", sync=True)
     description = Unicode('', help="Description of the boolean (label).", sync=True)
     disabled = Bool(False, help="Enable or disable user changes.", sync=True)
 
     def __init__(self, value=None, **kwargs):
         if value is not None:
             kwargs['value'] = value
         super(_Bool, self).__init__(**kwargs)
 
 @register('IPython.Checkbox')
 class Checkbox(_Bool):
     """Displays a boolean `value` in the form of a checkbox.
 
        Parameters
        ----------
        value : {True,False}
            value of the checkbox: True-checked, False-unchecked
        description : str
 	   description displayed next to the checkbox
 """
     _view_name = Unicode('CheckboxView', sync=True)
 
 
 @register('IPython.ToggleButton')
 class ToggleButton(_Bool):
     """Displays a boolean `value` in the form of a toggle button.
 
        Parameters
        ----------
        value : {True,False}
            value of the toggle button: True-pressed, False-unpressed
        description : str
 	   description displayed next to the button
+       tooltip: str
+           tooltip caption of the toggle button
+       icon: str
+           font-awesome icon name
 """
     
     _view_name = Unicode('ToggleButtonView', sync=True)
     tooltip = Unicode(help="Tooltip caption of the toggle button.", sync=True)
+    icon = Unicode('', help= "Font-awesome icon.", sync=True)
 
     button_style = CaselessStrEnum(
         values=['primary', 'success', 'info', 'warning', 'danger', ''], 
         default_value='', allow_none=True, sync=True, help="""Use a
         predefined styling for the button.""")
 
 
 # Remove in IPython 4.0
 CheckboxWidget = DeprecatedClass(Checkbox, 'CheckboxWidget')
 ToggleButtonWidget = DeprecatedClass(ToggleButton, 'ToggleButtonWidget')

IPython/html/widgets/widget_button.py

@@ -1,72 +1,82 b''
 """Button class.  
 
 Represents a button in the frontend using a widget.  Allows user to listen for
 click events on the button and trigger backend code when the clicks are fired.
 """
 #-----------------------------------------------------------------------------
 # Copyright (c) 2013, the IPython Development Team.
 #
 # Distributed under the terms of the Modified BSD License.
 #
 # The full license is in the file COPYING.txt, distributed with this software.
 #-----------------------------------------------------------------------------
 
 #-----------------------------------------------------------------------------
 # Imports
 #-----------------------------------------------------------------------------
 from .widget import DOMWidget, CallbackDispatcher, register
 from IPython.utils.traitlets import Unicode, Bool, CaselessStrEnum
 from IPython.utils.warn import DeprecatedClass
 
 #-----------------------------------------------------------------------------
 # Classes
 #-----------------------------------------------------------------------------
 @register('IPython.Button')
 class Button(DOMWidget):
     """Button widget.
+       This widget has an `on_click` method that allows you to listen for the 
+       user clicking on the button.  The click event itself is stateless.
 
-    This widget has an `on_click` method that allows you to listen for the 
-    user clicking on the button.  The click event itself is stateless."""
+       Parameters
+       ----------
+       description : str
+           description displayed next to the button
+       tooltip: str
+           tooltip caption of the toggle button
+       icon: str
+           font-awesome icon name
+    """
     _view_name = Unicode('ButtonView', sync=True)
 
     # Keys
     description = Unicode('', help="Button label.", sync=True)
     tooltip = Unicode(help="Tooltip caption of the button.", sync=True)
     disabled = Bool(False, help="Enable or disable user changes.", sync=True)
+    icon = Unicode('', help= "Font-awesome icon.", sync=True)
 
     button_style = CaselessStrEnum(
         values=['primary', 'success', 'info', 'warning', 'danger', ''], 
         default_value='', allow_none=True, sync=True, help="""Use a
         predefined styling for the button.""")
     
     def __init__(self, **kwargs):
         """Constructor"""
         super(Button, self).__init__(**kwargs)
         self._click_handlers = CallbackDispatcher()
         self.on_msg(self._handle_button_msg)
 
     def on_click(self, callback, remove=False):
         """Register a callback to execute when the button is clicked.
 
         The callback will be called with one argument,
         the clicked button widget instance.
 
         Parameters
         ----------
         remove : bool (optional)
             Set to true to remove the callback from the list of callbacks."""
         self._click_handlers.register_callback(callback, remove=remove)
 
     def _handle_button_msg(self, _, content):
         """Handle a msg from the front-end.
 
         Parameters
         ----------
         content: dict
             Content of the msg."""
         if content.get('event', '') == 'click':
             self._click_handlers(self)
 
 
 # Remove in IPython 4.0
 ButtonWidget = DeprecatedClass(Button, 'ButtonWidget')

IPython/html/widgets/widget_selection.py

@@ -1,240 +1,248 b''
 """Selection classes.
 
 Represents an enumeration using a widget.
 """
 #-----------------------------------------------------------------------------
 # Copyright (c) 2013, the IPython Development Team.
 #
 # Distributed under the terms of the Modified BSD License.
 #
 # The full license is in the file COPYING.txt, distributed with this software.
 #-----------------------------------------------------------------------------
 
 #-----------------------------------------------------------------------------
 # Imports
 #-----------------------------------------------------------------------------
 
 from collections import OrderedDict
 from threading import Lock
 
 from .widget import DOMWidget, register
 from IPython.utils.traitlets import (
-    Unicode, Bool, Any, Dict, TraitError, CaselessStrEnum, Tuple
+    Unicode, Bool, Any, Dict, TraitError, CaselessStrEnum, Tuple, List
 )
 from IPython.utils.py3compat import unicode_type
 from IPython.utils.warn import DeprecatedClass
 
 #-----------------------------------------------------------------------------
 # SelectionWidget
 #-----------------------------------------------------------------------------
 class _Selection(DOMWidget):
     """Base class for Selection widgets
     
     ``options`` can be specified as a list or dict. If given as a list,
     it will be transformed to a dict of the form ``{str(value):value}``.
+
+    When programmatically setting the value, a reverse lookup is performed
+    among the options to set the value of ``selected_label`` accordingly. The
+    reverse lookup uses the equality operator by default, but an other
+    predicate may be provided via the ``equals`` argument. For example, when
+    dealing with numpy arrays, one may set equals=np.array_equal.
     """
     
     value = Any(help="Selected value")
     selected_label = Unicode(help="The label of the selected value", sync=True)
     options = Any(help="""List of (key, value) tuples or dict of values that the
         user can select.
     
     The keys of this list are the strings that will be displayed in the UI,
     representing the actual Python choices.
     
     The keys of this list are also available as _options_labels.
     """)
     
     _options_dict = Dict()
     _options_labels = Tuple(sync=True)
     _options_values = Tuple()
 
     disabled = Bool(False, help="Enable or disable user changes", sync=True)
     description = Unicode(help="Description of the value this widget represents", sync=True)
         
     def __init__(self, *args, **kwargs):
         self.value_lock = Lock()
         self.options_lock = Lock()
         self.equals = kwargs.pop('equals', lambda x, y: x == y)
         self.on_trait_change(self._options_readonly_changed, ['_options_dict', '_options_labels', '_options_values', '_options'])
         if 'options' in kwargs:
             self.options = kwargs.pop('options')
         DOMWidget.__init__(self, *args, **kwargs)
         self._value_in_options()
     
     def _make_options(self, x):
         # If x is a dict, convert it to list format.
         if isinstance(x, (OrderedDict, dict)):
             return [(k, v) for k, v in x.items()]
         
         # Make sure x is a list or tuple.
         if not isinstance(x, (list, tuple)):
             raise ValueError('x')
         
         # If x is an ordinary list, use the option values as names.
         for y in x:
             if not isinstance(y, (list, tuple)) or len(y) < 2:
                 return [(i, i) for i in x]
         
         # Value is already in the correct format.
         return x
 
     def _options_changed(self, name, old, new):
         """Handles when the options tuple has been changed.
 
         Setting options implies setting option labels from the keys of the dict.
         """
         if self.options_lock.acquire(False):
             try:
                 self.options = new
 
                 options = self._make_options(new)
                 self._options_dict = {i[0]: i[1] for i in options}
                 self._options_labels = [i[0] for i in options]
                 self._options_values = [i[1] for i in options]
                 self._value_in_options()
             finally:
                 self.options_lock.release()
         
     def _value_in_options(self):
         # ensure that the chosen value is one of the choices
     
         if self._options_values:
             if self.value not in self._options_values:
                 self.value = next(iter(self._options_values))
 
     def _options_readonly_changed(self, name, old, new):
         if not self.options_lock.locked():
             raise TraitError("`.%s` is a read-only trait. Use the `.options` tuple instead." % name)
 
     def _value_changed(self, name, old, new):
         """Called when value has been changed"""
         if self.value_lock.acquire(False):
             try:
                 # Reverse dictionary lookup for the value name
                 for k, v in self._options_dict.items():
                     if self.equals(new, v):
                         # set the selected value name
                         self.selected_label = k
                         return
                 # undo the change, and raise KeyError
                 self.value = old
                 raise KeyError(new)
             finally:
                 self.value_lock.release()
 
     def _selected_label_changed(self, name, old, new):
         """Called when the value name has been changed (typically by the frontend)."""
         if self.value_lock.acquire(False):
             try:
                 self.value = self._options_dict[new]
             finally:
                 self.value_lock.release()
 
 
 class _MultipleSelection(_Selection):
     """Base class for MultipleSelection widgets.
 
     As with ``_Selection``, ``options`` can be specified as a list or dict. If
     given as a list, it will be transformed to a dict of the form
     ``{str(value): value}``.
 
     Despite their names, ``value`` (and ``selected_label``) will be tuples, even
     if only a single option is selected.
     """
 
     value = Tuple(help="Selected values")
     selected_labels = Tuple(help="The labels of the selected options",
                             sync=True)
 
     @property
     def selected_label(self):
         raise AttributeError(
             "Does not support selected_label, use selected_labels")
 
     def _value_in_options(self):
         # ensure that the chosen value is one of the choices
         if self.options:
             old_value = self.value or []
             new_value = []
             for value in old_value:
                 if value in self._options_dict.values():
                     new_value.append(value)
             if new_value:
                 self.value = new_value
             else:
                 self.value = [next(iter(self._options_dict.values()))]
 
     def _value_changed(self, name, old, new):
         """Called when value has been changed"""
         if self.value_lock.acquire(False):
             try:
                 self.selected_labels = [
                     self._options_labels[self._options_values.index(v)]
                     for v in new
                 ]
             except:
                 self.value = old
                 raise KeyError(new)
             finally:
                 self.value_lock.release()
 
     def _selected_labels_changed(self, name, old, new):
         """Called when the selected label has been changed (typically by the
         frontend)."""
         if self.value_lock.acquire(False):
             try:
                 self.value = [self._options_dict[name] for name in new]
             finally:
                 self.value_lock.release()
 
 
 @register('IPython.ToggleButtons')
 class ToggleButtons(_Selection):
     """Group of toggle buttons that represent an enumeration.  Only one toggle
     button can be toggled at any point in time.""" 
     _view_name = Unicode('ToggleButtonsView', sync=True)
+    tooltips = List(Unicode(), sync=True)
+    icons = List(Unicode(), sync=True)
 
     button_style = CaselessStrEnum(
         values=['primary', 'success', 'info', 'warning', 'danger', ''], 
         default_value='', allow_none=True, sync=True, help="""Use a
         predefined styling for the buttons.""")
 
 @register('IPython.Dropdown')
 class Dropdown(_Selection):
     """Allows you to select a single item from a dropdown."""
     _view_name = Unicode('DropdownView', sync=True)
 
     button_style = CaselessStrEnum(
         values=['primary', 'success', 'info', 'warning', 'danger', ''], 
         default_value='', allow_none=True, sync=True, help="""Use a
         predefined styling for the buttons.""")
 
 @register('IPython.RadioButtons')
 class RadioButtons(_Selection):
     """Group of radio buttons that represent an enumeration.  Only one radio
     button can be toggled at any point in time.""" 
     _view_name = Unicode('RadioButtonsView', sync=True)
     
 
 
 @register('IPython.Select')
 class Select(_Selection):
     """Listbox that only allows one item to be selected at any given time."""
     _view_name = Unicode('SelectView', sync=True)
 
 
 @register('IPython.SelectMultiple')
 class SelectMultiple(_MultipleSelection):
     """Listbox that allows many items to be selected at any given time.
     Despite their names, inherited from ``_Selection``, the currently chosen
     option values, ``value``, or their labels, ``selected_labels`` must both be
     updated with a list-like object."""
     _view_name = Unicode('SelectMultipleView', sync=True)
 
 
 # Remove in IPython 4.0
 ToggleButtonsWidget = DeprecatedClass(ToggleButtons, 'ToggleButtonsWidget')
 DropdownWidget = DeprecatedClass(Dropdown, 'DropdownWidget')
 RadioButtonsWidget = DeprecatedClass(RadioButtons, 'RadioButtonsWidget')
 SelectWidget = DeprecatedClass(Select, 'SelectWidget')