mirror/notebook
2
0
Fork 0
mirror of https://github.com/jupyter/notebook.git synced 2025-01-12 11:45:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4982 from ellisonbg/slider-readout

Browse Source 
Live readout for slider widgets
This commit is contained in:
Brian E. Granger 2014-02-03 12:05:47 -08:00
commit 5fc70a924d
6 changed files with 44 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
IPython/html/static/notebook/js/widgets/widget_int.js
View File

@ -25,17 +25,22 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
.appendTo(this.$el)
.addClass('widget-hlabel')
.hide();
this.$slider = $('<div />')
.slider({})
.addClass('slider');
// Put the slider in a container
this.$slider_container = $('<div />')
.addClass('widget-hslider')
.append(this.$slider);
.append(this.$slider)
this.$el_to_style = this.$slider_container; // Set default element to style
this.$el.append(this.$slider_container);
this.$readout = $('<div/>')
.appendTo(this.$el)
.addClass('widget-hreadout')
.hide();
// Set defaults.
this.update();
},
@ -71,6 +76,7 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
this.$slider.slider('option', 'orientation', orientation);
value = this.model.get('value');
this.$slider.slider('option', 'value', value);
this.$readout.text(value);
// Use the right CSS classes for vertical & horizontal sliders
if (orientation=='vertical') {
@ -83,6 +89,9 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
this.$label
.removeClass('widget-hlabel')
.addClass('widget-vlabel');
this.$readout
.removeClass('widget-hreadout')
.addClass('widget-vreadout');
} else {
this.$slider_container
@ -94,6 +103,9 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
this.$label
.removeClass('widget-vlabel')
.addClass('widget-hlabel');
this.$readout
.removeClass('widget-vreadout')
.addClass('widget-hreadout');
}
var description = this.model.get('description');
@ -103,6 +115,13 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
this.$label.text(description);
this.$label.show();
}
var readout = this.model.get('readout');
if (readout) {
this.$readout.show();
} else {
this.$readout.hide();
}
}
return IntSliderView.__super__.update.apply(this);
},
@ -117,7 +136,9 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
// Calling model.set will trigger all of the other views of the
// model to update.
this.model.set('value', this._validate_slide_value(ui.value), {updated_view: this});
var actual_value = this._validate_slide_value(ui.value);
this.model.set('value', actual_value, {updated_view: this});
this.$readout.text(actual_value);
this.touch();
},

14
IPython/html/static/notebook/less/widgets.less
View File

@ -46,6 +46,20 @@
vertical-align : text-bottom;
}
.widget-hreadout {
padding-left : 8px;
padding-top : 3px;
text-align : left;
vertical-align : text-top;
}
.widget-vreadout {
/* Vertical Label */
padding-top : 5px;
text-align : center;
vertical-align : text-top;
}
.slide-track {
/* Slider Track */
border : 1px solid #CCCCCC;

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

@ -167,6 +167,8 @@ div.cell.text_cell.rendered{padding:0}
.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}.widget-area .widget-subarea{padding:.44em .4em .4em 1px;margin-left:6px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;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;width:100%;-webkit-box-flex:2;-moz-box-flex:2;box-flex:2}
.widget-hlabel{min-width:10ex;padding-right:8px;padding-top:3px;text-align:right;vertical-align:text-top}
.widget-vlabel{padding-bottom:5px;text-align:center;vertical-align:text-bottom}
.widget-hreadout{padding-left:8px;padding-top:3px;text-align:left;vertical-align:text-top}
.widget-vreadout{padding-top:5px;text-align:center;vertical-align:text-top}
.slide-track{border:1px solid #ccc;background:#fff;border-radius:4px;}
.widget-hslider{padding-left:8px;padding-right:5px;overflow:visible;width:348px;height:5px;max-height:5px;margin-top:11px;border:1px solid #ccc;background:#fff;border-radius:4px;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}.widget-hslider .ui-slider{border:0 !important;background:none !important;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;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1}.widget-hslider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-8px !important}
.widget-vslider{padding-bottom:8px;overflow:visible;width:5px;max-width:5px;height:250px;margin-left:12px;border:1px solid #ccc;background:#fff;border-radius:4px;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;width:100%}.widget-vslider .ui-slider{border:0 !important;background:none !important;margin-left:-4px;margin-top:5px;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;width:100%;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1}.widget-vslider .ui-slider .ui-slider-handle{width:28px !important;height:14px !important;margin-left:-9px}

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

@ -1381,6 +1381,8 @@ div.cell.text_cell.rendered{padding:0}
.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}.widget-area .widget-subarea{padding:.44em .4em .4em 1px;margin-left:6px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;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;width:100%;-webkit-box-flex:2;-moz-box-flex:2;box-flex:2}
.widget-hlabel{min-width:10ex;padding-right:8px;padding-top:3px;text-align:right;vertical-align:text-top}
.widget-vlabel{padding-bottom:5px;text-align:center;vertical-align:text-bottom}
.widget-hreadout{padding-left:8px;padding-top:3px;text-align:left;vertical-align:text-top}
.widget-vreadout{padding-top:5px;text-align:center;vertical-align:text-top}
.slide-track{border:1px solid #ccc;background:#fff;border-radius:4px;}
.widget-hslider{padding-left:8px;padding-right:5px;overflow:visible;width:348px;height:5px;max-height:5px;margin-top:11px;border:1px solid #ccc;background:#fff;border-radius:4px;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}.widget-hslider .ui-slider{border:0 !important;background:none !important;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;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1}.widget-hslider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-8px !important}
.widget-vslider{padding-bottom:8px;overflow:visible;width:5px;max-width:5px;height:250px;margin-left:12px;border:1px solid #ccc;background:#fff;border-radius:4px;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;width:100%}.widget-vslider .ui-slider{border:0 !important;background:none !important;margin-left:-4px;margin-top:5px;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;width:100%;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1}.widget-vslider .ui-slider .ui-slider-handle{width:28px !important;height:14px !important;margin-left:-9px}

1
IPython/html/widgets/widget_float.py
View File

@ -53,6 +53,7 @@ class FloatSliderWidget(_BoundedFloatWidget):
_view_name = Unicode('FloatSliderView', sync=True)
orientation = Enum([u'horizontal', u'vertical'], u'horizontal',
help="Vertical or horizontal.", sync=True)
readout = Bool(False, help="Display the current value of the slider next to it.", sync=True)
class FloatProgressWidget(_BoundedFloatWidget):

1
IPython/html/widgets/widget_int.py
View File

@ -53,6 +53,7 @@ class IntSliderWidget(_BoundedIntWidget):
_view_name = Unicode('IntSliderView', sync=True)
orientation = Enum([u'horizontal', u'vertical'], u'horizontal',
help="Vertical or horizontal.", sync=True)
readout = Bool(False, help="Display the current value of the slider next to it.", sync=True)
class IntProgressWidget(_BoundedIntWidget):