diff --git a/IPython/html/static/widgets/js/widget.js b/IPython/html/static/widgets/js/widget.js
index f0f919c..ae80f9e 100644
--- a/IPython/html/static/widgets/js/widget.js
+++ b/IPython/html/static/widgets/js/widget.js
@@ -503,15 +503,54 @@ define(["widgets/js/manager",
}
},
- update_classes: function (old_classes, new_classes) {
- // Update the DOM classes applied to the topmost element.
+ update_classes: function (old_classes, new_classes, $el) {
+ // Update the DOM classes applied to an element, default to this.$el.
+ if ($el===undefined) {
+ $el = this.$el;
+ }
this.do_diff(old_classes, new_classes, function(removed) {
- this.$el.removeClass(removed);
+ $el.removeClass(removed);
}, function(added) {
- this.$el.addClass(added);
+ $el.addClass(added);
});
},
+ update_mapped_classes: function(class_map, trait_name, previous_trait_value, $el) {
+ // Update the DOM classes applied to the widget based on a single
+ // trait's value.
+ //
+ // Given a trait value classes map, this function automatically
+ // handles applying the appropriate classes to the widget element
+ // and removing classes that are no longer valid.
+ //
+ // Parameters
+ // ----------
+ // class_map: dictionary
+ // Dictionary of trait values to class lists.
+ // Example:
+ // {
+ // success: ['alert', 'alert-success'],
+ // info: ['alert', 'alert-info'],
+ // warning: ['alert', 'alert-warning'],
+ // danger: ['alert', 'alert-danger']
+ // };
+ // trait_name: string
+ // Name of the trait to check the value of.
+ // previous_trait_value: optional string, default ''
+ // Last trait value
+ // $el: optional jQuery element handle, defaults to this.$el
+ // Element that the classes are applied to.
+ var key = previous_trait_value;
+ if (key === undefined) {
+ key = this.model.previous(trait_name);
+ }
+ var old_classes = class_map[key] ? class_map[key] : [];
+ key = this.model.get(trait_name);
+ var new_classes = class_map[key] ? class_map[key] : [];
+
+ this.update_classes(old_classes, new_classes, $el || this.$el);
+ },
+
_get_selector_element: function (selector) {
// Get the elements via the css selector.
var elements;
diff --git a/IPython/html/static/widgets/js/widget_bool.js b/IPython/html/static/widgets/js/widget_bool.js
index 1b925af..9071420 100644
--- a/IPython/html/static/widgets/js/widget_bool.js
+++ b/IPython/html/static/widgets/js/widget_bool.js
@@ -77,8 +77,24 @@ define([
that.handle_click();
}));
+ 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
diff --git a/IPython/html/static/widgets/js/widget_box.js b/IPython/html/static/widgets/js/widget_box.js
index 68cb0ee..f5eb6bf 100644
--- a/IPython/html/static/widgets/js/widget_box.js
+++ b/IPython/html/static/widgets/js/widget_box.js
@@ -20,6 +20,9 @@ define([
this.model.on('change:overflow_y', function(model, value) {
this.update_overflow_y();
}, this);
+ this.model.on('change:box_style', function(model, value) {
+ this.update_box_style();
+ }, this);
},
update_attr: function(name, value) {
@@ -34,6 +37,7 @@ define([
this.update_children([], this.model.get('children'));
this.update_overflow_x();
this.update_overflow_y();
+ this.update_box_style('');
},
update_overflow_x: function() {
@@ -45,6 +49,16 @@ define([
// Called when the y-axis overflow setting is changed.
this.$box.css('overflow-y', this.model.get('overflow_y'));
},
+
+ update_box_style: function(previous_trait_value) {
+ var class_map = {
+ success: ['alert', 'alert-success'],
+ info: ['alert', 'alert-info'],
+ warning: ['alert', 'alert-warning'],
+ danger: ['alert', 'alert-danger']
+ };
+ this.update_mapped_classes(class_map, 'box_style', previous_trait_value, this.$box);
+ },
update_children: function(old_list, new_list) {
// Called when the children list changes.
diff --git a/IPython/html/static/widgets/js/widget_button.js b/IPython/html/static/widgets/js/widget_button.js
index 3ff7c23..ddae4d8 100644
--- a/IPython/html/static/widgets/js/widget_button.js
+++ b/IPython/html/static/widgets/js/widget_button.js
@@ -13,6 +13,11 @@ define([
this.setElement($("")
.addClass('btn btn-default'));
+ this.model.on('change:button_style', function(model, value) {
+ this.update_button_style();
+ }, this);
+ this.update_button_style('');
+
this.update(); // Set defaults.
},
@@ -37,6 +42,17 @@ define([
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',
diff --git a/IPython/html/static/widgets/js/widget_int.js b/IPython/html/static/widgets/js/widget_int.js
index cc6c31b..a990fd0 100644
--- a/IPython/html/static/widgets/js/widget_int.js
+++ b/IPython/html/static/widgets/js/widget_int.js
@@ -346,7 +346,10 @@ define([
update_attr: function(name, value) {
// Set a css attr of the widget view.
- if (name.substring(0, 6) == 'border' || name == 'width' || name == 'height' || name == 'background') {
+ if (name.substring(0, 6) == 'border' || name == 'width' ||
+ name == 'height' || name == 'background' || name == 'margin' ||
+ name == 'padding') {
+
this.$progress.css(name, value);
} else if (name == 'color') {
this.$bar.css('background', value);
diff --git a/IPython/html/static/widgets/js/widget_selection.js b/IPython/html/static/widgets/js/widget_selection.js
index be0e53a..69e9c05 100644
--- a/IPython/html/static/widgets/js/widget_selection.js
+++ b/IPython/html/static/widgets/js/widget_selection.js
@@ -36,6 +36,11 @@ define([
this.$droplist = $('')
.addClass('dropdown-menu')
.appendTo(this.$buttongroup);
+
+ this.model.on('change:button_style', function(model, value) {
+ this.update_button_style();
+ }, this);
+ this.update_button_style('');
// Set defaults.
this.update();
@@ -96,6 +101,18 @@ define([
return DropdownView.__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, this.$droplabel);
+ this.update_mapped_classes(class_map, 'button_style', previous_trait_value, this.$dropbutton);
+ },
+
update_attr: function(name, value) {
// Set a css attr of the widget view.
if (name.substring(0, 6) == 'border' || name == 'background' || name == 'color') {
@@ -103,9 +120,13 @@ define([
this.$dropbutton.css(name, value);
this.$droplist.css(name, value);
} else if (name == 'width') {
- var width = value - this.$dropbutton.width();
- this.$droplist.css(name, width);
- this.$droplabel.css(name, width);
+ this.$droplist.css(name, value);
+ this.$droplabel.css(name, value);
+ } else if (name == 'padding') {
+ this.$droplist.css(name, value);
+ this.$buttongroup.css(name, value);
+ } else if (name == 'margin') {
+ this.$buttongroup.css(name, value);
} else if (name == 'height') {
this.$droplabel.css(name, value);
this.$dropbutton.css(name, value);
@@ -239,6 +260,11 @@ define([
.addClass('btn-group')
.attr('data-toggle', 'buttons-radio')
.appendTo(this.$el);
+
+ this.model.on('change:button_style', function(model, value) {
+ this.update_button_style();
+ }, this);
+ this.update_button_style('');
this.update();
},
@@ -269,7 +295,7 @@ define([
.appendTo(that.$buttongroup)
.attr('data-value', item)
.on('click', $.proxy(that.handle_click, that));
- that._update_button_style($item_element);
+ that.update_style_traits($item_element);
}
if (that.model.get('value_name') == item) {
$item_element.addClass('active');
@@ -310,23 +336,36 @@ define([
update_attr: function(name, value) {
// Set a css attr of the widget view.
this._css_state[name] = value;
- this._update_button_style();
+ this.update_style_traits();
},
- _update_button_style: function(button) {
+ update_style_traits: function(button) {
for (var name in this._css_state) {
- if (this._css_state.hasOwnProperty(name) && name != 'width') {
- if (button) {
- button.css(name, this._css_state[name]);
- } else {
- this.$buttongroup.find('button').each(function(i, obj) {
- $(obj).css(name, this._css_state[name]);
- });
- }
+ if (this._css_state.hasOwnProperty(name)) {
+ if (name == 'margin') {
+ this.$buttongroup.css(name, this._css_state[name]);
+ } else if (name != 'width') {
+ if (button) {
+ button.css(name, this._css_state[name]);
+ } else {
+ this.$buttongroup.find('button').css(name, this._css_state[name]);
+ }
+ }
}
}
},
+ 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, this.$buttongroup.find('button'));
+ },
+
handle_click: function (e) {
// Handle when a value is clicked.
diff --git a/IPython/html/widgets/widget_bool.py b/IPython/html/widgets/widget_bool.py
index b7bbb1d..9705266 100644
--- a/IPython/html/widgets/widget_bool.py
+++ b/IPython/html/widgets/widget_bool.py
@@ -37,6 +37,11 @@ class ToggleButton(_Bool):
_view_name = Unicode('ToggleButtonView', 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')
diff --git a/IPython/html/widgets/widget_box.py b/IPython/html/widgets/widget_box.py
index aa3ebb0..e2bf081 100644
--- a/IPython/html/widgets/widget_box.py
+++ b/IPython/html/widgets/widget_box.py
@@ -29,6 +29,11 @@ class Box(DOMWidget):
default_value='', allow_none=False, sync=True, help="""Specifies what
happens to content that is too large for the rendered region.""")
+ box_style = CaselessStrEnum(
+ values=['success', 'info', 'warning', 'danger', ''],
+ default_value='', allow_none=True, sync=True, help="""Use a
+ predefined styling for the box.""")
+
def __init__(self, children = (), **kwargs):
kwargs['children'] = children
super(Box, self).__init__(**kwargs)
diff --git a/IPython/html/widgets/widget_button.py b/IPython/html/widgets/widget_button.py
index 17774cc..fc9b116 100644
--- a/IPython/html/widgets/widget_button.py
+++ b/IPython/html/widgets/widget_button.py
@@ -31,6 +31,11 @@ class Button(DOMWidget):
# Keys
description = Unicode('', help="Description of the button (label).", sync=True)
disabled = Bool(False, help="Enable or disable user changes.", 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"""
diff --git a/IPython/html/widgets/widget_selection.py b/IPython/html/widgets/widget_selection.py
index 7c4f2f1..9f7a9d8 100644
--- a/IPython/html/widgets/widget_selection.py
+++ b/IPython/html/widgets/widget_selection.py
@@ -115,6 +115,11 @@ class ToggleButtons(_Selection):
button can be toggled at any point in time."""
_view_name = Unicode('ToggleButtonsView', 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 buttons.""")
+
class Dropdown(_Selection):
"""Allows you to select a single item from a dropdown."""