Show More
@@ -6,20 +6,22 require(["notebook/js/widget"], function(){ | |||
|
6 | 6 | |
|
7 | 7 | render : function(){ |
|
8 | 8 | this.$el = $('<div />') |
|
9 | .addClass('widget_container') | |
|
9 | 10 | .addClass(this.model.comm.comm_id); |
|
10 | 11 | }, |
|
11 | 12 | |
|
12 | 13 | update : function(){ |
|
13 | if (this.model.get('vbox')) { | |
|
14 | this.$el.addClass('vbox'); | |
|
15 | } else { | |
|
16 | this.$el.removeClass('vbox'); | |
|
17 | } | |
|
18 | 14 | |
|
19 | if (this.model.get('hbox')) { | |
|
20 | this.$el.addClass('hbox'); | |
|
15 | // Apply flexible box model properties by adding and removing | |
|
16 | // corrosponding CSS classes. | |
|
17 | // Defined in IPython/html/static/base/less/flexbox.less | |
|
18 | var flex_properties = ['vbox', 'hbox', 'center', 'end', 'center']; | |
|
19 | for (var index in flex_properties) { | |
|
20 | if (this.model.get('_' + flex_properties[index])) { | |
|
21 | this.$el.addClass(flex_properties[index]); | |
|
21 | 22 | } else { |
|
22 |
this.$el.removeClass( |
|
|
23 | this.$el.removeClass(flex_properties[index]); | |
|
24 | } | |
|
23 | 25 | } |
|
24 | 26 | }, |
|
25 | 27 | }); |
@@ -1,25 +1,20 | |||
|
1 | 1 | |
|
2 |
div.widget_ |
|
|
3 | page-break-inside: avoid; | |
|
4 | .vbox(); | |
|
2 | div.widget_container { | |
|
3 | .box-flex2(); | |
|
4 | .border-box-sizing(); | |
|
5 | 5 | } |
|
6 | 6 | |
|
7 |
div.widget_ |
|
|
7 | div.widget_area { | |
|
8 | page-break-inside: avoid; | |
|
8 | 9 | .hbox(); |
|
9 | 10 | } |
|
10 | 11 | |
|
11 | div.widget_vbox { | |
|
12 | .vbox(); | |
|
13 | } | |
|
14 | ||
|
15 | div.widget_item { | |
|
16 | display: inline-block; | |
|
17 | } | |
|
18 | ||
|
19 | 12 | /* This class is for the widget subarea inside the widget_area and after |
|
20 | 13 | the prompt div. */ |
|
21 | 14 | div.widget_subarea { |
|
22 | 15 | padding: 0.44em 0.4em 0.4em 1px; |
|
23 | 16 | margin-left: 6px; |
|
24 | .box-flex1(); | |
|
17 | .border-box-sizing(); | |
|
18 | .vbox(); | |
|
19 | .box-flex2() | |
|
25 | 20 | } |
@@ -165,5 +165,10 h1:hover .anchor-link,h2:hover .anchor-link,h3:hover .anchor-link,h4:hover .anch | |||
|
165 | 165 | .ipython_tooltip .tooltiptext pre{border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;font-size:100%;background-color:#f7f7f7;} |
|
166 | 166 | .pretooltiparrow{left:0px;margin:0px;top:-16px;width:40px;height:16px;overflow:hidden;position:absolute;} |
|
167 | 167 | .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);} |
|
168 | .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;} | |
|
169 | .hbox>*{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;display:block;} | |
|
170 | .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;} | |
|
171 | .vbox>*{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;display:block;} | |
|
168 | 172 | 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;} |
|
173 | div.widget_item{display:inline-block;} | |
|
169 | 174 | 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;} |
@@ -1584,4 +1584,10 span#checkpoint_status,span#autosave_status{font-size:small;} | |||
|
1584 | 1584 | .ipython_tooltip .tooltiptext pre{border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;font-size:100%;background-color:#f7f7f7;} |
|
1585 | 1585 | .pretooltiparrow{left:0px;margin:0px;top:-16px;width:40px;height:16px;overflow:hidden;position:absolute;} |
|
1586 | 1586 | .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);} |
|
1587 | .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;} | |
|
1588 | .hbox>*{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;display:block;} | |
|
1589 | .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;} | |
|
1590 | .vbox>*{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;display:block;} | |
|
1591 | 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;} | |
|
1592 | div.widget_item{display:inline-block;} | |
|
1587 | 1593 | 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;} |
@@ -4,7 +4,39 from IPython.utils.traitlets import Unicode, Bool | |||
|
4 | 4 | class ContainerWidget(Widget): |
|
5 | 5 | target_name = Unicode('container_widget') |
|
6 | 6 | default_view_name = Unicode('ContainerView') |
|
7 | _keys = ['vbox', 'hbox'] | |
|
7 | _keys = ['_vbox', '_hbox', '_start', '_end', '_center'] | |
|
8 | _trait_changing = False | |
|
8 | 9 | |
|
9 |
hbox = Bool( |
|
|
10 | vbox = Bool(False) No newline at end of file | |
|
10 | _hbox = Bool(False) | |
|
11 | _vbox = Bool(False) | |
|
12 | _start = Bool(False) | |
|
13 | _end = Bool(False) | |
|
14 | _center = Bool(False) | |
|
15 | ||
|
16 | def hbox(self, enabled=True): | |
|
17 | self._hbox = enabled | |
|
18 | if enabled: | |
|
19 | self._vbox = False | |
|
20 | ||
|
21 | def vbox(self, enabled=True): | |
|
22 | self._vbox = enabled | |
|
23 | if enabled: | |
|
24 | self._hbox = False | |
|
25 | ||
|
26 | def start(self, enabled=True): | |
|
27 | self._start = enabled | |
|
28 | if enabled: | |
|
29 | self._end = False | |
|
30 | self._center = False | |
|
31 | ||
|
32 | def end(self, enabled=True): | |
|
33 | self._end = enabled | |
|
34 | if enabled: | |
|
35 | self._start = False | |
|
36 | self._center = False | |
|
37 | ||
|
38 | def center(self, enabled=True): | |
|
39 | self._center = enabled | |
|
40 | if enabled: | |
|
41 | self._start = False | |
|
42 | self._end = False |
General Comments 0
You need to be logged in to leave comments.
Login now