Show More
@@ -59,10 +59,9 b' define([' | |||
|
59 | 59 | this.$checkbox.prop('checked', this.model.get('value')); |
|
60 | 60 | |
|
61 | 61 | if (options === undefined || options.updated_view != this) { |
|
62 |
|
|
|
63 | this.$checkbox.prop('disabled', disabled); | |
|
62 | this.$checkbox.prop("disabled", this.model.get("disabled")); | |
|
64 | 63 | |
|
65 |
var description = this.model.get( |
|
|
64 | var description = this.model.get("description"); | |
|
66 | 65 | if (description.trim().length === 0) { |
|
67 | 66 | this.$label.hide(); |
|
68 | 67 | } else { |
@@ -123,16 +122,16 b' define([' | |||
|
123 | 122 | } |
|
124 | 123 | |
|
125 | 124 | if (options === undefined || options.updated_view != this) { |
|
126 | ||
|
127 | var disabled = this.model.get('disabled'); | |
|
128 | this.$el.prop('disabled', disabled); | |
|
129 | ||
|
130 | var description = this.model.get('description'); | |
|
125 | this.$el.prop("disabled", this.model.get("disabled")); | |
|
131 | 126 | this.$el.attr("title", this.model.get("tooltip")); |
|
132 | if (description.trim().length === 0) { | |
|
127 | ||
|
128 | var description = this.model.get("description"); | |
|
129 | var icon = this.model.get("icon"); | |
|
130 | if (description.trim().length === 0 && icon.trim().length ===0) { | |
|
133 | 131 | this.$el.html(" "); // Preserve button height |
|
134 | 132 | } else { |
|
135 | 133 | this.$el.text(description); |
|
134 | $('<i class="fa"></i>').prependTo(this.$el).addClass(icon); | |
|
136 | 135 | } |
|
137 | 136 | } |
|
138 | 137 | return ToggleButtonView.__super__.update.apply(this); |
@@ -30,18 +30,16 b' define([' | |||
|
30 | 30 |
* Called when the model is changed. |
|
31 | 31 | * changed by another view or by a state update from the back-end. |
|
32 | 32 | */ |
|
33 | var description = this.model.get('description'); | |
|
33 | this.$el.prop("disabled", this.model.get("disabled")); | |
|
34 | 34 | this.$el.attr("title", this.model.get("tooltip")); |
|
35 | if (description.length === 0) { | |
|
35 | ||
|
36 | var description = this.model.get("description"); | |
|
37 | var icon = this.model.get("icon"); | |
|
38 | if (description.trim().length === 0 && icon.trim().length ===0) { | |
|
36 | 39 | this.$el.html(" "); // Preserve button height |
|
37 | 40 | } else { |
|
38 | 41 | this.$el.text(description); |
|
39 | } | |
|
40 | ||
|
41 | if (this.model.get('disabled')) { | |
|
42 | this.$el.attr('disabled','disabled'); | |
|
43 | } else { | |
|
44 | this.$el.removeAttr('disabled'); | |
|
42 | $('<i class="fa"></i>').prependTo(this.$el).addClass(icon); | |
|
45 | 43 | } |
|
46 | 44 | |
|
47 | 45 | return ButtonView.__super__.update.apply(this); |
@@ -307,17 +307,21 b' define([' | |||
|
307 | 307 | if (options === undefined || options.updated_view != this) { |
|
308 | 308 | // Add missing items to the DOM. |
|
309 | 309 | var items = this.model.get('_options_labels'); |
|
310 | var icons = this.model.get('icons'); | |
|
311 | var previous_icons = this.model.previous('icons') || []; | |
|
310 | 312 | var disabled = this.model.get('disabled'); |
|
311 | 313 | var that = this; |
|
312 | 314 | var item_html; |
|
313 | 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 | 318 | item_html = " "; |
|
316 | 319 | } else { |
|
317 | 320 | item_html = utils.escape_html(item); |
|
318 | 321 | } |
|
319 | 322 | var item_query = '[data-value="' + encodeURIComponent(item) + '"]'; |
|
320 | 323 | var $item_element = that.$buttongroup.find(item_query); |
|
324 | var $icon_element = $item_element.find('.fa'); | |
|
321 | 325 | if (!$item_element.length) { |
|
322 | 326 | $item_element = $('<button/>') |
|
323 | 327 | .attr('type', 'button') |
@@ -325,9 +329,11 b' define([' | |||
|
325 | 329 | .html(item_html) |
|
326 | 330 | .appendTo(that.$buttongroup) |
|
327 | 331 | .attr('data-value', encodeURIComponent(item)) |
|
332 | .attr('data-toggle', 'tooltip') | |
|
328 | 333 | .attr('value', item) |
|
329 | 334 | .on('click', $.proxy(that.handle_click, that)); |
|
330 | 335 | that.update_style_traits($item_element); |
|
336 | $icon_element = $('<i class="fa"></i>').prependTo($item_element); | |
|
331 | 337 | } |
|
332 | 338 | if (that.model.get('selected_label') == item) { |
|
333 | 339 | $item_element.addClass('active'); |
@@ -335,6 +341,10 b' define([' | |||
|
335 | 341 | $item_element.removeClass('active'); |
|
336 | 342 | } |
|
337 | 343 |
$item_element.prop('disabled', disabled); |
|
344 | $item_element.attr('title', that.model.get('tooltips')[index]); | |
|
345 | $icon_element | |
|
346 | .removeClass(previous_icons[index]) | |
|
347 | .addClass(icons[index]); | |
|
338 | 348 | }); |
|
339 | 349 | |
|
340 | 350 | // Remove items that no longer exist. |
@@ -49,7 +49,7 b' casper.notebook_test(function () {' | |||
|
49 | 49 | 'Toggle button exists.'); |
|
50 | 50 | |
|
51 | 51 | this.test.assert(this.cell_element_function(bool_index, |
|
52 |
widget_togglebutton_selector, 'html')== |
|
|
52 | widget_togglebutton_selector, 'html')=='<i class="fa"></i>Title', | |
|
53 | 53 | 'Toggle button labeled correctly.'); |
|
54 | 54 | |
|
55 | 55 | this.test.assert(this.cell_element_function(bool_index, |
@@ -29,7 +29,7 b' casper.notebook_test(function () {' | |||
|
29 | 29 | 'Widget button exists.'); |
|
30 | 30 | |
|
31 | 31 | this.test.assert(this.cell_element_function(button_index, |
|
32 | widget_button_selector, 'html')=='Title', | |
|
32 | widget_button_selector, 'html')=='<i class="fa"></i>Title', | |
|
33 | 33 | 'Set button description.'); |
|
34 | 34 | |
|
35 | 35 | this.cell_element_function(button_index, |
@@ -55,10 +55,15 b' class ToggleButton(_Bool):' | |||
|
55 | 55 | value of the toggle button: True-pressed, False-unpressed |
|
56 | 56 | description : str |
|
57 | 57 | description displayed next to the button |
|
58 | tooltip: str | |
|
59 | tooltip caption of the toggle button | |
|
60 | icon: str | |
|
61 | font-awesome icon name | |
|
58 | 62 | """ |
|
59 | 63 | |
|
60 | 64 | _view_name = Unicode('ToggleButtonView', sync=True) |
|
61 | 65 | tooltip = Unicode(help="Tooltip caption of the toggle button.", sync=True) |
|
66 | icon = Unicode('', help= "Font-awesome icon.", sync=True) | |
|
62 | 67 | |
|
63 | 68 | button_style = CaselessStrEnum( |
|
64 | 69 | values=['primary', 'success', 'info', 'warning', 'danger', ''], |
@@ -24,15 +24,25 b' from IPython.utils.warn import DeprecatedClass' | |||
|
24 | 24 | @register('IPython.Button') |
|
25 | 25 | class Button(DOMWidget): |
|
26 | 26 | """Button widget. |
|
27 | ||
|
28 | 27 | This widget has an `on_click` method that allows you to listen for the |
|
29 |
user clicking on the button. The click event itself is stateless. |
|
|
28 | user clicking on the button. The click event itself is stateless. | |
|
29 | ||
|
30 | Parameters | |
|
31 | ---------- | |
|
32 | description : str | |
|
33 | description displayed next to the button | |
|
34 | tooltip: str | |
|
35 | tooltip caption of the toggle button | |
|
36 | icon: str | |
|
37 | font-awesome icon name | |
|
38 | """ | |
|
30 | 39 | _view_name = Unicode('ButtonView', sync=True) |
|
31 | 40 | |
|
32 | 41 | # Keys |
|
33 | 42 | description = Unicode('', help="Button label.", sync=True) |
|
34 | 43 | tooltip = Unicode(help="Tooltip caption of the button.", sync=True) |
|
35 | 44 | disabled = Bool(False, help="Enable or disable user changes.", sync=True) |
|
45 | icon = Unicode('', help= "Font-awesome icon.", sync=True) | |
|
36 | 46 | |
|
37 | 47 | button_style = CaselessStrEnum( |
|
38 | 48 | values=['primary', 'success', 'info', 'warning', 'danger', ''], |
@@ -19,7 +19,7 b' from threading import Lock' | |||
|
19 | 19 | |
|
20 | 20 | from .widget import DOMWidget, register |
|
21 | 21 | from IPython.utils.traitlets import ( |
|
22 | Unicode, Bool, Any, Dict, TraitError, CaselessStrEnum, Tuple | |
|
22 | Unicode, Bool, Any, Dict, TraitError, CaselessStrEnum, Tuple, List | |
|
23 | 23 | ) |
|
24 | 24 | from IPython.utils.py3compat import unicode_type |
|
25 | 25 | from IPython.utils.warn import DeprecatedClass |
@@ -32,6 +32,12 b' class _Selection(DOMWidget):' | |||
|
32 | 32 | |
|
33 | 33 | ``options`` can be specified as a list or dict. If given as a list, |
|
34 | 34 | it will be transformed to a dict of the form ``{str(value):value}``. |
|
35 | ||
|
36 | When programmatically setting the value, a reverse lookup is performed | |
|
37 | among the options to set the value of ``selected_label`` accordingly. The | |
|
38 | reverse lookup uses the equality operator by default, but an other | |
|
39 | predicate may be provided via the ``equals`` argument. For example, when | |
|
40 | dealing with numpy arrays, one may set equals=np.array_equal. | |
|
35 | 41 | """ |
|
36 | 42 | |
|
37 | 43 | value = Any(help="Selected value") |
@@ -194,6 +200,8 b' class ToggleButtons(_Selection):' | |||
|
194 | 200 | """Group of toggle buttons that represent an enumeration. Only one toggle |
|
195 | 201 | button can be toggled at any point in time.""" |
|
196 | 202 | _view_name = Unicode('ToggleButtonsView', sync=True) |
|
203 | tooltips = List(Unicode(), sync=True) | |
|
204 | icons = List(Unicode(), sync=True) | |
|
197 | 205 | |
|
198 | 206 | button_style = CaselessStrEnum( |
|
199 | 207 | values=['primary', 'success', 'info', 'warning', 'danger', ''], |
General Comments 0
You need to be logged in to leave comments.
Login now