From e619bdf31352ab372ffa4a4ae76baedbea4bcd6e Mon Sep 17 00:00:00 2001 From: Jonathan Frederic Date: Mon, 21 Oct 2013 19:28:59 +0000 Subject: [PATCH] Flex box system improvements Now to set a container to vbox or hbox you call .vbox() or .hbox() --- .../static/notebook/js/widgets/container.js | 22 ++++++----- .../html/static/notebook/less/widgetarea.less | 21 ++++------ IPython/html/static/style/ipython.min.css | 5 +++ IPython/html/static/style/style.min.css | 6 +++ IPython/html/widgets/widget_container.py | 38 +++++++++++++++++-- 5 files changed, 66 insertions(+), 26 deletions(-) diff --git a/IPython/html/static/notebook/js/widgets/container.js b/IPython/html/static/notebook/js/widgets/container.js index f22e3f032..9702a8727 100644 --- a/IPython/html/static/notebook/js/widgets/container.js +++ b/IPython/html/static/notebook/js/widgets/container.js @@ -6,20 +6,22 @@ require(["notebook/js/widget"], function(){ render : function(){ this.$el = $('
') + .addClass('widget_container') .addClass(this.model.comm.comm_id); }, update : function(){ - if (this.model.get('vbox')) { - this.$el.addClass('vbox'); - } else { - this.$el.removeClass('vbox'); - } - - if (this.model.get('hbox')) { - this.$el.addClass('hbox'); - } else { - this.$el.removeClass('hbox'); + + // 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]); + } } }, }); diff --git a/IPython/html/static/notebook/less/widgetarea.less b/IPython/html/static/notebook/less/widgetarea.less index dd2c3e593..07e897927 100644 --- a/IPython/html/static/notebook/less/widgetarea.less +++ b/IPython/html/static/notebook/less/widgetarea.less @@ -1,25 +1,20 @@ +div.widget_container { + .box-flex2(); + .border-box-sizing(); +} + div.widget_area { page-break-inside: avoid; - .vbox(); -} - -div.widget_hbox { .hbox(); } -div.widget_vbox { - .vbox(); -} - -div.widget_item { - display: inline-block; -} - /* This class is for the widget subarea inside the widget_area and after the prompt div. */ div.widget_subarea { padding: 0.44em 0.4em 0.4em 1px; margin-left: 6px; - .box-flex1(); + .border-box-sizing(); + .vbox(); + .box-flex2() } diff --git a/IPython/html/static/style/ipython.min.css b/IPython/html/static/style/ipython.min.css index 51194fef5..6bf6b6fe5 100644 --- a/IPython/html/static/style/ipython.min.css +++ b/IPython/html/static/style/ipython.min.css @@ -165,5 +165,10 @@ h1:hover .anchor-link,h2:hover .anchor-link,h3:hover .anchor-link,h4:hover .anch .ipython_tooltip .tooltiptext pre{border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;font-size:100%;background-color:#f7f7f7;} .pretooltiparrow{left:0px;margin:0px;top:-16px;width:40px;height:16px;overflow:hidden;position:absolute;} .pretooltiparrow:before{background-color:#f7f7f7;border:1px #ababab solid;z-index:11;content:"";position:absolute;left:15px;top:10px;width:25px;height:25px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);} +.hbox{display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;} +.hbox>*{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;display:block;} +.vbox{display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;} +.vbox>*{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;display:block;} div.widget_area{page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;} +div.widget_item{display:inline-block;} div.widget_subarea{padding:0.44em 0.4em 0.4em 1px;margin-left:6px;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;} diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css index fefd7be2b..40fa54e34 100644 --- a/IPython/html/static/style/style.min.css +++ b/IPython/html/static/style/style.min.css @@ -1584,4 +1584,10 @@ span#checkpoint_status,span#autosave_status{font-size:small;} .ipython_tooltip .tooltiptext pre{border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;font-size:100%;background-color:#f7f7f7;} .pretooltiparrow{left:0px;margin:0px;top:-16px;width:40px;height:16px;overflow:hidden;position:absolute;} .pretooltiparrow:before{background-color:#f7f7f7;border:1px #ababab solid;z-index:11;content:"";position:absolute;left:15px;top:10px;width:25px;height:25px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);} +.hbox{display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;} +.hbox>*{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;display:block;} +.vbox{display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;} +.vbox>*{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;display:block;} +div.widget_area{page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;} +div.widget_item{display:inline-block;} div.widget_subarea{padding:0.44em 0.4em 0.4em 1px;margin-left:6px;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;} diff --git a/IPython/html/widgets/widget_container.py b/IPython/html/widgets/widget_container.py index 2131a535b..bb37dc9b9 100644 --- a/IPython/html/widgets/widget_container.py +++ b/IPython/html/widgets/widget_container.py @@ -4,7 +4,39 @@ from IPython.utils.traitlets import Unicode, Bool class ContainerWidget(Widget): target_name = Unicode('container_widget') default_view_name = Unicode('ContainerView') - _keys = ['vbox', 'hbox'] + _keys = ['_vbox', '_hbox', '_start', '_end', '_center'] + _trait_changing = False - hbox = Bool(True) - vbox = Bool(False) \ No newline at end of file + _hbox = Bool(False) + _vbox = Bool(False) + _start = Bool(False) + _end = Bool(False) + _center = Bool(False) + + def hbox(self, enabled=True): + self._hbox = enabled + if enabled: + self._vbox = False + + def vbox(self, enabled=True): + self._vbox = enabled + if enabled: + self._hbox = False + + def start(self, enabled=True): + self._start = enabled + if enabled: + self._end = False + self._center = False + + def end(self, enabled=True): + self._end = enabled + if enabled: + self._start = False + self._center = False + + def center(self, enabled=True): + self._center = enabled + if enabled: + self._start = False + self._end = False