From 9c3de0980968f42ce92feddc6c00dbeb01dd41a5 Mon Sep 17 00:00:00 2001 From: Jonathan Frederic Date: Mon, 25 Aug 2014 21:28:45 -0700 Subject: [PATCH] Fix some bugs found by the widget examples, add margin and padding base traits, add overflow traits to box base. --- IPython/html/static/widgets/js/widget.js | 43 +++++++++++++++++--- IPython/html/static/widgets/js/widget_box.js | 18 ++++++++ IPython/html/widgets/widget.py | 2 + IPython/html/widgets/widget_box.py | 10 +++++ 4 files changed, 68 insertions(+), 5 deletions(-) diff --git a/IPython/html/static/widgets/js/widget.js b/IPython/html/static/widgets/js/widget.js index a4bdac90d6..f0f919c630 100644 --- a/IPython/html/static/widgets/js/widget.js +++ b/IPython/html/static/widgets/js/widget.js @@ -409,39 +409,72 @@ define(["widgets/js/manager", // Public constructor DOMWidgetView.__super__.initialize.apply(this, [parameters]); this.on('displayed', this.show, this); - this.after_displayed(function() { - this.update_visible(this.model, this.model.get("visible")); - this.update_css(this.model, this.model.get("_css")); - }, this); this.model.on('change:visible', this.update_visible, this); this.model.on('change:_css', this.update_css, this); + this.model.on('change:_dom_classes', function(model, new_classes) { var old_classes = model.previous('children'); this.update_classes(old_classes, new_classes); }, this); + this.model.on('change:fore_color', function (model, value) { this.update_attr('color', value); }, this); + this.model.on('change:back_color', function (model, value) { this.update_attr('background', value); }, this); + this.model.on('change:width', function (model, value) { this.update_attr('width', value); }, this); + this.model.on('change:height', function (model, value) { this.update_attr('height', value); }, this); + this.model.on('change:border_color', function (model, value) { this.update_attr('border-color', value); }, this); + this.model.on('change:border_width', function (model, value) { this.update_attr('border-width', value); }, this); + this.model.on('change:border_style', function (model, value) { this.update_attr('border-style', value); }, this); + this.model.on('change:font_style', function (model, value) { this.update_attr('font-style', value); }, this); + this.model.on('change:font_weight', function (model, value) { this.update_attr('font-weight', value); }, this); + this.model.on('change:font_size', function (model, value) { this.update_attr('font-size', value); }, this); + this.model.on('change:font_family', function (model, value) { this.update_attr('font-family', value); }, this); - this.update_classes([], this.model.get('_dom_classes')); + + this.model.on('change:padding', function (model, value) { + this.update_attr('padding', value); }, this); + + this.model.on('change:margin', function (model, value) { + this.update_attr('margin', value); }, this); + + this.after_displayed(function() { + this.update_visible(this.model, this.model.get("visible")); + this.update_css(this.model, this.model.get("_css")); + + this.update_classes([], this.model.get('_dom_classes')); + this.update_attr('color', this.model.get('fore_color')); + this.update_attr('background', this.model.get('back_color')); + this.update_attr('width', this.model.get('width')); + this.update_attr('height', this.model.get('height')); + this.update_attr('border-color', this.model.get('border_color')); + this.update_attr('border-width', this.model.get('border_width')); + this.update_attr('border-style', this.model.get('border_style')); + this.update_attr('font-style', this.model.get('font_style')); + this.update_attr('font-weight', this.model.get('font_weight')); + this.update_attr('font-size', this.model.get('font_size')); + this.update_attr('font-family', this.model.get('font_family')); + this.update_attr('padding', this.model.get('padding')); + this.update_attr('margin', this.model.get('margin')); + }, this); }, update_attr: function(name, value) { diff --git a/IPython/html/static/widgets/js/widget_box.js b/IPython/html/static/widgets/js/widget_box.js index a613c7c9fd..68cb0ee57f 100644 --- a/IPython/html/static/widgets/js/widget_box.js +++ b/IPython/html/static/widgets/js/widget_box.js @@ -14,6 +14,12 @@ define([ this.model.on('change:children', function(model, value) { this.update_children(model.previous('children'), value); }, this); + this.model.on('change:overflow_x', function(model, value) { + this.update_overflow_x(); + }, this); + this.model.on('change:overflow_y', function(model, value) { + this.update_overflow_y(); + }, this); }, update_attr: function(name, value) { @@ -26,6 +32,18 @@ define([ this.$box = this.$el; this.$box.addClass('widget-box'); this.update_children([], this.model.get('children')); + this.update_overflow_x(); + this.update_overflow_y(); + }, + + update_overflow_x: function() { + // Called when the x-axis overflow setting is changed. + this.$box.css('overflow-x', this.model.get('overflow_x')); + }, + + update_overflow_y: function() { + // Called when the y-axis overflow setting is changed. + this.$box.css('overflow-y', this.model.get('overflow_y')); }, update_children: function(old_list, new_list) { diff --git a/IPython/html/widgets/widget.py b/IPython/html/widgets/widget.py index d6e5e749cf..5e19d19bfe 100644 --- a/IPython/html/widgets/widget.py +++ b/IPython/html/widgets/widget.py @@ -385,6 +385,8 @@ class DOMWidget(Widget): width = CUnicode(sync=True) height = CUnicode(sync=True) + padding = CUnicode(sync=True) + margin = CUnicode(sync=True) fore_color = Unicode(sync=True) back_color = Unicode(sync=True) diff --git a/IPython/html/widgets/widget_box.py b/IPython/html/widgets/widget_box.py index bd204bd0cc..aa3ebb01c0 100644 --- a/IPython/html/widgets/widget_box.py +++ b/IPython/html/widgets/widget_box.py @@ -18,6 +18,16 @@ class Box(DOMWidget): # Using a tuple here to force reassignment to update the list. # When a proper notifying-list trait exists, that is what should be used here. children = Tuple(sync=True, allow_none=False) + + _overflow_values = ['visible', 'hidden', 'scroll', 'auto', 'initial', 'inherit', ''] + overflow_x = CaselessStrEnum( + values=_overflow_values, + default_value='', allow_none=False, sync=True, help="""Specifies what + happens to content that is too large for the rendered region.""") + overflow_y = CaselessStrEnum( + values=_overflow_values, + default_value='', allow_none=False, sync=True, help="""Specifies what + happens to content that is too large for the rendered region.""") def __init__(self, children = (), **kwargs): kwargs['children'] = children