mirror/notebook
2
0
Fork 0
mirror of https://github.com/jupyter/notebook.git synced 2025-03-13 13:17:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

Added Bootstrap specific classes,

Browse Source 
and fixed a few bugs here and there...
This commit is contained in:
Jonathan Frederic 2014-08-26 16:49:13 -07:00
parent a0e70e350f
commit 9b4d19bad7
10 changed files with 166 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
IPython/html/static/widgets/js/widget.js
View File

@ -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;

16
IPython/html/static/widgets/js/widget_bool.js
View File

@ -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

14
IPython/html/static/widgets/js/widget_box.js
View File

@ -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.

16
IPython/html/static/widgets/js/widget_button.js
View File

@ -13,6 +13,11 @@ define([
this.setElement($("<button />")
.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',

5
IPython/html/static/widgets/js/widget_int.js
View File

@ -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);

67
IPython/html/static/widgets/js/widget_selection.js
View File

@ -36,6 +36,11 @@ define([
this.$droplist = $('<ul />')
.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.

5
IPython/html/widgets/widget_bool.py
View File

@ -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')

5
IPython/html/widgets/widget_box.py
View File

@ -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)

5
IPython/html/widgets/widget_button.py
View File

@ -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"""

5
IPython/html/widgets/widget_selection.py
View File

@ -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."""