p2yq6ufca
/
monkeyking
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added flexible box model align properties.

Browse Source
Jonathan Frederic 12 years ago
parent a67f2ec472
commit 2ba2d42e84
5 changed files with 115 additions and 27 deletions
Show Stats Download Patch File Download Diff File

20
IPython/html/static/base/less/flexbox.less
Unescape View File

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

31
IPython/html/static/notebook/js/widgets/container.js
Unescape View File

@ -4,28 +4,37 @@ require(["notebook/js/widget"], function(){
var ContainerView = IPython.WidgetView.extend({
render : function(){
render: function(){
this.$el = $('<div />')
.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);
},
});

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

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

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

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

79
IPython/html/widgets/widget_container.py
Unescape View File

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

Write Preview
Loading…
Cancel
Save