Show More
@@ -101,3 +101,23 b'' | |||
|
101 | 101 | -moz-box-pack: center; |
|
102 | 102 | box-pack: center; |
|
103 | 103 | } |
|
104 | ||
|
105 | /* Code below was added on 11/6/2013 by Jonathan Frederic */ | |
|
106 | ||
|
107 | .align_start { | |
|
108 | -webkit-box-align: start; | |
|
109 | -moz-box-align: start; | |
|
110 | box-align: start; | |
|
111 | } | |
|
112 | ||
|
113 | .align_end { | |
|
114 | -webkit-box-align: end; | |
|
115 | -moz-box-align: end; | |
|
116 | box-align: end; | |
|
117 | } | |
|
118 | ||
|
119 | .align_center { | |
|
120 | -webkit-box-align: center; | |
|
121 | -moz-box-align: center; | |
|
122 | box-align: center; | |
|
123 | } |
@@ -4,28 +4,37 b' require(["notebook/js/widget"], function(){' | |||
|
4 | 4 | |
|
5 | 5 | var ContainerView = IPython.WidgetView.extend({ |
|
6 | 6 | |
|
7 |
render |
|
|
7 | render: function(){ | |
|
8 | 8 | this.$el = $('<div />') |
|
9 | 9 | .addClass('widget-container'); |
|
10 | 10 | }, |
|
11 | 11 | |
|
12 |
update |
|
|
12 | update: function(){ | |
|
13 | 13 | |
|
14 | 14 | // Apply flexible box model properties by adding and removing |
|
15 | 15 | // corrosponding CSS classes. |
|
16 | 16 | // Defined in IPython/html/static/base/less/flexbox.less |
|
17 | var flex_properties = ['vbox', 'hbox', 'center', 'end', 'center']; | |
|
18 | for (var index in flex_properties) { | |
|
19 | if (this.model.get('_' + flex_properties[index])) { | |
|
20 | this.$el.addClass(flex_properties[index]); | |
|
21 | } else { | |
|
22 | this.$el.removeClass(flex_properties[index]); | |
|
23 | } | |
|
24 | } | |
|
17 | this.set_flex_property('vbox', this.model.get('_vbox')); | |
|
18 | this.set_flex_property('hbox', this.model.get('_hbox')); | |
|
19 | this.set_flex_property('start', this.model.get('_pack_start')); | |
|
20 | this.set_flex_property('center', this.model.get('_pack_center')); | |
|
21 | this.set_flex_property('end', this.model.get('_pack_end')); | |
|
22 | this.set_flex_property('align_start', this.model.get('_align_start')); | |
|
23 | this.set_flex_property('align_center', this.model.get('_align_center')); | |
|
24 | this.set_flex_property('align_end', this.model.get('_align_end')); | |
|
25 | ||
|
25 | 26 | return IPython.WidgetView.prototype.update.call(this); |
|
26 | 27 | }, |
|
27 | 28 | |
|
28 | display_child : function(view) { | |
|
29 | set_flex_property: function(property_name, enabled) { | |
|
30 | if (enabled) { | |
|
31 | this.$el.addClass(property_name); | |
|
32 | } else { | |
|
33 | this.$el.removeClass(property_name); | |
|
34 | } | |
|
35 | }, | |
|
36 | ||
|
37 | display_child: function(view) { | |
|
29 | 38 | this.$el.append(view.$el); |
|
30 | 39 | }, |
|
31 | 40 | }); |
@@ -18,10 +18,16 b'' | |||
|
18 | 18 | .start{-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;} |
|
19 | 19 | .end{-webkit-box-pack:end;-moz-box-pack:end;box-pack:end;} |
|
20 | 20 | .center{-webkit-box-pack:center;-moz-box-pack:center;box-pack:center;} |
|
21 | <<<<<<< HEAD | |
|
21 | 22 | div.error{margin:2em;text-align:center;} |
|
22 | 23 | div.error>h1{font-size:500%;line-height:normal;} |
|
23 | 24 | div.error>p{font-size:200%;line-height:normal;} |
|
24 | 25 | div.traceback-wrapper{text-align:left;max-width:800px;margin:auto;} |
|
26 | ======= | |
|
27 | .align_start{-webkit-box-align:start;-moz-box-align:start;box-align:start;} | |
|
28 | .align_end{-webkit-box-align:end;-moz-box-align:end;box-align:end;} | |
|
29 | .align_center{-webkit-box-align:center;-moz-box-align:center;box-align:center;} | |
|
30 | >>>>>>> Added flexible box model align properties. | |
|
25 | 31 | .center-nav{display:inline-block;margin-bottom:-4px;} |
|
26 | 32 | .alternate_upload{background-color:none;display:inline;} |
|
27 | 33 | .alternate_upload.form{padding:0;margin:0;} |
@@ -1385,10 +1385,16 b' ul.icons-ul{list-style-type:none;text-indent:-0.7142857142857143em;margin-left:2' | |||
|
1385 | 1385 | .start{-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;} |
|
1386 | 1386 | .end{-webkit-box-pack:end;-moz-box-pack:end;box-pack:end;} |
|
1387 | 1387 | .center{-webkit-box-pack:center;-moz-box-pack:center;box-pack:center;} |
|
1388 | <<<<<<< HEAD | |
|
1388 | 1389 | div.error{margin:2em;text-align:center;} |
|
1389 | 1390 | div.error>h1{font-size:500%;line-height:normal;} |
|
1390 | 1391 | div.error>p{font-size:200%;line-height:normal;} |
|
1391 | 1392 | div.traceback-wrapper{text-align:left;max-width:800px;margin:auto;} |
|
1393 | ======= | |
|
1394 | .align_start{-webkit-box-align:start;-moz-box-align:start;box-align:start;} | |
|
1395 | .align_end{-webkit-box-align:end;-moz-box-align:end;box-align:end;} | |
|
1396 | .align_center{-webkit-box-align:center;-moz-box-align:center;box-align:center;} | |
|
1397 | >>>>>>> Added flexible box model align properties. | |
|
1392 | 1398 | body{background-color:white;position:absolute;left:0px;right:0px;top:0px;bottom:0px;overflow:visible;} |
|
1393 | 1399 | div#header{display:none;} |
|
1394 | 1400 | #ipython_notebook{padding-left:16px;} |
@@ -25,12 +25,16 b' class ContainerWidget(Widget):' | |||
|
25 | 25 | |
|
26 | 26 | # Keys, all private and managed by helper methods. Flexible box model |
|
27 | 27 | # classes... |
|
28 |
_keys = ['_vbox', '_hbox', '_start', '_end', '_center' |
|
|
28 | _keys = ['_vbox', '_hbox', '_align_start', '_align_end', '_align_center', | |
|
29 | '_pack_start', '_pack_end', '_pack_center'] | |
|
29 | 30 | _hbox = Bool(False) |
|
30 | 31 | _vbox = Bool(False) |
|
31 | _start = Bool(False) | |
|
32 | _end = Bool(False) | |
|
33 | _center = Bool(False) | |
|
32 | _align_start = Bool(False) | |
|
33 | _align_end = Bool(False) | |
|
34 | _align_center = Bool(False) | |
|
35 | _pack_start = Bool(False) | |
|
36 | _pack_end = Bool(False) | |
|
37 | _pack_center = Bool(False) | |
|
34 | 38 | |
|
35 | 39 | def hbox(self, enabled=True): |
|
36 | 40 | """Make this container an hbox. Automatically disables conflicting |
@@ -58,7 +62,7 b' class ContainerWidget(Widget):' | |||
|
58 | 62 | if enabled: |
|
59 | 63 | self._hbox = False |
|
60 | 64 | |
|
61 | def start(self, enabled=True): | |
|
65 | def align_start(self, enabled=True): | |
|
62 | 66 | """Make the contents of this container align to the start of the axis. |
|
63 | 67 | Automatically disables conflicting alignments. |
|
64 | 68 | |
@@ -67,12 +71,12 b' class ContainerWidget(Widget):' | |||
|
67 | 71 | enabled: bool (optional) |
|
68 | 72 | Enabled or disable the start alignment of the container, defaults to |
|
69 | 73 | True.""" |
|
70 | self._start = enabled | |
|
74 | self._align_start = enabled | |
|
71 | 75 | if enabled: |
|
72 | self._end = False | |
|
73 | self._center = False | |
|
76 | self._align_end = False | |
|
77 | self._align_center = False | |
|
74 | 78 | |
|
75 | def end(self, enabled=True): | |
|
79 | def align_end(self, enabled=True): | |
|
76 | 80 | """Make the contents of this container align to the end of the axis. |
|
77 | 81 | Automatically disables conflicting alignments. |
|
78 | 82 | |
@@ -81,12 +85,12 b' class ContainerWidget(Widget):' | |||
|
81 | 85 | enabled: bool (optional) |
|
82 | 86 | Enabled or disable the end alignment of the container, defaults to |
|
83 | 87 | True.""" |
|
84 | self._end = enabled | |
|
88 | self._align_end = enabled | |
|
85 | 89 | if enabled: |
|
86 | self._start = False | |
|
87 | self._center = False | |
|
90 | self._align_start = False | |
|
91 | self._align_center = False | |
|
88 | 92 | |
|
89 | def center(self, enabled=True): | |
|
93 | def align_center(self, enabled=True): | |
|
90 | 94 | """Make the contents of this container align to the center of the axis. |
|
91 | 95 | Automatically disables conflicting alignments. |
|
92 | 96 | |
@@ -95,7 +99,50 b' class ContainerWidget(Widget):' | |||
|
95 | 99 | enabled: bool (optional) |
|
96 | 100 | Enabled or disable the center alignment of the container, defaults to |
|
97 | 101 | True.""" |
|
98 | self._center = enabled | |
|
102 | self._align_center = enabled | |
|
99 | 103 | if enabled: |
|
100 | self._start = False | |
|
101 | self._end = False | |
|
104 | self._align_start = False | |
|
105 | self._align_end = False | |
|
106 | ||
|
107 | ||
|
108 | def pack_start(self, enabled=True): | |
|
109 | """Make the contents of this container pack to the start of the axis. | |
|
110 | Automatically disables conflicting packings. | |
|
111 | ||
|
112 | Parameters | |
|
113 | ---------- | |
|
114 | enabled: bool (optional) | |
|
115 | Enabled or disable the start packing of the container, defaults to | |
|
116 | True.""" | |
|
117 | self._pack_start = enabled | |
|
118 | if enabled: | |
|
119 | self._pack_end = False | |
|
120 | self._pack_center = False | |
|
121 | ||
|
122 | def pack_end(self, enabled=True): | |
|
123 | """Make the contents of this container pack to the end of the axis. | |
|
124 | Automatically disables conflicting packings. | |
|
125 | ||
|
126 | Parameters | |
|
127 | ---------- | |
|
128 | enabled: bool (optional) | |
|
129 | Enabled or disable the end packing of the container, defaults to | |
|
130 | True.""" | |
|
131 | self._pack_end = enabled | |
|
132 | if enabled: | |
|
133 | self._pack_start = False | |
|
134 | self._pack_center = False | |
|
135 | ||
|
136 | def pack_center(self, enabled=True): | |
|
137 | """Make the contents of this container pack to the center of the axis. | |
|
138 | Automatically disables conflicting packings. | |
|
139 | ||
|
140 | Parameters | |
|
141 | ---------- | |
|
142 | enabled: bool (optional) | |
|
143 | Enabled or disable the center packing of the container, defaults to | |
|
144 | True.""" | |
|
145 | self._pack_center = enabled | |
|
146 | if enabled: | |
|
147 | self._pack_start = False | |
|
148 | self._pack_end = False |
General Comments 0
You need to be logged in to leave comments.
Login now