font awesome icon

IPython/html/static/widgets/js/widget_bool.js

@@ -1,158 +1,159 b''
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 define([
     "widgets/js/widget",
     "jquery",
     "bootstrap",
 ], function(widget, $){
 
     var CheckboxView = widget.DOMWidgetView.extend({
         render : function(){
             /**
              * Called when view is rendered.
              */
             this.$el
                 .addClass('widget-hbox widget-checkbox');
             this.$label = $('<div />')
                 .addClass('widget-label')
                 .appendTo(this.$el)
                 .hide();
             this.$checkbox = $('<input />')
                 .attr('type', 'checkbox')
                 .appendTo(this.$el)
                 .click($.proxy(this.handle_click, this));
 
             this.update(); // Set defaults.
         },
 
         update_attr: function(name, value) {
             /**
              * Set a css attr of the widget view.
              */
             if (name == 'padding' || name == 'margin') {
                 this.$el.css(name, value);
             } else {
                 this.$checkbox.css(name, value);
             }
         },
 
         handle_click: function() {
             /**
              * Handles when the checkbox is clicked.
              *
              * Calling model.set will trigger all of the other views of the 
              * model to update.
              */
             var value = this.model.get('value');
             this.model.set('value', ! value, {updated_view: this});
             this.touch();
         },
         
         update : function(options){
             /**
              * Update the contents of this view
              *
              * Called when the model is changed.  The model may have been 
              * changed by another view or by a state update from the back-end.
              */
             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);
 
                 var description = this.model.get('description');
                 if (description.trim().length === 0) {
                     this.$label.hide();
                 } else {
                     this.typeset(this.$label, description);
                     this.$label.show();
                 }
             }
             return CheckboxView.__super__.update.apply(this);
         },
         
     });
 
 
     var ToggleButtonView = widget.DOMWidgetView.extend({
         render : function() {
             /**
              * Called when view is rendered.
              */
             var that = this;
             this.setElement($('<button />')
                 .addClass('btn btn-default')
                 .attr('type', 'button')
                 .on('click', function (e) {
                     e.preventDefault();
                     that.handle_click();
                 }));
             this.$el.attr("data-toggle", "tooltip");
             this.model.on('change:button_style', function(model, value) {
                 this.update_button_style();
             }, this);
             this.update_button_style('');
 
             this.update(); // Set defaults.
         },
 
         update_button_style: function(previous_trait_value) {
             var class_map = {
                 primary: ['btn-primary'],
                 success: ['btn-success'],
                 info: ['btn-info'],
                 warning: ['btn-warning'],
                 danger: ['btn-danger']
             };
             this.update_mapped_classes(class_map, 'button_style', previous_trait_value);
         },
         
         update : function(options){
             /**
              * Update the contents of this view
              *
              * 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')) {
                 this.$el.addClass('active');
             } else {
                 this.$el.removeClass('active');
             }
 
             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.attr("title", this.model.get("tooltip"));
-                if (description.trim().length === 0) {
+                this.$el.text(description);
+                var icon = this.model.get("icon");
+                $('<i class="fa"></i>').prependTo(this.$el).addClass(icon);
+                if (description.trim().length === 0 && icon.trim().length ===0) {
                     this.$el.html("&nbsp;"); // Preserve button height
-                } else {
-                    this.$el.text(description);
                 }
             }
             return ToggleButtonView.__super__.update.apply(this);
         },
         
         handle_click: function(e) { 
             /**
              * Handles and validates user input.
              *
              * Calling model.set will trigger all of the other views of the 
              * model to update.
              */
             var value = this.model.get('value');
             this.model.set('value', ! value, {updated_view: this});
             this.touch();
         },
     });
 
     return {
         'CheckboxView': CheckboxView,
         'ToggleButtonView': ToggleButtonView,
     };
 });

IPython/html/static/widgets/js/widget_button.js

@@ -1,77 +1,77 b''
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 define([
     "widgets/js/widget",
     "jquery",
     "bootstrap",
 ], function(widget, $){
 
     var ButtonView = widget.DOMWidgetView.extend({
         render : function(){
             /**
              * Called when view is rendered.
              */
             this.setElement($("<button />")
                 .addClass('btn btn-default'));
             this.$el.attr("data-toggle", "tooltip");
             this.model.on('change:button_style', function(model, value) {
                 this.update_button_style();
             }, this);
             this.update_button_style('');
 
             this.update(); // Set defaults.
         },
         
         update : function(){
             /**
              * Update the contents of this view
              *
              * 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.attr("title", this.model.get("tooltip"));
-            if (description.length === 0) {
+            this.$el.text(description);
+            var icon = this.model.get("icon");
+            $('<i class="fa"></i>').prependTo(this.$el).addClass(icon);
+            if (description.trim().length === 0 && icon.trim().length ===0) {
                 this.$el.html("&nbsp;"); // Preserve button height
-            } else {
-                this.$el.text(description);
             }
-            
             if (this.model.get('disabled')) {
                 this.$el.attr('disabled','disabled');
             } else {
                 this.$el.removeAttr('disabled');
             }
 
             return ButtonView.__super__.update.apply(this);
         },
 
         update_button_style: function(previous_trait_value) {
             var class_map = {
                 primary: ['btn-primary'],
                 success: ['btn-success'],
                 info: ['btn-info'],
                 warning: ['btn-warning'],
                 danger: ['btn-danger']
             };
             this.update_mapped_classes(class_map, 'button_style', previous_trait_value);
         },
 
         events: {
             // Dictionary of events and their handlers.
             'click': '_handle_click',
         },
         
         _handle_click: function(){
             /**
              * Handles when the button is clicked.
              */
             this.send({event: 'click'});
         },
     });
 
     return {
         'ButtonView': ButtonView,
     };
 });

