From 49fc475fec8d62fea3dd62296df4fda86dfacb7c 2014-01-16 10:56:02 From: Jonathan Frederic Date: 2014-01-16 10:56:02 Subject: [PATCH] Fix slider orientation change, value-handle-offset bug --- diff --git a/IPython/html/static/notebook/js/widgets/float_range.js b/IPython/html/static/notebook/js/widgets/float_range.js index 3ca91d5..b8fe857 100644 --- a/IPython/html/static/notebook/js/widgets/float_range.js +++ b/IPython/html/static/notebook/js/widgets/float_range.js @@ -31,7 +31,7 @@ require(["notebook/js/widget"], function(){ // Frontent -> Frontend Sync update : function(){ // Slider related keys. - var _keys = ['value', 'step', 'max', 'min', 'disabled', 'orientation']; + var _keys = ['step', 'max', 'min', 'disabled']; for (var index in _keys) { var key = _keys[index]; if (this.model.get(key) != undefined) { @@ -39,7 +39,22 @@ require(["notebook/js/widget"], function(){ } } + // WORKAROUND FOR JQUERY SLIDER BUG. + // The horizontal position of the slider handle + // depends on the value of the slider at the time + // of orientation change. Before applying the new + // workaround, we set the value to the minimum to + // make sure that the horizontal placement of the + // handle in the vertical slider is always + // consistent. var orientation = this.model.get('orientation'); + var value = this.model.get('min'); + this.$slider.slider('option', 'value', value); + this.$slider.slider('option', 'orientation', orientation); + var value = this.model.get('value'); + this.$slider.slider('option', 'value', value); + + // Use the right CSS classes for vertical & horizontal sliders if (orientation=='vertical') { this.$slider_container .removeClass('widget-hslider') diff --git a/IPython/html/static/notebook/less/widgetarea.less b/IPython/html/static/notebook/less/widgetarea.less index e4ae2de..1d6cfca 100644 --- a/IPython/html/static/notebook/less/widgetarea.less +++ b/IPython/html/static/notebook/less/widgetarea.less @@ -45,7 +45,7 @@ width: 14px !important; height: 28px !important; - margin-top: -7px !important; + margin-top: -8px !important; } } } @@ -69,7 +69,7 @@ .ui-slider-handle { width: 28px !important; height: 14px !important; - margin-left: -15px; + margin-left: -9px; } } } diff --git a/IPython/html/static/style/ipython.min.css b/IPython/html/static/style/ipython.min.css index d6880fd..b079a13 100644 --- a/IPython/html/static/style/ipython.min.css +++ b/IPython/html/static/style/ipython.min.css @@ -167,7 +167,7 @@ h1:hover .anchor-link,h2:hover .anchor-link,h3:hover .anchor-link,h4:hover .anch .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);} .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:0.44em 0.4em 0.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-area .widget-subarea .widget-label{min-width:10ex;padding-right:8px;text-align:right;vertical-align:text-top;padding-top:3px;} .widget-area .widget-subarea .widget-hslider{padding-left:8px;padding-right:5px;margin-top:11px;width:348px;height:5px !important;overflow:visible !important;border:1px solid #CCCCCC;background:#FFFFFF;border-radius:4px;}.widget-area .widget-subarea .widget-hslider .ui-slider{border:0px !important;background:none !important;}.widget-area .widget-subarea .widget-hslider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-7px !important;} -.widget-area .widget-subarea .widget-vslider{border:1px solid #CCCCCC;background:#FFFFFF;height:100%;width:5px;margin-left:12px;padding-bottom:14px;border-radius:4px;}.widget-area .widget-subarea .widget-vslider .ui-slider{border:0px !important;background:none !important;margin-left:-4px;height:100%;margin-top:5px;}.widget-area .widget-subarea .widget-vslider .ui-slider .ui-slider-handle{width:28px !important;height:14px !important;margin-left:-15px;} +.widget-area .widget-subarea .widget-vslider{border:1px solid #CCCCCC;background:#FFFFFF;width:5px;margin-left:12px;padding-bottom:14px;border-radius:4px;height:250px;}.widget-area .widget-subarea .widget-vslider .ui-slider{border:0px !important;background:none !important;margin-left:-4px;margin-top:5px;height:100%;}.widget-area .widget-subarea .widget-vslider .ui-slider .ui-slider-handle{width:28px !important;height:14px !important;margin-left:-15px;} .widget-area .widget-subarea .widget-text{width:350px;margin-bottom:0px;} .widget-area .widget-subarea .widget-numeric-text{width:150px;} .widget-area .widget-subarea .widget-progress{width:363px;}.widget-area .widget-subarea .widget-progress .bar{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;} diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css index bab4e21..93df11c 100644 --- a/IPython/html/static/style/style.min.css +++ b/IPython/html/static/style/style.min.css @@ -1586,7 +1586,7 @@ span#checkpoint_status,span#autosave_status{font-size:small;} .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);} .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:0.44em 0.4em 0.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-area .widget-subarea .widget-label{min-width:10ex;padding-right:8px;text-align:right;vertical-align:text-top;padding-top:3px;} .widget-area .widget-subarea .widget-hslider{padding-left:8px;padding-right:5px;margin-top:11px;width:348px;height:5px !important;overflow:visible !important;border:1px solid #CCCCCC;background:#FFFFFF;border-radius:4px;}.widget-area .widget-subarea .widget-hslider .ui-slider{border:0px !important;background:none !important;}.widget-area .widget-subarea .widget-hslider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-7px !important;} -.widget-area .widget-subarea .widget-vslider{border:1px solid #CCCCCC;background:#FFFFFF;height:100%;width:5px;margin-left:12px;padding-bottom:14px;border-radius:4px;}.widget-area .widget-subarea .widget-vslider .ui-slider{border:0px !important;background:none !important;margin-left:-4px;height:100%;margin-top:5px;}.widget-area .widget-subarea .widget-vslider .ui-slider .ui-slider-handle{width:28px !important;height:14px !important;margin-left:-15px;} +.widget-area .widget-subarea .widget-vslider{border:1px solid #CCCCCC;background:#FFFFFF;width:5px;margin-left:12px;padding-bottom:14px;border-radius:4px;height:250px;}.widget-area .widget-subarea .widget-vslider .ui-slider{border:0px !important;background:none !important;margin-left:-4px;margin-top:5px;height:100%;}.widget-area .widget-subarea .widget-vslider .ui-slider .ui-slider-handle{width:28px !important;height:14px !important;margin-left:-15px;} .widget-area .widget-subarea .widget-text{width:350px;margin-bottom:0px;} .widget-area .widget-subarea .widget-numeric-text{width:150px;} .widget-area .widget-subarea .widget-progress{width:363px;}.widget-area .widget-subarea .widget-progress .bar{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}