From f2e40b7d5777dd2d9c128687f35af876abada385 2014-02-03 20:05:47 From: Brian E. Granger Date: 2014-02-03 20:05:47 Subject: [PATCH] Merge pull request #4982 from ellisonbg/slider-readout Live readout for slider widgets --- diff --git a/IPython/html/static/notebook/js/widgets/widget_int.js b/IPython/html/static/notebook/js/widgets/widget_int.js index 94de0a9..2eb7069 100644 --- a/IPython/html/static/notebook/js/widgets/widget_int.js +++ b/IPython/html/static/notebook/js/widgets/widget_int.js @@ -25,17 +25,22 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){ .appendTo(this.$el) .addClass('widget-hlabel') .hide(); + this.$slider = $('
') .slider({}) .addClass('slider'); - // Put the slider in a container this.$slider_container = $('
') .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 = $('
') + .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(); }, diff --git a/IPython/html/static/notebook/less/widgets.less b/IPython/html/static/notebook/less/widgets.less index 97056ba..39021e6 100644 --- a/IPython/html/static/notebook/less/widgets.less +++ b/IPython/html/static/notebook/less/widgets.less @@ -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; diff --git a/IPython/html/static/style/ipython.min.css b/IPython/html/static/style/ipython.min.css index 42397ab..c238537 100644 --- a/IPython/html/static/style/ipython.min.css +++ b/IPython/html/static/style/ipython.min.css @@ -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} diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css index a7e7148..8949090 100644 --- a/IPython/html/static/style/style.min.css +++ b/IPython/html/static/style/style.min.css @@ -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} diff --git a/IPython/html/widgets/widget_float.py b/IPython/html/widgets/widget_float.py index 5132331..5f9e2da 100644 --- a/IPython/html/widgets/widget_float.py +++ b/IPython/html/widgets/widget_float.py @@ -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): diff --git a/IPython/html/widgets/widget_int.py b/IPython/html/widgets/widget_int.py index 97c2e0e..e1090d9 100644 --- a/IPython/html/widgets/widget_int.py +++ b/IPython/html/widgets/widget_int.py @@ -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):