IPython/html/tests/widgets/widget_bool.js

@@ -1,92 +1,92 b''
 // Test widget bool class
 casper.notebook_test(function () {
     "use strict";
 
     // Create a checkbox and togglebutton.
     var bool_index = this.append_cell(
         'from IPython.html import widgets\n' + 
         'from IPython.display import display, clear_output\n' +
         'bool_widgets = [widgets.Checkbox(description="Title", value=True),\n' +
         '    widgets.ToggleButton(description="Title", value=True)]\n' +
         'display(bool_widgets[0])\n' +
         'display(bool_widgets[1])\n' +
         'print("Success")');
     this.execute_cell_then(bool_index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Create bool widget cell executed with correct output.');
     });
 
     // Wait for the widgets to actually display.
     var widget_checkbox_selector = '.widget-area .widget-subarea .widget-hbox input';
     var widget_togglebutton_selector = '.widget-area .widget-subarea button';
     this.wait_for_element(bool_index, widget_checkbox_selector);
     this.wait_for_element(bool_index, widget_togglebutton_selector);
 
     // Continue the tests.
     this.then(function() {
         this.test.assert(this.cell_element_exists(bool_index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
         this.test.assert(this.cell_element_exists(bool_index, 
             widget_checkbox_selector),
             'Checkbox exists.');
 
         this.test.assert(this.cell_element_function(bool_index, 
             widget_checkbox_selector, 'prop', ['checked']),
             'Checkbox is checked.');
 
         this.test.assert(this.cell_element_exists(bool_index, 
             '.widget-area .widget-subarea .widget-hbox .widget-label'),
             'Checkbox label exists.');
 
         this.test.assert(this.cell_element_function(bool_index, 
             '.widget-area .widget-subarea .widget-hbox .widget-label', 'html')=="Title",
             'Checkbox labeled correctly.');
 
         this.test.assert(this.cell_element_exists(bool_index, 
             widget_togglebutton_selector),
             '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, 
             widget_togglebutton_selector, 'hasClass', ['active']),
             'Toggle button is toggled.');
     });
 
     // Try changing the state of the widgets programatically.
     var index = this.append_cell(
         'bool_widgets[0].value = False\n' +
         'bool_widgets[1].value = False\n' +
         'print("Success")');
     this.execute_cell_then(index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Change bool widget value cell executed with correct output.');
 
         this.test.assert(! this.cell_element_function(bool_index, 
             widget_checkbox_selector, 'prop', ['checked']),
             'Checkbox is not checked. (1)');
 
         this.test.assert(! this.cell_element_function(bool_index, 
             widget_togglebutton_selector, 'hasClass', ['active']),
             'Toggle button is not toggled. (1)');
  
         // Try toggling the bool by clicking on the checkbox.
         this.cell_element_function(bool_index, widget_checkbox_selector, 'click');
 
         this.test.assert(this.cell_element_function(bool_index, 
             widget_checkbox_selector, 'prop', ['checked']),
             'Checkbox is checked. (2)');
 
         // Try toggling the bool by clicking on the toggle button.
         this.cell_element_function(bool_index, widget_togglebutton_selector, 'click');
 
         this.test.assert(this.cell_element_function(bool_index, 
             widget_togglebutton_selector, 'hasClass', ['active']),
             'Toggle button is toggled. (3)');
 
     });
 });

IPython/html/tests/widgets/widget_button.js

