From 13b5a372b2842e4f5ec9a2bd63ceedf616c17e34 2014-01-16 10:56:58 From: Jonathan Frederic Date: 2014-01-16 10:56:58 Subject: [PATCH] Added flexible box model align properties. --- diff --git a/IPython/html/static/base/less/flexbox.less b/IPython/html/static/base/less/flexbox.less index 089bb39..3d84ce2 100644 --- a/IPython/html/static/base/less/flexbox.less +++ b/IPython/html/static/base/less/flexbox.less @@ -101,3 +101,23 @@ -moz-box-pack: center; box-pack: center; } + +/* Code below was added on 11/6/2013 by Jonathan Frederic */ + +.align_start { + -webkit-box-align: start; + -moz-box-align: start; + box-align: start; +} + +.align_end { + -webkit-box-align: end; + -moz-box-align: end; + box-align: end; +} + +.align_center { + -webkit-box-align: center; + -moz-box-align: center; + box-align: center; +} diff --git a/IPython/html/static/notebook/js/widgets/container.js b/IPython/html/static/notebook/js/widgets/container.js index 6eb0468..0e0e44a 100644 --- a/IPython/html/static/notebook/js/widgets/container.js +++ b/IPython/html/static/notebook/js/widgets/container.js @@ -4,28 +4,37 @@ require(["notebook/js/widget"], function(){ var ContainerView = IPython.WidgetView.extend({ - render : function(){ + render: function(){ this.$el = $('
') .addClass('widget-container'); }, - update : function(){ + update: function(){ // Apply flexible box model properties by adding and removing // corrosponding CSS classes. // Defined in IPython/html/static/base/less/flexbox.less - var flex_properties = ['vbox', 'hbox', 'center', 'end', 'center']; - for (var index in flex_properties) { - if (this.model.get('_' + flex_properties[index])) { - this.$el.addClass(flex_properties[index]); - } else { - this.$el.removeClass(flex_properties[index]); - } - } + this.set_flex_property('vbox', this.model.get('_vbox')); + this.set_flex_property('hbox', this.model.get('_hbox')); + this.set_flex_property('start', this.model.get('_pack_start')); + this.set_flex_property('center', this.model.get('_pack_center')); + this.set_flex_property('end', this.model.get('_pack_end')); + this.set_flex_property('align_start', this.model.get('_align_start')); + this.set_flex_property('align_center', this.model.get('_align_center')); + this.set_flex_property('align_end', this.model.get('_align_end')); + return IPython.WidgetView.prototype.update.call(this); }, - display_child : function(view) { + set_flex_property: function(property_name, enabled) { + if (enabled) { + this.$el.addClass(property_name); + } else { + this.$el.removeClass(property_name); + } + }, + + display_child: function(view) { this.$el.append(view.$el); }, }); diff --git a/IPython/html/static/style/ipython.min.css b/IPython/html/static/style/ipython.min.css index b079a13..d0f6455 100644 --- a/IPython/html/static/style/ipython.min.css +++ b/IPython/html/static/style/ipython.min.css @@ -18,10 +18,16 @@ .start{-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;} .end{-webkit-box-pack:end;-moz-box-pack:end;box-pack:end;} .center{-webkit-box-pack:center;-moz-box-pack:center;box-pack:center;} +<<<<<<< HEAD div.error{margin:2em;text-align:center;} div.error>h1{font-size:500%;line-height:normal;} div.error>p{font-size:200%;line-height:normal;} div.traceback-wrapper{text-align:left;max-width:800px;margin:auto;} +======= +.align_start{-webkit-box-align:start;-moz-box-align:start;box-align:start;} +.align_end{-webkit-box-align:end;-moz-box-align:end;box-align:end;} +.align_center{-webkit-box-align:center;-moz-box-align:center;box-align:center;} +>>>>>>> Added flexible box model align properties. .center-nav{display:inline-block;margin-bottom:-4px;} .alternate_upload{background-color:none;display:inline;} .alternate_upload.form{padding:0;margin:0;} diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css index 93df11c..11b08dd 100644 --- a/IPython/html/static/style/style.min.css +++ b/IPython/html/static/style/style.min.css @@ -1385,10 +1385,16 @@ ul.icons-ul{list-style-type:none;text-indent:-0.7142857142857143em;margin-left:2 .start{-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;} .end{-webkit-box-pack:end;-moz-box-pack:end;box-pack:end;} .center{-webkit-box-pack:center;-moz-box-pack:center;box-pack:center;} +<<<<<<< HEAD div.error{margin:2em;text-align:center;} div.error>h1{font-size:500%;line-height:normal;} div.error>p{font-size:200%;line-height:normal;} div.traceback-wrapper{text-align:left;max-width:800px;margin:auto;} +======= +.align_start{-webkit-box-align:start;-moz-box-align:start;box-align:start;} +.align_end{-webkit-box-align:end;-moz-box-align:end;box-align:end;} +.align_center{-webkit-box-align:center;-moz-box-align:center;box-align:center;} +>>>>>>> Added flexible box model align properties. body{background-color:white;position:absolute;left:0px;right:0px;top:0px;bottom:0px;overflow:visible;} div#header{display:none;} #ipython_notebook{padding-left:16px;} diff --git a/IPython/html/widgets/widget_container.py b/IPython/html/widgets/widget_container.py index fae298d..e16d2d4 100644 --- a/IPython/html/widgets/widget_container.py +++ b/IPython/html/widgets/widget_container.py @@ -25,12 +25,16 @@ class ContainerWidget(Widget): # Keys, all private and managed by helper methods. Flexible box model # classes... - _keys = ['_vbox', '_hbox', '_start', '_end', '_center'] + _keys = ['_vbox', '_hbox', '_align_start', '_align_end', '_align_center', + '_pack_start', '_pack_end', '_pack_center'] _hbox = Bool(False) _vbox = Bool(False) - _start = Bool(False) - _end = Bool(False) - _center = Bool(False) + _align_start = Bool(False) + _align_end = Bool(False) + _align_center = Bool(False) + _pack_start = Bool(False) + _pack_end = Bool(False) + _pack_center = Bool(False) def hbox(self, enabled=True): """Make this container an hbox. Automatically disables conflicting @@ -58,7 +62,7 @@ class ContainerWidget(Widget): if enabled: self._hbox = False - def start(self, enabled=True): + def align_start(self, enabled=True): """Make the contents of this container align to the start of the axis. Automatically disables conflicting alignments. @@ -67,12 +71,12 @@ class ContainerWidget(Widget): enabled: bool (optional) Enabled or disable the start alignment of the container, defaults to True.""" - self._start = enabled + self._align_start = enabled if enabled: - self._end = False - self._center = False + self._align_end = False + self._align_center = False - def end(self, enabled=True): + def align_end(self, enabled=True): """Make the contents of this container align to the end of the axis. Automatically disables conflicting alignments. @@ -81,12 +85,12 @@ class ContainerWidget(Widget): enabled: bool (optional) Enabled or disable the end alignment of the container, defaults to True.""" - self._end = enabled + self._align_end = enabled if enabled: - self._start = False - self._center = False + self._align_start = False + self._align_center = False - def center(self, enabled=True): + def align_center(self, enabled=True): """Make the contents of this container align to the center of the axis. Automatically disables conflicting alignments. @@ -95,7 +99,50 @@ class ContainerWidget(Widget): enabled: bool (optional) Enabled or disable the center alignment of the container, defaults to True.""" - self._center = enabled + self._align_center = enabled if enabled: - self._start = False - self._end = False + self._align_start = False + self._align_end = False + + + def pack_start(self, enabled=True): + """Make the contents of this container pack to the start of the axis. + Automatically disables conflicting packings. + + Parameters + ---------- + enabled: bool (optional) + Enabled or disable the start packing of the container, defaults to + True.""" + self._pack_start = enabled + if enabled: + self._pack_end = False + self._pack_center = False + + def pack_end(self, enabled=True): + """Make the contents of this container pack to the end of the axis. + Automatically disables conflicting packings. + + Parameters + ---------- + enabled: bool (optional) + Enabled or disable the end packing of the container, defaults to + True.""" + self._pack_end = enabled + if enabled: + self._pack_start = False + self._pack_center = False + + def pack_center(self, enabled=True): + """Make the contents of this container pack to the center of the axis. + Automatically disables conflicting packings. + + Parameters + ---------- + enabled: bool (optional) + Enabled or disable the center packing of the container, defaults to + True.""" + self._pack_center = enabled + if enabled: + self._pack_start = False + self._pack_end = False