Show More
@@ -307,17 +307,21 b' define([' | |||||
307 | if (options === undefined || options.updated_view != this) { |
|
307 | if (options === undefined || options.updated_view != this) { | |
308 | // Add missing items to the DOM. |
|
308 | // Add missing items to the DOM. | |
309 | var items = this.model.get('_options_labels'); |
|
309 | var items = this.model.get('_options_labels'); | |
|
310 | var icons = this.model.get('icons'); | |||
|
311 | var previous_icons = this.model.previous('icons') || []; | |||
310 | var disabled = this.model.get('disabled'); |
|
312 | var disabled = this.model.get('disabled'); | |
311 | var that = this; |
|
313 | var that = this; | |
312 | var item_html; |
|
314 | var item_html; | |
313 | _.each(items, function(item, index) { |
|
315 | _.each(items, function(item, index) { | |
314 |
if (item.trim().length === 0 |
|
316 | if (item.trim().length === 0 && (!icons[index] || | |
|
317 | icons[index].trim().length === 0)) { | |||
315 | item_html = " "; |
|
318 | item_html = " "; | |
316 | } else { |
|
319 | } else { | |
317 | item_html = utils.escape_html(item); |
|
320 | item_html = utils.escape_html(item); | |
318 | } |
|
321 | } | |
319 | var item_query = '[data-value="' + encodeURIComponent(item) + '"]'; |
|
322 | var item_query = '[data-value="' + encodeURIComponent(item) + '"]'; | |
320 | var $item_element = that.$buttongroup.find(item_query); |
|
323 | var $item_element = that.$buttongroup.find(item_query); | |
|
324 | var $icon_element = $item_element.find('.fa'); | |||
321 | if (!$item_element.length) { |
|
325 | if (!$item_element.length) { | |
322 | $item_element = $('<button/>') |
|
326 | $item_element = $('<button/>') | |
323 | .attr('type', 'button') |
|
327 | .attr('type', 'button') | |
@@ -329,6 +333,7 b' define([' | |||||
329 | .attr('value', item) |
|
333 | .attr('value', item) | |
330 | .on('click', $.proxy(that.handle_click, that)); |
|
334 | .on('click', $.proxy(that.handle_click, that)); | |
331 | that.update_style_traits($item_element); |
|
335 | that.update_style_traits($item_element); | |
|
336 | $icon_element = $('<i class="fa"></i>').prependTo($item_element); | |||
332 | } |
|
337 | } | |
333 | if (that.model.get('selected_label') == item) { |
|
338 | if (that.model.get('selected_label') == item) { | |
334 | $item_element.addClass('active'); |
|
339 | $item_element.addClass('active'); | |
@@ -336,7 +341,10 b' define([' | |||||
336 | $item_element.removeClass('active'); |
|
341 | $item_element.removeClass('active'); | |
337 | } |
|
342 | } | |
338 | $item_element.prop('disabled', disabled); |
|
343 | $item_element.prop('disabled', disabled); | |
339 |
$item_element.attr('title', that.model.get('tooltips')[index]); |
|
344 | $item_element.attr('title', that.model.get('tooltips')[index]); | |
|
345 | $icon_element | |||
|
346 | .removeClass(previous_icons[index]) | |||
|
347 | .addClass(icons[index]); | |||
340 | }); |
|
348 | }); | |
341 |
|
349 | |||
342 | // Remove items that no longer exist. |
|
350 | // Remove items that no longer exist. |
@@ -201,6 +201,7 b' class ToggleButtons(_Selection):' | |||||
201 | button can be toggled at any point in time.""" |
|
201 | button can be toggled at any point in time.""" | |
202 | _view_name = Unicode('ToggleButtonsView', sync=True) |
|
202 | _view_name = Unicode('ToggleButtonsView', sync=True) | |
203 | tooltips = List(Unicode(), sync=True) |
|
203 | tooltips = List(Unicode(), sync=True) | |
|
204 | icons = List(Unicode(), sync=True) | |||
204 |
|
205 | |||
205 | button_style = CaselessStrEnum( |
|
206 | button_style = CaselessStrEnum( | |
206 | values=['primary', 'success', 'info', 'warning', 'danger', ''], |
|
207 | values=['primary', 'success', 'info', 'warning', 'danger', ''], |
General Comments 0
You need to be logged in to leave comments.
Login now