From c44dbbb3e70d235518d2cc529af230a7050a21af Mon Sep 17 00:00:00 2001 From: James Taylor Date: Mon, 27 Feb 2012 18:09:16 -0500 Subject: [PATCH] style: fix panels in firefox, pretty search box --- static/june_2007_style/Makefile | 6 +- static/june_2007_style/base.less | 101 +++++++++++++++------------ static/june_2007_style/blue/base.css | 27 +++---- static/scripts/galaxy.panels.js | 46 ++++++------ templates/base_panels.mako | 12 ++-- templates/root/tool_menu.mako | 6 +- 6 files changed, 105 insertions(+), 93 deletions(-) diff --git a/static/june_2007_style/Makefile b/static/june_2007_style/Makefile index cb6798029f8..c5e38a08e34 100644 --- a/static/june_2007_style/Makefile +++ b/static/june_2007_style/Makefile @@ -19,12 +19,12 @@ variables.less : $(INI) # Old style using process_css still works so we can move gradually %.css : %.css.tmpl - ../process_css.py ../$(INI) shared_images:../images $(OUT) < $< > $@ + ../process_css.py ../$(INI) ..:../shared_images:../../images . < $< > $@ # For building sprite images %.less : %.less.tmpl - ../process_css.py $(INI) shared_images:../images $(OUT) < $< > $@ + ../process_css.py ../$(INI) ..:../shared_images:../../images . < $< > $@ # Some dependencies -base.css: variables.less galaxy_bootstrap.less iconic_stroke.less +base.css: variables.less galaxy_bootstrap.less iconic_stroke.less base_sprites.less diff --git a/static/june_2007_style/base.less b/static/june_2007_style/base.less index 20a20ede3d8..412f33ef292 100644 --- a/static/june_2007_style/base.less +++ b/static/june_2007_style/base.less @@ -14,6 +14,11 @@ .box-shadow(); } +.parent-width { + .box-sizing(border-box); + width: 100%; +} + // ==== Real (basic) styles ==== .clear { @@ -183,7 +188,7 @@ th { color: #555; } - .drag, .collapse { + .drag { position: absolute; top: 0; right: 0; @@ -194,52 +199,49 @@ th { background-image: url(../images/visualization/draggable_horizontal.png); background-repeat: no-repeat; background-position: 50% 50%; - - // .ie7-restore-right-whitespace(); - } - - .drag { cursor: w-resize; } - - .collapse { - position: fixed; - left: 0; - top: inherit; - bottom: 0; - background: none; - border-right: solid @layout_border 1px; - border-top: solid @layout_border 1px; - #gradient > .vertical-three-colors(darken(@white, 5%), darken(@white, 5%), 25%, darken(@white, 10%)); - .iconic(); - - } - .collapse.hidden { - // .opacity(50); - } - .collapse:before { - content:'\2190'; - } - .collapse.hidden:before { - content:'\2192'; - } } #right > .unified-panel-footer { .drag { left: 0; } - .collapse { +} + +// Needs to be outside panel to show when hidden +.panel-collapse { + .unified-panel-footer(); + z-index: 10000; + position: fixed; + left: 0; + top: inherit; + bottom: 0; + padding: 0 5px; + text-align: center; + width: @panel_footer_height - 5; + background: none; + border-right: solid @layout_border 1px; + border-top: solid @layout_border 1px; + #gradient > .vertical-three-colors(darken(@white, 5%), darken(@white, 5%), 25%, darken(@white, 10%)); + .iconic(); + &:before { + content:'\2190'; + } + &.hidden:before { + content:'\2192'; + } + &.right { left: inherit; right: 0; border-right: none; border-left: solid @layout_border 1px; - } - .collapse:before{ - content:'\2192'; - } - .collapse.hidden:before { - content:'\2190'; + &.right:before{ + content:'\2192'; + } + &.right.hidden:before { + content:'\2190'; + } } } @@ -669,11 +671,8 @@ select, textarea, input[type="text"], input[type="file"], input[type="password"] max-width: 300px; } -/* .search-query { display: inline-block; - width: 210px; - height: @baseLineHeight; padding: 4px; margin-bottom: 9px; font-size: @baseFontSize; @@ -684,8 +683,22 @@ select, textarea, input[type="text"], input[type="file"], input[type="password"] padding-right: 14px; margin-bottom: 0; // remove the default margin on all inputs .border-radius(14px); + max-width: auto; +} +.search-query:focus { + border-color: rgba(82,168,236,.8); + @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6); + .box-shadow(@shadow); + outline: 0; + outline: thin dotted \9; /* IE6-8 */ +} + +.search-spinner { + position: absolute; + display: none; + right: 8px; + top: 10px; } -*/ // Messages @@ -889,7 +902,7 @@ div.debug { line-height: @baseLineHeight; border-top: solid #DDDDDD 1px; border-bottom: solid #DDDDDD 1px; - padding: 0.3em 0.5em; + padding: 5px; } .grid tbody td:empty { padding: 0; @@ -905,7 +918,7 @@ div.debug { background-position: top; border-top: solid @table_border 1px; border-bottom: solid @table_border 1px; - padding: 0.3em 0.5em; + padding: 5px; text-align: left; white-space: nowrap; } @@ -913,7 +926,7 @@ div.debug { background-color: #F8F8F8; border-top: solid #DDDDDD 1px; border-bottom: solid #DDDDDD 1px; - padding: 0.3em 0.5em; + padding: 5px; } .grid .current { background-color: #EEEEFF; @@ -1503,7 +1516,6 @@ hr margin-top: 0px; } -/* div.toolSectionPad { margin: 0; @@ -1511,10 +1523,9 @@ div.toolSectionPad height: 5px; font-size: 0px; } -*/ div.toolSectionWrapper { - margin-bottom: 5px; + // margin-bottom: 5px; } div.toolSectionDetailsInner diff --git a/static/june_2007_style/blue/base.css b/static/june_2007_style/blue/base.css index e1ffc3173db..1e6ecb36534 100644 --- a/static/june_2007_style/blue/base.css +++ b/static/june_2007_style/blue/base.css @@ -482,6 +482,7 @@ button.btn.small,input[type="submit"].btn.small{*padding-top:3px;*padding-bottom .iconic.spin_alt:before{content:'\e037';} .unselectable{-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;} .shadow{-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);} +.parent-width{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%;} .clear{*zoom:1;}.clear:before,.clear:after{display:table;content:"";} .clear:after{clear:both;} body{background:#ffffff;color:#303030;background-image:url(base_bg.png);background-repeat:repeat-x;background-position:top;margin:10px;} @@ -504,15 +505,14 @@ th{text-align:left;} .unified-panel-header{-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;height:30px;z-index:1000;text-shadow:rgba(255, 255, 255, 0.8) 0 1px 0;background-color:#fafafa;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);border-bottom:solid #999999 1px;margin:0;padding:0;padding-right:10px;padding-left:10px;font-weight:bold;color:#555;}.unified-panel-header a{color:#555;} .unified-panel-header-inner{padding-top:8px;} .unified-panel-footer{-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;position:absolute;bottom:0;height:25px;line-height:25px;width:100%;z-index:1000;border-top:solid #999999 1px;background-color:#f0f0f0;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), color-stop(25%, #f2f2f2), to(#e6e6e6));background-image:-webkit-linear-gradient(#f2f2f2, #f2f2f2 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #f2f2f2, #f2f2f2 25%, #e6e6e6);background-image:-ms-linear-gradient(#f2f2f2, #f2f2f2 25%, #e6e6e6);background-image:-o-linear-gradient(#f2f2f2, #f2f2f2 25%, #e6e6e6);background-image:linear-gradient(#f2f2f2, #f2f2f2 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#e6e6e6', GradientType=0);color:#555;}.unified-panel-footer a{color:#555;} -.unified-panel-footer .drag,.unified-panel-footer .collapse{position:absolute;top:0;right:0;padding:0 5px;text-align:center;height:25px;width:20px;background-image:url(../images/visualization/draggable_horizontal.png);background-repeat:no-repeat;background-position:50% 50%;} -.unified-panel-footer .drag{cursor:w-resize;} -.unified-panel-footer .collapse{position:fixed;left:0;top:inherit;bottom:0;background:none;border-right:solid #999999 1px;border-top:solid #999999 1px;background-color:#f0f0f0;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), color-stop(25%, #f2f2f2), to(#e6e6e6));background-image:-webkit-linear-gradient(#f2f2f2, #f2f2f2 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #f2f2f2, #f2f2f2 25%, #e6e6e6);background-image:-ms-linear-gradient(#f2f2f2, #f2f2f2 25%, #e6e6e6);background-image:-o-linear-gradient(#f2f2f2, #f2f2f2 25%, #e6e6e6);background-image:linear-gradient(#f2f2f2, #f2f2f2 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#e6e6e6', GradientType=0);display:inline-block;font-family:'IconicStroke';} -.unified-panel-footer .collapse:before{content:'\2190';} -.unified-panel-footer .collapse.hidden:before{content:'\2192';} +.unified-panel-footer .drag{position:absolute;top:0;right:0;padding:0 5px;text-align:center;height:25px;width:20px;background-image:url(../images/visualization/draggable_horizontal.png);background-repeat:no-repeat;background-position:50% 50%;cursor:w-resize;} #right>.unified-panel-footer .drag{left:0;} -#right>.unified-panel-footer .collapse{left:inherit;right:0;border-right:none;border-left:solid #999999 1px;} -#right>.unified-panel-footer .collapse:before{content:'\2192';} -#right>.unified-panel-footer .collapse.hidden:before{content:'\2190';} +.panel-collapse{-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;position:absolute;bottom:0;height:25px;line-height:25px;width:100%;z-index:1000;border-top:solid #999999 1px;background-color:#f0f0f0;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), color-stop(25%, #f2f2f2), to(#e6e6e6));background-image:-webkit-linear-gradient(#f2f2f2, #f2f2f2 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #f2f2f2, #f2f2f2 25%, #e6e6e6);background-image:-ms-linear-gradient(#f2f2f2, #f2f2f2 25%, #e6e6e6);background-image:-o-linear-gradient(#f2f2f2, #f2f2f2 25%, #e6e6e6);background-image:linear-gradient(#f2f2f2, #f2f2f2 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#e6e6e6', GradientType=0);color:#555;z-index:10000;position:fixed;left:0;top:inherit;bottom:0;padding:0 5px;text-align:center;width:20px;background:none;border-right:solid #999999 1px;border-top:solid #999999 1px;background-color:#f0f0f0;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), color-stop(25%, #f2f2f2), to(#e6e6e6));background-image:-webkit-linear-gradient(#f2f2f2, #f2f2f2 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #f2f2f2, #f2f2f2 25%, #e6e6e6);background-image:-ms-linear-gradient(#f2f2f2, #f2f2f2 25%, #e6e6e6);background-image:-o-linear-gradient(#f2f2f2, #f2f2f2 25%, #e6e6e6);background-image:linear-gradient(#f2f2f2, #f2f2f2 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#e6e6e6', GradientType=0);display:inline-block;font-family:'IconicStroke';}.panel-collapse a{color:#555;} +.panel-collapse .drag{position:absolute;top:0;right:0;padding:0 5px;text-align:center;height:25px;width:20px;background-image:url(../images/visualization/draggable_horizontal.png);background-repeat:no-repeat;background-position:50% 50%;cursor:w-resize;} +.panel-collapse:before{content:'\2190';} +.panel-collapse.hidden:before{content:'\2192';} +.panel-collapse.right{left:inherit;right:0;border-right:none;border-left:solid #999999 1px;}.panel-collapse.right.right:before{content:'\2192';} +.panel-collapse.right.right.hidden:before{content:'\2190';} .menu-bg{background:whiteSmoke top repeat-x;} div.unified-panel-body{position:absolute;top:30px;bottom:0;width:100%;margin-top:1px;} #left>div.unified-panel-body,#right>div.unified-panel-body{bottom:25px;} @@ -580,6 +580,9 @@ div.form-row-error-message{width:300px;float:left;color:red;font-weight:bold;pad .form-row .help{color:#666;} select,input,textarea{font:inherit;} select,textarea,input[type="text"],input[type="file"],input[type="password"]{max-width:300px;} +.search-query{display:inline-block;padding:4px;margin-bottom:9px;font-size:12px;line-height:16px;color:#555555;border:1px solid #999999;padding-left:14px;padding-right:14px;margin-bottom:0;-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;max-width:auto;} +.search-query:focus{border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);outline:0;outline:thin dotted \9;} +.search-spinner{position:absolute;display:none;right:8px;top:10px;} .errormessagelarge,.warningmessagelarge,.donemessagelarge,.infomessagelarge{padding:8px 35px 8px 14px;margin-bottom:16px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);background-color:#ffffcc;border:1px solid #ffdd33;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;color:#666600;min-height:32px;padding-left:52px;background-image:url(error_message_icon.png);background-repeat:no-repeat;background-position:10px 10px;} .errormessagelarge{background-color:#ffcccc;border-color:#ff3355;color:#660000;padding-left:52px;} .warningmessagelarge{background-image:url(warn_message_icon.png);border-color:#aaaa66;background-color:#ffffcc;} @@ -613,11 +616,11 @@ div.debug{margin:10px;padding:5px;background:#FFFF99;border:solid #FFFF33 1px;co .grid-header h2{margin:0;margin-bottom:0.5em;} .grid-header .title{font-weight:bold;} .grid{padding-top:1em;border-collapse:collapse;width:100%;} -.grid tbody td{line-height:16px;border-top:solid #DDDDDD 1px;border-bottom:solid #DDDDDD 1px;padding:0.3em 0.5em;} +.grid tbody td{line-height:16px;border-top:solid #DDDDDD 1px;border-bottom:solid #DDDDDD 1px;padding:5px;} .grid tbody td:empty{padding:0;} .grid thead tr{height:2em;} -.grid thead th{line-height:16px;background:#ebd9b2;background-repeat:repeat-x;background-position:top;border-top:solid #d8b365 1px;border-bottom:solid #d8b365 1px;padding:0.3em 0.5em;text-align:left;white-space:nowrap;} -.grid tfoot td{background-color:#F8F8F8;border-top:solid #DDDDDD 1px;border-bottom:solid #DDDDDD 1px;padding:0.3em 0.5em;} +.grid thead th{line-height:16px;background:#ebd9b2;background-repeat:repeat-x;background-position:top;border-top:solid #d8b365 1px;border-bottom:solid #d8b365 1px;padding:5px;text-align:left;white-space:nowrap;} +.grid tfoot td{background-color:#F8F8F8;border-top:solid #DDDDDD 1px;border-bottom:solid #DDDDDD 1px;padding:5px;} .grid .current{background-color:#EEEEFF;} div.odd_row{background:#dadfef;} #footer{display:none;} @@ -722,7 +725,7 @@ div.historyItemBody div{padding-top:2px;} pre.peek{background:white;color:black;width:100%;overflow:auto;}pre.peek th{color:white;background:#023858;} body.toolMenuPage{background:white;color:#303030;background:#dfe5f9;margin:5px;margin-right:10px;margin-left:10px;} hr{border:none;height:0px;margin-top:0px;} -div.toolSectionWrapper{margin-bottom:5px;} +div.toolSectionPad{margin:0;padding:0;height:5px;font-size:0px;} div.toolSectionDetailsInner{margin-left:5px;margin-right:5px;} div.toolSectionTitle{font-weight:bold;} div.toolPanelLabel{font-weight:bold;color:gray;text-transform:uppercase;} diff --git a/static/scripts/galaxy.panels.js b/static/scripts/galaxy.panels.js index 1650158c2c8..d6ef26c4960 100644 --- a/static/scripts/galaxy.panels.js +++ b/static/scripts/galaxy.panels.js @@ -18,10 +18,10 @@ var MIN_PANEL_WIDTH = 150, MAX_PANEL_WIDTH = 800; var Panel = function( options ) { - this.panel = options.panel; - this.center = options.center; - this.drag = options.drag; - this.toggle = options.toggle; + this.$panel = options.panel; + this.$center = options.center; + this.$drag = options.drag; + this.$toggle = options.toggle; this.left = !options.right; this.hidden = false; this.hidden_by_tool = false; @@ -30,11 +30,11 @@ var Panel = function( options ) { } $.extend( Panel.prototype, { resize: function( x ) { - $(this.panel).css( "width", x ); + this.$panel.css( "width", x ); if ( this.left ) { - $(center).css( "left", x ); + this.$center.css( "left", x ); } else { - $(center).css( "right", x ); + this.$center.css( "right", x ); } // ie7-recalc.js if ( document.recalc ) { document.recalc(); } @@ -42,44 +42,40 @@ $.extend( Panel.prototype, { do_toggle: function() { var self = this; if ( this.hidden ) { - $(this.toggle).removeClass( "hidden" ); + this.$toggle.removeClass( "hidden" ); if ( this.left ) { - $(this.panel).css( "left", - this.saved_size ).show().animate( { "left": 0 }, "fast", function () { + this.$panel.css( "left", - this.saved_size ).show().animate( { "left": 0 }, "fast", function () { self.resize( self.saved_size ); }); } else { - $(this.panel).css( "right", - this.saved_size ).show().animate( { "right": 0 }, "fast", function () { + this.$panel.css( "right", - this.saved_size ).show().animate( { "right": 0 }, "fast", function () { self.resize( self.saved_size ); }); } self.hidden = false; } else { - self.saved_size = $(this.panel).width(); - // Move center - - // $( center_el ).css( "right", $(border_el).innerWidth() + 1 ); - + self.saved_size = this.$panel.width(); if ( document.recalc ) { document.recalc(); } // Hide border if ( this.left ) { - $(this.panel).animate( { left: - this.saved_size }, "fast" ); + this.$panel.animate( { left: - this.saved_size }, "fast" ); } else { - $(this.panel).animate( { right: - this.saved_size }, "fast" ); + this.$panel.animate( { right: - this.saved_size }, "fast" ); } // self.resize(0); if ( this.left ) { - $(center).css( "left", 0 ); + this.$center.css( "left", 0 ); } else { - $(center).css( "right", 0 ); + this.$center.css( "right", 0 ); } self.hidden = true; - $(self.toggle).addClass( "hidden" ); + self.$toggle.addClass( "hidden" ); } this.hidden_by_tool = false; }, handle_minwidth_hint: function( x ) { - var space = $(this.center).width() - ( this.hidden ? this.saved_size : 0 ); + var space = this.$center.width() - ( this.hidden ? this.saved_size : 0 ); if ( space < x ) { if ( ! this.hidden ) { @@ -100,10 +96,12 @@ $.extend( Panel.prototype, { }, init: function() { var self = this; + // Pull the collapse element out to body level so it is visible when panel is hidden + this.$toggle.remove().appendTo( "body" ); // Resizing using drag element - $(this.drag).on( "dragstart", function( e, d ) { + this.$drag.on( "dragstart", function( e, d ) { $( '#DD-helper' ).show(); - d.width = $(self.panel).width(); + d.width = self.$panel.width(); }).on( "dragend", function() { $( '#DD-helper' ).hide(); }).on( "drag", function( e, d ) { @@ -118,7 +116,7 @@ $.extend( Panel.prototype, { self.resize( x ); }); // Hide/show using toggle element - $(self.toggle).on( "click", function() { self.do_toggle(); } ); + self.$toggle.on( "click", function() { self.do_toggle(); } ); } }); diff --git a/templates/base_panels.mako b/templates/base_panels.mako index 60951068edd..3d57c552dde 100644 --- a/templates/base_panels.mako +++ b/templates/base_panels.mako @@ -64,12 +64,12 @@ ensure_dd_helper(); %if self.has_left_panel: - var lp = new Panel( { panel: $("#left"), center: $("#center"), drag: $("#left > .unified-panel-footer > .drag" ), toggle: $("#left > .unified-panel-footer > .collapse" ) } ); + var lp = new Panel( { panel: $("#left"), center: $("#center"), drag: $("#left > .unified-panel-footer > .drag" ), toggle: $("#left > .unified-panel-footer > .panel-collapse" ) } ); force_left_panel = lp.force_panel; %endif %if self.has_right_panel: - var rp = new Panel( { panel: $("#right"), center: $("#center"), drag: $("#right > .unified-panel-footer > .drag" ), toggle: $("#right > .unified-panel-footer > .collapse" ), right: true } ); + var rp = new Panel( { panel: $("#right"), center: $("#center"), drag: $("#right > .unified-panel-footer > .drag" ), toggle: $("#right > .unified-panel-footer > .panel-collapse" ), right: true } ); window.handle_minwidth_hint = function( x ) { console.log( "hint", x ); rp.handle_minwidth_hint( x ) }; force_right_panel = function( x ) { rp.force_panel( x ) }; %endif @@ -168,7 +168,7 @@ <% if visible: - display = "" + display = "style='display: block;'" overlay_class = "in" else: display = "style='display: none;'" @@ -177,7 +177,7 @@
- +