From 033ea6d88c9988343dc7c81bd0aa545929214a36 Mon Sep 17 00:00:00 2001 From: Jonathan Frederic Date: Wed, 5 Feb 2014 13:18:05 -0800 Subject: [PATCH 1/5] Added bottom margin to text widget --- IPython/html/static/notebook/less/widgets.less | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/IPython/html/static/notebook/less/widgets.less b/IPython/html/static/notebook/less/widgets.less index 98665e52e..0bf9cd4bc 100644 --- a/IPython/html/static/notebook/less/widgets.less +++ b/IPython/html/static/notebook/less/widgets.less @@ -97,10 +97,11 @@ overflow : visible; /* Default size of the slider */ - width : 348px; - height : 5px; - max-height : 5px; - margin-top : 11px; + width : 348px; + height : 5px; + max-height : 5px; + margin-top : 11px; + margin-bottom: 10px; /* Style the slider track */ .slide-track(); @@ -165,7 +166,7 @@ .widget-text { /* String Textbox - used for TextBoxView and TextAreaView */ width : 350px; - margin-bottom : 0px; + margin : 0px !important; } .widget-listbox { From 3b8beec5417f7464cd8636f9128a9ed800a5909c Mon Sep 17 00:00:00 2001 From: Jonathan Frederic Date: Mon, 10 Feb 2014 09:27:22 -0800 Subject: [PATCH 2/5] Added a class for RadioButtons container with appropriate top padding... --- .../html/static/notebook/js/widgets/widget_selection.js | 3 +-- IPython/html/static/notebook/less/widgets.less | 9 +++++++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/IPython/html/static/notebook/js/widgets/widget_selection.js b/IPython/html/static/notebook/js/widgets/widget_selection.js index bdca009b1..60a4dbcae 100644 --- a/IPython/html/static/notebook/js/widgets/widget_selection.js +++ b/IPython/html/static/notebook/js/widgets/widget_selection.js @@ -126,8 +126,7 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){ .hide(); this.$container = $('
') .appendTo(this.$el) - .addClass('widget-container') - .addClass('vbox'); + .addClass('widget-radio-box'); this.$el_to_style = this.$container; // Set default element to style this.update(); }, diff --git a/IPython/html/static/notebook/less/widgets.less b/IPython/html/static/notebook/less/widgets.less index 0bf9cd4bc..c18b79811 100644 --- a/IPython/html/static/notebook/less/widgets.less +++ b/IPython/html/static/notebook/less/widgets.less @@ -178,6 +178,7 @@ .widget-numeric-text { /* Single Line Textbox - used for IntTextView and FloatTextView */ width : 150px; + margin : 0px !important; } .widget-progress { @@ -261,6 +262,14 @@ .align-start(); } +.widget-radio-box { + /* Contains RadioButtonsWidget */ + .vbox(); + .border-box-sizing(); + + padding-top: 4px; +} + .docked-widget-modal { /* Horizontal Label */ overflow: hidden; From d1d863af868caa82a569ef47ba837ec3807544e7 Mon Sep 17 00:00:00 2001 From: Jonathan Frederic Date: Mon, 10 Feb 2014 09:44:42 -0800 Subject: [PATCH 3/5] fab css --- IPython/html/static/style/ipython.min.css | 7 ++++--- IPython/html/static/style/style.min.css | 7 ++++--- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/IPython/html/static/style/ipython.min.css b/IPython/html/static/style/ipython.min.css index 3b6a7d393..e999c2264 100644 --- a/IPython/html/static/style/ipython.min.css +++ b/IPython/html/static/style/ipython.min.css @@ -177,11 +177,11 @@ div.cell.text_cell.rendered{padding:0} .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;display:flex;flex-direction:row;align-items: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;display:flex;flex-direction:row;align-items:stretch;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;flex:1}.widget-hslider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-8px !important} +.widget-hslider{padding-left:8px;padding-right:5px;overflow:visible;width:348px;height:5px;max-height:5px;margin-top:11px;margin-bottom:10px;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;display:flex;flex-direction:row;align-items: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;display:flex;flex-direction:row;align-items:stretch;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;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%;display:flex;flex-direction:column;align-items:stretch}.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%;display:flex;flex-direction:column;align-items:stretch;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;flex:1}.widget-vslider .ui-slider .ui-slider-handle{width:28px !important;height:14px !important;margin-left:-9px} -.widget-text{width:350px;margin-bottom:0} +.widget-text{width:350px;margin:0 !important} .widget-listbox{width:364px;margin-bottom:0} -.widget-numeric-text{width:150px} +.widget-numeric-text{width:150px;margin:0 !important} .widget-progress{width:363px}.widget-progress .bar{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none} .widget-combo-btn{min-width:138px;} .widget-box{margin:5px;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;justify-content:flex-start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-box-align:start;-moz-box-align:start;box-align:start;align-items:flex-start} @@ -192,4 +192,5 @@ div.cell.text_cell.rendered{padding:0} .widget-modal{overflow:hidden;position:absolute !important;top:0;left:0;margin-left:0 !important} .widget-modal-body{max-height:none !important} .widget-container{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-box-align:start;-moz-box-align:start;box-align:start;align-items:flex-start} +.widget-radio-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%;display:flex;flex-direction:column;align-items:stretch;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding-top:4px} .docked-widget-modal{overflow:hidden;position:relative !important;top:0 !important;left:0 !important;margin-left:0 !important} diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css index 8f7fb9584..4f5c2cc5e 100644 --- a/IPython/html/static/style/style.min.css +++ b/IPython/html/static/style/style.min.css @@ -1454,11 +1454,11 @@ div.cell.text_cell.rendered{padding:0} .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;display:flex;flex-direction:row;align-items: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;display:flex;flex-direction:row;align-items:stretch;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;flex:1}.widget-hslider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-8px !important} +.widget-hslider{padding-left:8px;padding-right:5px;overflow:visible;width:348px;height:5px;max-height:5px;margin-top:11px;margin-bottom:10px;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;display:flex;flex-direction:row;align-items: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;display:flex;flex-direction:row;align-items:stretch;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;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%;display:flex;flex-direction:column;align-items:stretch}.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%;display:flex;flex-direction:column;align-items:stretch;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;flex:1}.widget-vslider .ui-slider .ui-slider-handle{width:28px !important;height:14px !important;margin-left:-9px} -.widget-text{width:350px;margin-bottom:0} +.widget-text{width:350px;margin:0 !important} .widget-listbox{width:364px;margin-bottom:0} -.widget-numeric-text{width:150px} +.widget-numeric-text{width:150px;margin:0 !important} .widget-progress{width:363px}.widget-progress .bar{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none} .widget-combo-btn{min-width:138px;} .widget-box{margin:5px;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;justify-content:flex-start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-box-align:start;-moz-box-align:start;box-align:start;align-items:flex-start} @@ -1469,6 +1469,7 @@ div.cell.text_cell.rendered{padding:0} .widget-modal{overflow:hidden;position:absolute !important;top:0;left:0;margin-left:0 !important} .widget-modal-body{max-height:none !important} .widget-container{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-box-align:start;-moz-box-align:start;box-align:start;align-items:flex-start} +.widget-radio-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%;display:flex;flex-direction:column;align-items:stretch;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding-top:4px} .docked-widget-modal{overflow:hidden;position:relative !important;top:0 !important;left:0 !important;margin-left:0 !important} body{background-color:#fff} body.notebook_app{overflow:hidden} From cecf7cf06f0c73f434044067cc8876335cb5b4b1 Mon Sep 17 00:00:00 2001 From: Jonathan Frederic Date: Wed, 19 Feb 2014 14:48:21 -0800 Subject: [PATCH 4/5] Fixed radio button selector for new radio button class --- IPython/html/tests/widgets/widget_selection.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/IPython/html/tests/widgets/widget_selection.js b/IPython/html/tests/widgets/widget_selection.js index b1e90c8ef..5f5b29ec1 100644 --- a/IPython/html/tests/widgets/widget_selection.js +++ b/IPython/html/tests/widgets/widget_selection.js @@ -8,7 +8,7 @@ casper.notebook_test(function () { var combo_selector = '.widget-area .widget-subarea .widget-hbox-single .btn-group .widget-combo-btn'; var multibtn_selector = '.widget-area .widget-subarea .widget-hbox-single .btn-group[data-toggle="buttons-radio"]'; - var radio_selector = '.widget-area .widget-subarea .widget-hbox .vbox'; + var radio_selector = '.widget-area .widget-subarea .widget-hbox ..widget-radio-box'; var list_selector = '.widget-area .widget-subarea .widget-hbox .widget-listbox'; var selection_index; From 82bbcf166d5a7a569a409652d622f8126e7869ce Mon Sep 17 00:00:00 2001 From: Jonathan Frederic Date: Thu, 20 Feb 2014 13:14:37 -0800 Subject: [PATCH 5/5] Fixed .. typo --- IPython/html/tests/widgets/widget_selection.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/IPython/html/tests/widgets/widget_selection.js b/IPython/html/tests/widgets/widget_selection.js index 5f5b29ec1..c4f03cc86 100644 --- a/IPython/html/tests/widgets/widget_selection.js +++ b/IPython/html/tests/widgets/widget_selection.js @@ -8,7 +8,7 @@ casper.notebook_test(function () { var combo_selector = '.widget-area .widget-subarea .widget-hbox-single .btn-group .widget-combo-btn'; var multibtn_selector = '.widget-area .widget-subarea .widget-hbox-single .btn-group[data-toggle="buttons-radio"]'; - var radio_selector = '.widget-area .widget-subarea .widget-hbox ..widget-radio-box'; + var radio_selector = '.widget-area .widget-subarea .widget-hbox .widget-radio-box'; var list_selector = '.widget-area .widget-subarea .widget-hbox .widget-listbox'; var selection_index;