Font-awesome icons for toggle buttons

This commit is contained in:
Sylvain Corlay 2015-02-15 02:20:58 -05:00
parent 829d25bdfd
commit a70b65b5b4
2 changed files with 11 additions and 2 deletions

View File

@ -307,17 +307,21 @@ define([
if (options === undefined || options.updated_view != this) { if (options === undefined || options.updated_view != this) {
// Add missing items to the DOM. // Add missing items to the DOM.
var items = this.model.get('_options_labels'); 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 disabled = this.model.get('disabled');
var that = this; var that = this;
var item_html; var item_html;
_.each(items, function(item, index) { _.each(items, function(item, index) {
if (item.trim().length === 0) { if (item.trim().length === 0 && (!icons[index] ||
icons[index].trim().length === 0)) {
item_html = " "; item_html = " ";
} else { } else {
item_html = utils.escape_html(item); item_html = utils.escape_html(item);
} }
var item_query = '[data-value="' + encodeURIComponent(item) + '"]'; var item_query = '[data-value="' + encodeURIComponent(item) + '"]';
var $item_element = that.$buttongroup.find(item_query); var $item_element = that.$buttongroup.find(item_query);
var $icon_element = $item_element.find('.fa');
if (!$item_element.length) { if (!$item_element.length) {
$item_element = $('<button/>') $item_element = $('<button/>')
.attr('type', 'button') .attr('type', 'button')
@ -329,6 +333,7 @@ define([
.attr('value', item) .attr('value', item)
.on('click', $.proxy(that.handle_click, that)); .on('click', $.proxy(that.handle_click, that));
that.update_style_traits($item_element); that.update_style_traits($item_element);
$icon_element = $('<i class="fa"></i>').prependTo($item_element);
} }
if (that.model.get('selected_label') == item) { if (that.model.get('selected_label') == item) {
$item_element.addClass('active'); $item_element.addClass('active');
@ -337,6 +342,9 @@ define([
} }
$item_element.prop('disabled', disabled); $item_element.prop('disabled', disabled);
$item_element.attr('title', that.model.get('tooltips')[index]); $item_element.attr('title', that.model.get('tooltips')[index]);
$icon_element
.removeClass(previous_icons[index])
.addClass(icons[index]);
}); });
// Remove items that no longer exist. // Remove items that no longer exist.

View File

@ -201,6 +201,7 @@ class ToggleButtons(_Selection):
button can be toggled at any point in time.""" button can be toggled at any point in time."""
_view_name = Unicode('ToggleButtonsView', sync=True) _view_name = Unicode('ToggleButtonsView', sync=True)
tooltips = List(Unicode(), sync=True) tooltips = List(Unicode(), sync=True)
icons = List(Unicode(), sync=True)
button_style = CaselessStrEnum( button_style = CaselessStrEnum(
values=['primary', 'success', 'info', 'warning', 'danger', ''], values=['primary', 'success', 'info', 'warning', 'danger', ''],