From f631e5e9b05e6e003447a46f750f121a543c65e6 Mon Sep 17 00:00:00 2001 From: Sylvain Corlay Date: Mon, 2 Nov 2015 16:48:47 -0500 Subject: [PATCH 1/3] Fix styling of slider (alignment with other widgets). --- ipywidgets/static/widgets/js/widget_int.js | 40 +++-- ipywidgets/static/widgets/less/widgets.less | 159 +++++++++++--------- 2 files changed, 105 insertions(+), 94 deletions(-) diff --git a/ipywidgets/static/widgets/js/widget_int.js b/ipywidgets/static/widgets/js/widget_int.js index 13eb214b4c..9a611a0f87 100644 --- a/ipywidgets/static/widgets/js/widget_int.js +++ b/ipywidgets/static/widgets/js/widget_int.js @@ -17,7 +17,7 @@ define([ * Called when view is rendered. */ this.$el - .addClass('ipy-widget widget-hbox widget-slider'); + .addClass('ipy-widget widget-hbox widget-hslider'); this.$label = $('
') .appendTo(this.$el) .addClass('widget-label') @@ -28,7 +28,7 @@ define([ .addClass('slider'); // Put the slider in a container this.$slider_container = $('
') - .addClass('widget-hslider') + .addClass('slider-container') .append(this.$slider); this.$el.append(this.$slider_container); @@ -63,12 +63,10 @@ define([ } else if (name.substring(0, 6) == 'border') { this.$slider.find('a').css(name, value); this.$slider_container.css(name, value); - } else if (name == 'width' || name == 'height' || name == 'background') { + } else if (name == 'background') { this.$slider_container.css(name, value); - } else if (name == 'padding' || name == 'margin') { - this.$el.css(name, value); } else { - this.$slider.css(name, value); + this.$el.css(name, value); } }, @@ -155,7 +153,7 @@ define([ // Use the right CSS classes for vertical & horizontal sliders if (orientation=='vertical') { - this.$slider_container + this.$el .removeClass('widget-hslider') .addClass('widget-vslider'); this.$el @@ -163,7 +161,7 @@ define([ .addClass('widget-vbox'); } else { - this.$slider_container + this.$el .removeClass('widget-vslider') .addClass('widget-hslider'); this.$el @@ -471,11 +469,12 @@ define([ /** * Called when view is rendered. */ - this.$el.addClass('ipy-widget widget-progress'); + this.$el.addClass('ipy-widget widget-hprogress'); this.$label = $('
') .appendTo(this.$el) .addClass('widget-label') .hide(); + this.$progress = $('
') .addClass('progress') .css('position', 'relative') @@ -491,7 +490,7 @@ define([ // Set defaults. this.update(); this.updateDescription(); - + this.listenTo(this.model, 'change:bar_style', function(model, value) { this.update_bar_style(); }, this); @@ -528,8 +527,8 @@ define([ this.$el .removeClass('widget-vbox') .addClass('widget-hbox'); - this.$progress.removeClass('widget-vprogress'); - this.$progress.addClass('widget-hprogress'); + this.$el.removeClass('widget-vprogress'); + this.$el.addClass('widget-hprogress'); this.$bar.css({ 'width': percent + '%', 'height': '100%', @@ -538,8 +537,8 @@ define([ this.$el .removeClass('widget-hbox') .addClass('widget-vbox'); - this.$progress.removeClass('widget-hprogress'); - this.$progress.addClass('widget-vprogress'); + this.$el.removeClass('widget-hprogress'); + this.$el.addClass('widget-vprogress'); this.$bar.css({ 'width': '100%', 'height': percent + '%', @@ -562,17 +561,12 @@ define([ /** * Set a css attr of the widget view. */ - if (name.substring(0, 6) == 'border' || name == 'width' || - name == 'height' || name == 'background' || name == 'margin' || - name == 'padding') { - - this.$progress.css(name, value); - } else if (name == 'color') { + if (name == 'color') { this.$bar.css('background', value); - } else if (name == 'padding' || name == 'margin') { - this.$el.css(name, value); + } else if (name.substring(0, 6) == 'border' || name == 'background') { + this.$progress.css(name, value); } else { - this.$bar.css(name, value); + this.$el.css(name, value); } }, }); diff --git a/ipywidgets/static/widgets/less/widgets.less b/ipywidgets/static/widgets/less/widgets.less index c090de4c3c..6b71c244c2 100644 --- a/ipywidgets/static/widgets/less/widgets.less +++ b/ipywidgets/static/widgets/less/widgets.less @@ -100,87 +100,95 @@ +------------------------------------------+ */ - /* Fix the padding of the slide track so the ui-slider is sized - correctly. */ - padding-left : 8px; - padding-right : 2px; - overflow : visible; - - /* Default size of the slider */ width : @widget-width; - height : 5px; - max-height : 5px; - margin-top : 15px; - margin-bottom: 12px; - - /* Style the slider track */ - .slide-track(); - /* Make the div a flex box (makes FF behave correctly). */ - .hbox(); + .slider-container { + /* Fix the padding of the slide track so the ui-slider is sized + correctly. */ + padding-left : 8px; + padding-right : 2px; + overflow : visible; + + /* Default size of the slider */ + flex-grow : 1; + height : 5px; + max-height : 5px; + margin-top : 15px; + margin-bottom: 12px; + + /* Style the slider track */ + .slide-track(); - .ui-slider { - /* Inner, invisible slide div */ + /* Make the div a flex box (makes FF behave correctly). */ .hbox(); - .box-flex1(); - - border : 0px; - background : none; - .ui-slider-handle { - width: 12px; - height: 28px; - margin-top: -8px; - border-radius: @border-radius-base; - } - - .ui-slider-range { - height : 12px; - margin-top : -4px; + .ui-slider { + /* Inner, invisible slide div */ + .hbox(); + .box-flex1(); + + border : 0px; + background : none; + + .ui-slider-handle { + width: 12px; + height: 28px; + margin-top: -8px; + border-radius: @border-radius-base; + } + + .ui-slider-range { + height : 12px; + margin-top : -4px; + } } } } .widget-vslider { /* Vertical jQuery Slider */ + width: 50px; + + .slider-container { + /* Fix the padding of the slide track so the ui-slider is sized + correctly. */ + padding-bottom : 5px; + overflow : visible; + + /* Default size of the slider */ + width : 5px; + max-width : 5px; + height : 250px; + margin-left : auto; + margin-right : auto; - /* Fix the padding of the slide track so the ui-slider is sized - correctly. */ - padding-bottom : 5px; - overflow : visible; - - /* Default size of the slider */ - width : 5px; - max-width : 5px; - height : 250px; - margin-left : 14px; - - /* Style the slider track */ - .slide-track(); + /* Style the slider track */ + .slide-track(); - /* Make the div a flex box (makes FF behave correctly). */ - .vbox(); - - .ui-slider { - /* Inner, invisible slide div */ + /* Make the div a flex box (makes FF behave correctly). */ .vbox(); - .box-flex1(); - - border : 0px; - background : none; - margin-left : -4px; - margin-top : 5px; - - .ui-slider-handle { - width : 28px; - height : 12px; - margin-left : -9px; - border-radius: @border-radius-base; - } - - .ui-slider-range { - width : 12px; - margin-left : -1px; + + .ui-slider { + /* Inner, invisible slide div */ + .vbox(); + .box-flex1(); + + border : 0px; + background : none; + margin-left : -4px; + margin-top : 5px; + + .ui-slider-handle { + width : 28px; + height : 12px; + margin-left : -9px; + border-radius: @border-radius-base; + } + + .ui-slider-range { + width : 12px; + margin-left : -1px; + } } } } @@ -291,8 +299,12 @@ .widget-hprogress { /* Progress Bar */ + width : @widget-width; margin-top: 8px; - min-width : @widget-width; + + .progress { + flex-grow: 1; + } .progress-bar { /* Disable progress bar animation */ @@ -307,9 +319,13 @@ .widget-vprogress { /* Progress Bar */ margin-top: 8px; - min-height : 250px; + min-height: 250px; width: 12px; + .progress { + flex-grow: 1; + } + .progress-bar { /* Disable progress bar animation */ -webkit-transition : none; @@ -363,10 +379,11 @@ } .widget-readout { - padding-left : 8px; + padding-left : 4px; padding-top : 5px; - text-align : left; + text-align : center; vertical-align : text-top; + min-width : 3.5em; } } From 905333ada7babf72dde923d77193919d2901e60f Mon Sep 17 00:00:00 2001 From: Sylvain Corlay Date: Tue, 3 Nov 2015 10:33:59 -0500 Subject: [PATCH 2/3] Allow the dropdown to shrink to @min-width-short: the combobox min-width was to large. --- ipywidgets/static/widgets/less/widgets.less | 1 + 1 file changed, 1 insertion(+) diff --git a/ipywidgets/static/widgets/less/widgets.less b/ipywidgets/static/widgets/less/widgets.less index 6b71c244c2..8120ba7ef2 100644 --- a/ipywidgets/static/widgets/less/widgets.less +++ b/ipywidgets/static/widgets/less/widgets.less @@ -289,6 +289,7 @@ .widget-combo-btn { flex-grow: 1; + min-width: 10px; } } From 97ca9f7f02a7a108ffd15419424369fe66a2dabc Mon Sep 17 00:00:00 2001 From: Sylvain Corlay Date: Wed, 4 Nov 2015 12:04:43 -0500 Subject: [PATCH 3/3] Base line and size fixes for progress bars --- ipywidgets/static/widgets/less/widgets.less | 34 ++++++++++++--------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/ipywidgets/static/widgets/less/widgets.less b/ipywidgets/static/widgets/less/widgets.less index 8120ba7ef2..c0f822fc48 100644 --- a/ipywidgets/static/widgets/less/widgets.less +++ b/ipywidgets/static/widgets/less/widgets.less @@ -147,27 +147,28 @@ .widget-vslider { /* Vertical jQuery Slider */ - width: 50px; - + width: 50px; + height: 250px; + .slider-container { - /* Fix the padding of the slide track so the ui-slider is sized + /* Fix the padding of the slide track so the ui-slider is sized correctly. */ padding-bottom : 5px; - overflow : visible; + overflow : visible; + flex-grow: 1; /* Default size of the slider */ width : 5px; - max-width : 5px; - height : 250px; - margin-left : auto; - margin-right : auto; - + max-width : 5px; + margin-left : auto; + margin-right : auto; + /* Style the slider track */ .slide-track(); /* Make the div a flex box (makes FF behave correctly). */ .vbox(); - + .ui-slider { /* Inner, invisible slide div */ .vbox(); @@ -301,10 +302,12 @@ .widget-hprogress { /* Progress Bar */ width : @widget-width; - margin-top: 8px; + height: 32px; .progress { flex-grow: 1; + margin-top: auto; + margin-bottom: auto; } .progress-bar { @@ -319,12 +322,15 @@ .widget-vprogress { /* Progress Bar */ - margin-top: 8px; - min-height: 250px; - width: 12px; + height: 250px; + width: 50px; .progress { flex-grow: 1; + width: 12px; + margin-left: auto; + margin-right: auto; + margin-bottom: 0; } .progress-bar {