##// END OF EJS Templates
Better fix for empty dropdown button alignment...
Jonathan Frederic -
Show More
@@ -1,251 +1,260
1 define(["notebook/js/widget"], function(){
1 define(["notebook/js/widget"], function(){
2 var SelectionWidgetModel = IPython.WidgetModel.extend({});
2 var SelectionWidgetModel = IPython.WidgetModel.extend({});
3 IPython.widget_manager.register_widget_model('SelectionWidgetModel', SelectionWidgetModel);
3 IPython.widget_manager.register_widget_model('SelectionWidgetModel', SelectionWidgetModel);
4
4
5 var DropdownView = IPython.WidgetView.extend({
5 var DropdownView = IPython.WidgetView.extend({
6
6
7 // Called when view is rendered.
7 // Called when view is rendered.
8 render : function(){
8 render : function(){
9
9
10 this.$el
10 this.$el
11 .addClass('widget-hbox-single')
11 .addClass('widget-hbox-single')
12 .html('');
12 .html('');
13 this.$label = $('<div />')
13 this.$label = $('<div />')
14 .appendTo(this.$el)
14 .appendTo(this.$el)
15 .addClass('widget-hlabel')
15 .addClass('widget-hlabel')
16 .hide();
16 .hide();
17 this.$buttongroup = $('<div />')
17 this.$buttongroup = $('<div />')
18 .addClass('widget_item')
18 .addClass('widget_item')
19 .addClass('btn-group')
19 .addClass('btn-group')
20 .appendTo(this.$el);
20 .appendTo(this.$el);
21 this.$el_to_style = this.$buttongroup; // Set default element to style
21 this.$el_to_style = this.$buttongroup; // Set default element to style
22 this.$droplabel = $('<button />')
22 this.$droplabel = $('<button />')
23 .addClass('btn')
23 .addClass('btn')
24 .addClass('widget-combo-btn')
24 .addClass('widget-combo-btn')
25 .html('&nbsp;')
25 .appendTo(this.$buttongroup);
26 .appendTo(this.$buttongroup);
26 this.$dropbutton = $('<button />')
27 this.$dropbutton = $('<button />')
27 .addClass('btn')
28 .addClass('btn')
28 .addClass('dropdown-toggle')
29 .addClass('dropdown-toggle')
30 .addClass('widget-combo-carrot-btn')
29 .attr('data-toggle', 'dropdown')
31 .attr('data-toggle', 'dropdown')
30 .html('<span class="caret"></span>')
32 .html('<span class="caret"></span>')
31 .appendTo(this.$buttongroup);
33 .appendTo(this.$buttongroup);
32 this.$droplist = $('<ul />')
34 this.$droplist = $('<ul />')
33 .addClass('dropdown-menu')
35 .addClass('dropdown-menu')
34 .appendTo(this.$buttongroup);
36 .appendTo(this.$buttongroup);
35
37
36 // Set defaults.
38 // Set defaults.
37 this.update();
39 this.update();
38 },
40 },
39
41
40 // Handles: Backend -> Frontend Sync
42 // Handles: Backend -> Frontend Sync
41 // Frontent -> Frontend Sync
43 // Frontent -> Frontend Sync
42 update : function(){
44 update : function(){
45
46 var selected_item_text = this.model.get('value');
47 selected_item_text.replace(' ', '');
48 if (selected_item_text == '') {
49 this.$droplabel.html('&nbsp;');
50 } else {
43 this.$droplabel.html(this.model.get('value'));
51 this.$droplabel.html(this.model.get('value'));
52 }
44
53
45 var items = this.model.get('values');
54 var items = this.model.get('values');
46 this.$droplist.html('');
55 this.$droplist.html('');
47 for (var index in items) {
56 for (var index in items) {
48 var that = this;
57 var that = this;
49 var item_button = $('<a href="#"/>')
58 var item_button = $('<a href="#"/>')
50 .html(items[index])
59 .html(items[index])
51 .on('click', function(e){
60 .on('click', function(e){
52 that.model.set('value', $(e.target).html(), this);
61 that.model.set('value', $(e.target).html(), this);
53 that.model.update_other_views(that);
62 that.model.update_other_views(that);
54 })
63 })
55
64
56 this.$droplist.append($('<li />').append(item_button))
65 this.$droplist.append($('<li />').append(item_button))
57 }
66 }
58
67
59 if (this.model.get('disabled')) {
68 if (this.model.get('disabled')) {
60 this.$buttongroup.attr('disabled','disabled');
69 this.$buttongroup.attr('disabled','disabled');
61 this.$droplabel.attr('disabled','disabled');
70 this.$droplabel.attr('disabled','disabled');
62 this.$dropbutton.attr('disabled','disabled');
71 this.$dropbutton.attr('disabled','disabled');
63 this.$droplist.attr('disabled','disabled');
72 this.$droplist.attr('disabled','disabled');
64 } else {
73 } else {
65 this.$buttongroup.removeAttr('disabled');
74 this.$buttongroup.removeAttr('disabled');
66 this.$droplabel.removeAttr('disabled');
75 this.$droplabel.removeAttr('disabled');
67 this.$dropbutton.removeAttr('disabled');
76 this.$dropbutton.removeAttr('disabled');
68 this.$droplist.removeAttr('disabled');
77 this.$droplist.removeAttr('disabled');
69 }
78 }
70
79
71 var description = this.model.get('description');
80 var description = this.model.get('description');
72 if (description.length == 0) {
81 if (description.length == 0) {
73 this.$label.hide();
82 this.$label.hide();
74 } else {
83 } else {
75 this.$label.html(description);
84 this.$label.html(description);
76 this.$label.show();
85 this.$label.show();
77 }
86 }
78 return IPython.WidgetView.prototype.update.call(this);
87 return IPython.WidgetView.prototype.update.call(this);
79 },
88 },
80
89
81 });
90 });
82
91
83 IPython.widget_manager.register_widget_view('DropdownView', DropdownView);
92 IPython.widget_manager.register_widget_view('DropdownView', DropdownView);
84
93
85 var RadioButtonsView = IPython.WidgetView.extend({
94 var RadioButtonsView = IPython.WidgetView.extend({
86
95
87 // Called when view is rendered.
96 // Called when view is rendered.
88 render : function(){
97 render : function(){
89 this.$el
98 this.$el
90 .addClass('widget-hbox')
99 .addClass('widget-hbox')
91 .html('');
100 .html('');
92 this.$label = $('<div />')
101 this.$label = $('<div />')
93 .appendTo(this.$el)
102 .appendTo(this.$el)
94 .addClass('widget-hlabel')
103 .addClass('widget-hlabel')
95 .hide();
104 .hide();
96 this.$container = $('<div />')
105 this.$container = $('<div />')
97 .appendTo(this.$el)
106 .appendTo(this.$el)
98 .addClass('widget-container')
107 .addClass('widget-container')
99 .addClass('vbox');
108 .addClass('vbox');
100 this.$el_to_style = this.$container; // Set default element to style
109 this.$el_to_style = this.$container; // Set default element to style
101 this.update();
110 this.update();
102 },
111 },
103
112
104 // Handles: Backend -> Frontend Sync
113 // Handles: Backend -> Frontend Sync
105 // Frontent -> Frontend Sync
114 // Frontent -> Frontend Sync
106 update : function(){
115 update : function(){
107
116
108 // Add missing items to the DOM.
117 // Add missing items to the DOM.
109 var items = this.model.get('values');
118 var items = this.model.get('values');
110 var disabled = this.model.get('disabled');
119 var disabled = this.model.get('disabled');
111 for (var index in items) {
120 for (var index in items) {
112 var item_query = ' :input[value="' + items[index] + '"]';
121 var item_query = ' :input[value="' + items[index] + '"]';
113 if (this.$el.find(item_query).length == 0) {
122 if (this.$el.find(item_query).length == 0) {
114 var $label = $('<label />')
123 var $label = $('<label />')
115 .addClass('radio')
124 .addClass('radio')
116 .html(items[index])
125 .html(items[index])
117 .appendTo(this.$container);
126 .appendTo(this.$container);
118
127
119 var that = this;
128 var that = this;
120 $('<input />')
129 $('<input />')
121 .attr('type', 'radio')
130 .attr('type', 'radio')
122 .addClass(this.model)
131 .addClass(this.model)
123 .val(items[index])
132 .val(items[index])
124 .prependTo($label)
133 .prependTo($label)
125 .on('click', function(e){
134 .on('click', function(e){
126 that.model.set('value', $(e.target).val(), this);
135 that.model.set('value', $(e.target).val(), this);
127 that.model.update_other_views(that);
136 that.model.update_other_views(that);
128 });
137 });
129 }
138 }
130
139
131 var $item_element = this.$container.find(item_query);
140 var $item_element = this.$container.find(item_query);
132 if (this.model.get('value') == items[index]) {
141 if (this.model.get('value') == items[index]) {
133 $item_element.prop('checked', true);
142 $item_element.prop('checked', true);
134 } else {
143 } else {
135 $item_element.prop('checked', false);
144 $item_element.prop('checked', false);
136 }
145 }
137 $item_element.prop('disabled', disabled);
146 $item_element.prop('disabled', disabled);
138 }
147 }
139
148
140 // Remove items that no longer exist.
149 // Remove items that no longer exist.
141 this.$container.find('input').each(function(i, obj) {
150 this.$container.find('input').each(function(i, obj) {
142 var value = $(obj).val();
151 var value = $(obj).val();
143 var found = false;
152 var found = false;
144 for (var index in items) {
153 for (var index in items) {
145 if (items[index] == value) {
154 if (items[index] == value) {
146 found = true;
155 found = true;
147 break;
156 break;
148 }
157 }
149 }
158 }
150
159
151 if (!found) {
160 if (!found) {
152 $(obj).parent().remove();
161 $(obj).parent().remove();
153 }
162 }
154 });
163 });
155
164
156 var description = this.model.get('description');
165 var description = this.model.get('description');
157 if (description.length == 0) {
166 if (description.length == 0) {
158 this.$label.hide();
167 this.$label.hide();
159 } else {
168 } else {
160 this.$label.html(description);
169 this.$label.html(description);
161 this.$label.show();
170 this.$label.show();
162 }
171 }
163 return IPython.WidgetView.prototype.update.call(this);
172 return IPython.WidgetView.prototype.update.call(this);
164 },
173 },
165
174
166 });
175 });
167
176
168 IPython.widget_manager.register_widget_view('RadioButtonsView', RadioButtonsView);
177 IPython.widget_manager.register_widget_view('RadioButtonsView', RadioButtonsView);
169
178
170
179
171 var ToggleButtonsView = IPython.WidgetView.extend({
180 var ToggleButtonsView = IPython.WidgetView.extend({
172
181
173 // Called when view is rendered.
182 // Called when view is rendered.
174 render : function(){
183 render : function(){
175 this.$el
184 this.$el
176 .addClass('widget-hbox-single')
185 .addClass('widget-hbox-single')
177 .html('');
186 .html('');
178 this.$label = $('<div />')
187 this.$label = $('<div />')
179 .appendTo(this.$el)
188 .appendTo(this.$el)
180 .addClass('widget-hlabel')
189 .addClass('widget-hlabel')
181 .hide();
190 .hide();
182 this.$buttongroup = $('<div />')
191 this.$buttongroup = $('<div />')
183 .addClass('btn-group')
192 .addClass('btn-group')
184 .attr('data-toggle', 'buttons-radio')
193 .attr('data-toggle', 'buttons-radio')
185 .appendTo(this.$el);
194 .appendTo(this.$el);
186 this.$el_to_style = this.$buttongroup; // Set default element to style
195 this.$el_to_style = this.$buttongroup; // Set default element to style
187 this.update();
196 this.update();
188 },
197 },
189
198
190 // Handles: Backend -> Frontend Sync
199 // Handles: Backend -> Frontend Sync
191 // Frontent -> Frontend Sync
200 // Frontent -> Frontend Sync
192 update : function(){
201 update : function(){
193
202
194 // Add missing items to the DOM.
203 // Add missing items to the DOM.
195 var items = this.model.get('values');
204 var items = this.model.get('values');
196 var disabled = this.model.get('disabled');
205 var disabled = this.model.get('disabled');
197 for (var index in items) {
206 for (var index in items) {
198 var item_query = ' :contains("' + items[index] + '")';
207 var item_query = ' :contains("' + items[index] + '")';
199 if (this.$buttongroup.find(item_query).length == 0) {
208 if (this.$buttongroup.find(item_query).length == 0) {
200
209
201 var that = this;
210 var that = this;
202 $('<button />')
211 $('<button />')
203 .attr('type', 'button')
212 .attr('type', 'button')
204 .addClass('btn')
213 .addClass('btn')
205 .html(items[index])
214 .html(items[index])
206 .appendTo(this.$buttongroup)
215 .appendTo(this.$buttongroup)
207 .on('click', function(e){
216 .on('click', function(e){
208 that.model.set('value', $(e.target).html(), this);
217 that.model.set('value', $(e.target).html(), this);
209 that.model.update_other_views(that);
218 that.model.update_other_views(that);
210 });
219 });
211 }
220 }
212
221
213 var $item_element = this.$buttongroup.find(item_query);
222 var $item_element = this.$buttongroup.find(item_query);
214 if (this.model.get('value') == items[index]) {
223 if (this.model.get('value') == items[index]) {
215 $item_element.addClass('active');
224 $item_element.addClass('active');
216 } else {
225 } else {
217 $item_element.removeClass('active');
226 $item_element.removeClass('active');
218 }
227 }
219 $item_element.prop('disabled', disabled);
228 $item_element.prop('disabled', disabled);
220 }
229 }
221
230
222 // Remove items that no longer exist.
231 // Remove items that no longer exist.
223 this.$buttongroup.find('button').each(function(i, obj) {
232 this.$buttongroup.find('button').each(function(i, obj) {
224 var value = $(obj).html();
233 var value = $(obj).html();
225 var found = false;
234 var found = false;
226 for (var index in items) {
235 for (var index in items) {
227 if (items[index] == value) {
236 if (items[index] == value) {
228 found = true;
237 found = true;
229 break;
238 break;
230 }
239 }
231 }
240 }
232
241
233 if (!found) {
242 if (!found) {
234 $(obj).remove();
243 $(obj).remove();
235 }
244 }
236 });
245 });
237
246
238 var description = this.model.get('description');
247 var description = this.model.get('description');
239 if (description.length == 0) {
248 if (description.length == 0) {
240 this.$label.hide();
249 this.$label.hide();
241 } else {
250 } else {
242 this.$label.html(description);
251 this.$label.html(description);
243 this.$label.show();
252 this.$label.show();
244 }
253 }
245 return IPython.WidgetView.prototype.update.call(this);
254 return IPython.WidgetView.prototype.update.call(this);
246 },
255 },
247
256
248 });
257 });
249
258
250 IPython.widget_manager.register_widget_view('ToggleButtonsView', ToggleButtonsView);
259 IPython.widget_manager.register_widget_view('ToggleButtonsView', ToggleButtonsView);
251 });
260 });
@@ -1,130 +1,129
1
1
2 .widget-area {
2 .widget-area {
3 page-break-inside: avoid;
3 page-break-inside: avoid;
4 .hbox();
4 .hbox();
5
5
6 .widget-subarea {
6 .widget-subarea {
7 padding: 0.44em 0.4em 0.4em 1px;
7 padding: 0.44em 0.4em 0.4em 1px;
8 margin-left: 6px;
8 margin-left: 6px;
9 .border-box-sizing();
9 .border-box-sizing();
10 .vbox();
10 .vbox();
11 .box-flex2();
11 .box-flex2();
12
12
13 .widget-hlabel {
13 .widget-hlabel {
14 min-width: 10ex;
14 min-width: 10ex;
15 padding-right: 8px;
15 padding-right: 8px;
16 text-align: right;
16 text-align: right;
17 vertical-align: text-top;
17 vertical-align: text-top;
18 padding-top: 3px;
18 padding-top: 3px;
19 }
19 }
20
20
21 .widget-vlabel {
21 .widget-vlabel {
22 text-align: center;
22 text-align: center;
23 vertical-align: text-bottom;
23 vertical-align: text-bottom;
24 padding-bottom: 5px;
24 padding-bottom: 5px;
25 }
25 }
26
26
27 .widget-hslider {
27 .widget-hslider {
28 padding-left: 8px;
28 padding-left: 8px;
29 padding-right: 5px;
29 padding-right: 5px;
30 margin-top: 11px;
30 margin-top: 11px;
31
31
32 width: 348px;
32 width: 348px;
33 height: 5px !important;
33 height: 5px !important;
34 overflow: visible !important;
34 overflow: visible !important;
35
35
36 border: 1px solid #CCCCCC;
36 border: 1px solid #CCCCCC;
37 background: #FFFFFF;
37 background: #FFFFFF;
38 .corner-all();
38 .corner-all();
39
39
40 .ui-slider {
40 .ui-slider {
41 border: 0px !important;
41 border: 0px !important;
42 background: none !important;
42 background: none !important;
43
43
44 .ui-slider-handle {
44 .ui-slider-handle {
45 width: 14px !important;
45 width: 14px !important;
46 height: 28px !important;
46 height: 28px !important;
47
47
48 margin-top: -8px !important;
48 margin-top: -8px !important;
49 }
49 }
50 }
50 }
51 }
51 }
52
52
53 .widget-vslider {
53 .widget-vslider {
54 border: 1px solid #CCCCCC;
54 border: 1px solid #CCCCCC;
55 background: #FFFFFF;
55 background: #FFFFFF;
56 width: 5px;
56 width: 5px;
57 margin-left: 12px;
57 margin-left: 12px;
58 padding-bottom: 14px;
58 padding-bottom: 14px;
59 .corner-all();
59 .corner-all();
60 height: 250px;
60 height: 250px;
61
61
62 .ui-slider {
62 .ui-slider {
63 border: 0px !important;
63 border: 0px !important;
64 background: none !important;
64 background: none !important;
65 margin-left: -4px;
65 margin-left: -4px;
66 margin-top: 5px;
66 margin-top: 5px;
67 height: 100%;
67 height: 100%;
68
68
69 .ui-slider-handle {
69 .ui-slider-handle {
70 width: 28px !important;
70 width: 28px !important;
71 height: 14px !important;
71 height: 14px !important;
72 margin-left: -9px;
72 margin-left: -9px;
73 }
73 }
74 }
74 }
75 }
75 }
76
76
77 .widget-text {
77 .widget-text {
78 width: 350px;
78 width: 350px;
79 margin-bottom: 0px;
79 margin-bottom: 0px;
80 }
80 }
81
81
82 .widget-numeric-text {
82 .widget-numeric-text {
83 width: 150px;
83 width: 150px;
84 }
84 }
85
85
86 .widget-progress {
86 .widget-progress {
87 width: 363px;
87 width: 363px;
88
88
89 /* Disable progress bar animation */
89 /* Disable progress bar animation */
90 .bar {
90 .bar {
91 -webkit-transition: none;
91 -webkit-transition: none;
92 -moz-transition: none;
92 -moz-transition: none;
93 -ms-transition: none;
93 -ms-transition: none;
94 -o-transition: none;
94 -o-transition: none;
95 transition: none;
95 transition: none;
96 }
96 }
97 }
97 }
98
98
99 .widget-combo-btn {
99 .widget-combo-btn {
100 min-width: 138px; /* + 26px drop arrow btn = 164px */
100 min-width: 138px; /* + 26px drop arrow btn = 164px */
101 min-height: 1ex;
102 }
101 }
103
102
104 .widget-container {
103 .widget-container {
105 .border-box-sizing();
104 .border-box-sizing();
106 }
105 }
107
106
108 .widget-box {
107 .widget-box {
109 .start();
108 .start();
110 .widget-container();
109 .widget-container();
111 margin: 5px;
110 margin: 5px;
112 }
111 }
113
112
114 .widget-hbox {
113 .widget-hbox {
115 .widget-box();
114 .widget-box();
116 .hbox();
115 .hbox();
117 }
116 }
118
117
119 .widget-hbox-single {
118 .widget-hbox-single {
120 .widget-hbox();
119 .widget-hbox();
121 height: 30px;
120 height: 30px;
122 }
121 }
123
122
124 .widget-vbox-single {
123 .widget-vbox-single {
125 .widget-box();
124 .widget-box();
126 .vbox();
125 .vbox();
127 width: 30px;
126 width: 30px;
128 }
127 }
129 }
128 }
130 }
129 }
General Comments 0
You need to be logged in to leave comments. Login now