Merge pull request #1 from ipython/master

Update from ipython/ipython:master

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,34 +307,44 @@ 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')
                             .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.

IPython/html/static/widgets/less/widgets.less

@@ -271,9 +271,6 @@
 
     label {
         margin-top: 0px;
+        margin-left: 20px;
     }
 }
-
-.widget-radio {
-    margin-left: 20px;
-}

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 @@
 @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 .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', ''], 

examples/Interactive Widgets/Widget Events.ipynb

@@ -307,7 +307,7 @@
     "range1, range2, range3 = widgets.IntSlider(description='Range 1'),\\\n",
     "                         widgets.IntSlider(description='Range 2'),\\\n",
     "                         widgets.IntSlider(description='Range 3')\n",
-    "l = widgets.link((range1, 'value'), (range2, 'value'), (range3, 'value'))\n",
+    "l = widgets.jslink((range1, 'value'), (range2, 'value'), (range3, 'value'))\n",
     "display(caption, range1, range2, range3)"
    ]
   },
@@ -323,7 +323,7 @@
     "source_range, target_range1, target_range2 = widgets.IntSlider(description='Source range'),\\\n",
     "                                             widgets.IntSlider(description='Target range 1'),\\\n",
     "                                             widgets.IntSlider(description='Target range 2')\n",
-    "widgets.dlink((source_range, 'value'), (target_range1, 'value'), (target_range2, 'value'))\n",
+    "widgets.jsdlink((source_range, 'value'), (target_range1, 'value'), (target_range2, 'value'))\n",
     "display(caption, source_range, target_range1, target_range2)"
    ]
   },