Merge pull request #7725 from SylvainCorlay/fabutton

Adding font-awesome icon to button and toggle button

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

@@ -59,10 +59,9 @@ define([
             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 {
@@ -113,7 +112,7 @@ define([
             /**
              * 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')) {
@@ -123,16 +122,16 @@ define([
             }
 
             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(" "); // Preserve button height
                 } else {
                     this.$el.text(description);
+                    $('<i class="fa"></i>').prependTo(this.$el).addClass(icon);
                 }
             }
             return ToggleButtonView.__super__.update.apply(this);

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

@@ -27,21 +27,19 @@ define([
             /**
              * 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(" "); // 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);

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

@@ -307,17 +307,21 @@ define([
             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 = " ";
                     } 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')
@@ -325,16 +329,22 @@ define([
                             .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.

IPython/html/tests/widgets/widget_bool.js

@@ -49,7 +49,7 @@ casper.notebook_test(function () {
             '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, 

IPython/html/tests/widgets/widget_button.js

@@ -29,7 +29,7 @@ casper.notebook_test(function () {
             '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, 

IPython/html/widgets/widget_bool.py

@@ -55,10 +55,15 @@ class ToggleButton(_Bool):
            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', ''], 

IPython/html/widgets/widget_button.py

@@ -24,15 +24,25 @@ from IPython.utils.warn import DeprecatedClass
 @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', ''], 

IPython/html/widgets/widget_selection.py

@@ -19,7 +19,7 @@ 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
@@ -32,6 +32,12 @@ class _Selection(DOMWidget):
     
     ``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")
@@ -194,6 +200,8 @@ 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', ''],