@@ -1,48 +1,48 b''
 // Test widget button class
 casper.notebook_test(function () {
     var button_index = this.append_cell(
         'from IPython.html import widgets\n' + 
         'from IPython.display import display, clear_output\n' +
         'button = widgets.Button(description="Title")\n' +
         'display(button)\n' +
         'print("Success")\n' +
         'def handle_click(sender):\n' +
         '    display("Clicked")\n' +
         'button.on_click(handle_click)');
     this.execute_cell_then(button_index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n',
             'Create button cell executed with correct output.');
     });
 
     // Wait for the widgets to actually display.
     var widget_button_selector = '.widget-area .widget-subarea button';
     this.wait_for_element(button_index, widget_button_selector);
 
     // Continue with the tests.
     this.then(function() {
         this.test.assert(this.cell_element_exists(button_index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
         this.test.assert(this.cell_element_exists(button_index, 
             widget_button_selector),
             '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, 
             widget_button_selector, 'click');
     });
 
     this.wait_for_output(button_index, 1);
 
     this.then(function () {
         var warning_text = this.get_output_cell(button_index, 1).text;
         this.test.assertNotEquals(warning_text.indexOf('Warning'), -1,
             'Importing widgets show a warning');
         this.test.assertEquals(this.get_output_cell(button_index, 2).data['text/plain'], "'Clicked'",
             'Button click event fires.');
     });
 });

IPython/html/widgets/widget_bool.py

@@ -1,71 +1,76 b''
 """Bool class.  
 
 Represents a boolean using a widget.
 """
 #-----------------------------------------------------------------------------
 # Copyright (c) 2013, the IPython Development Team.
 #
 # Distributed under the terms of the Modified BSD License.
 #
 # The full license is in the file COPYING.txt, distributed with this software.
 #-----------------------------------------------------------------------------
 
 #-----------------------------------------------------------------------------
 # Imports
 #-----------------------------------------------------------------------------
 from .widget import DOMWidget, register
 from IPython.utils.traitlets import Unicode, Bool, CaselessStrEnum
 from IPython.utils.warn import DeprecatedClass
 
 #-----------------------------------------------------------------------------
 # Classes
 #-----------------------------------------------------------------------------
 class _Bool(DOMWidget):
     """A base class for creating widgets that represent booleans."""
     value = Bool(False, help="Bool value", sync=True)
     description = Unicode('', help="Description of the boolean (label).", sync=True)
     disabled = Bool(False, help="Enable or disable user changes.", sync=True)
 
     def __init__(self, value=None, **kwargs):
         if value is not None:
             kwargs['value'] = value
         super(_Bool, self).__init__(**kwargs)
 
 @register('IPython.Checkbox')
 class Checkbox(_Bool):
     """Displays a boolean `value` in the form of a checkbox.
 
        Parameters
        ----------
        value : {True,False}
            value of the checkbox: True-checked, False-unchecked
        description : str
 	   description displayed next to the checkbox
 """
     _view_name = Unicode('CheckboxView', sync=True)
 
 
 @register('IPython.ToggleButton')
 class ToggleButton(_Bool):
     """Displays a boolean `value` in the form of a toggle button.
 
        Parameters
        ----------
        value : {True,False}
            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', ''], 
         default_value='', allow_none=True, sync=True, help="""Use a
         predefined styling for the button.""")
 
 
 # Remove in IPython 4.0
 CheckboxWidget = DeprecatedClass(Checkbox, 'CheckboxWidget')
 ToggleButtonWidget = DeprecatedClass(ToggleButton, 'ToggleButtonWidget')

IPython/html/widgets/widget_button.py

@@ -1,72 +1,82 b''
 """Button class.  
 
 Represents a button in the frontend using a widget.  Allows user to listen for
 click events on the button and trigger backend code when the clicks are fired.
 """
 #-----------------------------------------------------------------------------
 # Copyright (c) 2013, the IPython Development Team.
 #
 # Distributed under the terms of the Modified BSD License.
 #
 # The full license is in the file COPYING.txt, distributed with this software.
 #-----------------------------------------------------------------------------
 
 #-----------------------------------------------------------------------------
 # Imports
 #-----------------------------------------------------------------------------
 from .widget import DOMWidget, CallbackDispatcher, register
 from IPython.utils.traitlets import Unicode, Bool, CaselessStrEnum
 from IPython.utils.warn import DeprecatedClass
 
 #-----------------------------------------------------------------------------
 # Classes
 #-----------------------------------------------------------------------------
 @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', ''], 
         default_value='', allow_none=True, sync=True, help="""Use a
         predefined styling for the button.""")
     
     def __init__(self, **kwargs):
         """Constructor"""
         super(Button, self).__init__(**kwargs)
         self._click_handlers = CallbackDispatcher()
         self.on_msg(self._handle_button_msg)
 
     def on_click(self, callback, remove=False):
         """Register a callback to execute when the button is clicked.
 
         The callback will be called with one argument,
         the clicked button widget instance.
 
         Parameters
         ----------
         remove : bool (optional)
             Set to true to remove the callback from the list of callbacks."""
         self._click_handlers.register_callback(callback, remove=remove)
 
     def _handle_button_msg(self, _, content):
         """Handle a msg from the front-end.
 
         Parameters
         ----------
         content: dict
             Content of the msg."""
         if content.get('event', '') == 'click':
             self._click_handlers(self)
 
 
 # Remove in IPython 4.0
 ButtonWidget = DeprecatedClass(Button, 'ButtonWidget')