From a1a86bb8c4e7d8ead3cd846c31c8f632fb02cc87 Mon Sep 17 00:00:00 2001 From: Jonathan Frederic Date: Wed, 30 Oct 2013 12:32:31 -0700 Subject: [PATCH] Added slider vertical mode, and fixed hbox element sizing. --- .../html/static/notebook/less/widgetarea.less | 36 ++++++++++++++++--- IPython/html/static/style/ipython.min.css | 12 ++++--- IPython/html/static/style/style.min.css | 12 ++++--- 3 files changed, 48 insertions(+), 12 deletions(-) diff --git a/IPython/html/static/notebook/less/widgetarea.less b/IPython/html/static/notebook/less/widgetarea.less index 5e5b8b8ad..46fa70808 100644 --- a/IPython/html/static/notebook/less/widgetarea.less +++ b/IPython/html/static/notebook/less/widgetarea.less @@ -18,7 +18,7 @@ padding-top: 3px; } - .widget-slider { + .widget-hslider { padding-left: 8px; padding-right: 5px; margin-top: 11px; @@ -44,6 +44,30 @@ } } + .widget-vslider { + border: 1px solid #CCCCCC; + background: #FFFFFF; + height: 100%; + width: 5px; + margin-left: 12px; + padding-bottom: 14px; + .corner-all(); + + .ui-slider { + border: 0px !important; + background: none !important; + margin-left: -4px; + height: 100%; + margin-top: 5px; + + .ui-slider-handle { + width: 28px !important; + height: 14px !important; + margin-left: -15px; + } + } + } + .widget-text { width: 350px; margin-bottom: 0px; @@ -59,7 +83,6 @@ } .widget-container { - .box-flex1(); .border-box-sizing(); } @@ -67,13 +90,18 @@ .hbox(); .start(); .widget-container(); - margin-bottom: 5px; - margin-top: 5px; + margin: 5px; } .widget-hbox-single { .widget-hbox(); height: 30px; } + + .widget-hbox-vsingle { + .widget-hbox(); + width: 30px; + height: 250px; + } } } diff --git a/IPython/html/static/style/ipython.min.css b/IPython/html/static/style/ipython.min.css index e7f597e3c..b98638215 100644 --- a/IPython/html/static/style/ipython.min.css +++ b/IPython/html/static/style/ipython.min.css @@ -165,7 +165,11 @@ h1:hover .anchor-link,h2:hover .anchor-link,h3:hover .anchor-link,h4:hover .anch .ipython_tooltip .tooltiptext pre{border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;font-size:100%;background-color:#f7f7f7;} .pretooltiparrow{left:0px;margin:0px;top:-16px;width:40px;height:16px;overflow:hidden;position:absolute;} .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-label{min-width:300px;} -div.widget-container{-webkit-box-flex:2;-moz-box-flex:2;box-flex:2;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;} -div.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;} -div.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{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-slider{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-slider .ui-slider{border:0px !important;background:none !important;}.widget-area .widget-subarea .widget-slider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-7px !important;} +.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-combo-btn{min-width:138px;height:30px;} +.widget-area .widget-subarea .widget-container{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;} +.widget-area .widget-subarea .widget-hbox{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-pack:start;-moz-box-pack:start;box-pack:start;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin-bottom:5px;margin-top:5px;} +.widget-area .widget-subarea .widget-hbox-single{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-pack:start;-moz-box-pack:start;box-pack:start;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin-bottom:5px;margin-top:5px;height:30px;} diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css index 78160af16..d739f9a9d 100644 --- a/IPython/html/static/style/style.min.css +++ b/IPython/html/static/style/style.min.css @@ -1584,7 +1584,11 @@ span#checkpoint_status,span#autosave_status{font-size:small;} .ipython_tooltip .tooltiptext pre{border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;font-size:100%;background-color:#f7f7f7;} .pretooltiparrow{left:0px;margin:0px;top:-16px;width:40px;height:16px;overflow:hidden;position:absolute;} .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-label{min-width:300px;} -div.widget-container{-webkit-box-flex:2;-moz-box-flex:2;box-flex:2;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;} -div.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;} -div.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{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-slider{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-slider .ui-slider{border:0px !important;background:none !important;}.widget-area .widget-subarea .widget-slider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-7px !important;} +.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-combo-btn{min-width:138px;height:30px;} +.widget-area .widget-subarea .widget-container{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;} +.widget-area .widget-subarea .widget-hbox{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-pack:start;-moz-box-pack:start;box-pack:start;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin-bottom:5px;margin-top:5px;} +.widget-area .widget-subarea .widget-hbox-single{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-pack:start;-moz-box-pack:start;box-pack:start;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin-bottom:5px;margin-top:5px;height:30px;}