mirror/notebook
2
0
Fork 0
mirror of https://github.com/jupyter/notebook.git synced 2024-12-21 04:10:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

Flex box system improvements

Browse Source 
Now to set a container to vbox or hbox you call .vbox() or .hbox()
This commit is contained in:
Jonathan Frederic 2013-10-21 19:28:59 +00:00
parent 2ad57f6f9d
commit e619bdf313
5 changed files with 66 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
IPython/html/static/notebook/js/widgets/container.js
View File

@ -6,20 +6,22 @@ require(["notebook/js/widget"], function(){
render : function(){
this.$el = $('<div />')
.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]);
}
}
},
});

21
IPython/html/static/notebook/less/widgetarea.less
View File

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

5
IPython/html/static/style/ipython.min.css vendored
View File

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

6
IPython/html/static/style/style.min.css vendored
View File

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

38
IPython/html/widgets/widget_container.py
View File

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