diff --git a/IPython/html/static/widgets/js/widget_bool.js b/IPython/html/static/widgets/js/widget_bool.js
index 0234054..dc107ec 100644
--- a/IPython/html/static/widgets/js/widget_bool.js
+++ b/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);
+ $('').prependTo(this.$el).addClass(icon);
}
}
return ToggleButtonView.__super__.update.apply(this);
diff --git a/IPython/html/static/widgets/js/widget_button.js b/IPython/html/static/widgets/js/widget_button.js
index c476581..a2e6bd4 100644
--- a/IPython/html/static/widgets/js/widget_button.js
+++ b/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');
+ $('').prependTo(this.$el).addClass(icon);
}
return ButtonView.__super__.update.apply(this);
diff --git a/IPython/html/static/widgets/js/widget_selection.js b/IPython/html/static/widgets/js/widget_selection.js
index c487834..1eb7550 100644
--- a/IPython/html/static/widgets/js/widget_selection.js
+++ b/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 = $('')
.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 = $('').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.
diff --git a/IPython/html/tests/widgets/widget_bool.js b/IPython/html/tests/widgets/widget_bool.js
index 1d3ec62..556031c 100644
--- a/IPython/html/tests/widgets/widget_bool.js
+++ b/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')=='Title',
'Toggle button labeled correctly.');
this.test.assert(this.cell_element_function(bool_index,
diff --git a/IPython/html/tests/widgets/widget_button.js b/IPython/html/tests/widgets/widget_button.js
index e98da48..97ea5ee 100644
--- a/IPython/html/tests/widgets/widget_button.js
+++ b/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')=='Title',
'Set button description.');
this.cell_element_function(button_index,
diff --git a/IPython/html/widgets/widget_bool.py b/IPython/html/widgets/widget_bool.py
index a6f1ff5..976c721 100644
--- a/IPython/html/widgets/widget_bool.py
+++ b/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', ''],
diff --git a/IPython/html/widgets/widget_button.py b/IPython/html/widgets/widget_button.py
index e91f3d2..4d5549c 100644
--- a/IPython/html/widgets/widget_button.py
+++ b/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', ''],
diff --git a/IPython/html/widgets/widget_selection.py b/IPython/html/widgets/widget_selection.py
index 228498b..091ed41 100644
--- a/IPython/html/widgets/widget_selection.py
+++ b/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', ''],