details: http://www.bx.psu.edu/hg/galaxy/rev/86cbda1bcf67 changeset: 3178:86cbda1bcf67 user: James Taylor <james@jamestaylor.org> date: Mon Dec 14 21:14:53 2009 -0500 description: Visualization tweaks, grid links work again (not perfect though), tracks now line up with no extra shims, now shows scrollbar for track area diffstat: lib/galaxy/web/controllers/visualization.py | 1 - static/scripts/trackster.js | 8 +++- static/trackster.css | 40 ++++++++++++------- templates/grid_base.mako | 10 ++++- templates/tracks/browser.mako | 25 ++++++++---- 5 files changed, 56 insertions(+), 28 deletions(-) diffs (246 lines): diff -r b628cfc8a5d1 -r 86cbda1bcf67 lib/galaxy/web/controllers/visualization.py --- a/lib/galaxy/web/controllers/visualization.py Mon Dec 14 15:17:13 2009 -0500 +++ b/lib/galaxy/web/controllers/visualization.py Mon Dec 14 21:14:53 2009 -0500 @@ -5,7 +5,6 @@ class VisualizationListGrid( grids.Grid ): # Grid definition - use_panels = True title = "Visualizations" model_class = model.Visualization default_sort_key = "-create_time" diff -r b628cfc8a5d1 -r 86cbda1bcf67 static/scripts/trackster.js --- a/static/scripts/trackster.js Mon Dec 14 15:17:13 2009 -0500 +++ b/static/scripts/trackster.js Mon Dec 14 21:14:53 2009 -0500 @@ -122,8 +122,8 @@ for ( var i = 0, len = this.tracks.length; i < len; i++ ) { this.tracks[i].draw(); } - $("#bottom-spacer").remove(); - $("#viewport").append('<div id="bottom-spacer" style="height: 200px;"></div>'); + //$("#bottom-spacer").remove(); + //$("#viewport").append('<div id="bottom-spacer" style="height: 200px;"></div>'); }, zoom_in: function ( point ) { if (this.max_high === 0 || this.high - this.low < 30) { @@ -181,6 +181,7 @@ var w_scale = this.content_div.width() / range; + var max_height = 20; var tile_element; // Index of first tile that overlaps visible region var tile_index = Math.floor( low / resolution / DENSITY ); @@ -200,12 +201,15 @@ }); // Our responsibility to move the element to the new parent parent_element.append( cached ); + max_height = Math.max( max_height, cached.height() ); } else { tile_element = this.draw_tile( resolution, tile_index, parent_element, w_scale ); if ( tile_element ) { this.tile_cache.set(key, tile_element); + max_height = Math.max( max_height, tile_element.height() ); } } + this.content_div.css( "height", max_height ); tile_index += 1; } } diff -r b628cfc8a5d1 -r 86cbda1bcf67 static/trackster.css --- a/static/trackster.css Mon Dec 14 15:17:13 2009 -0500 +++ b/static/trackster.css Mon Dec 14 21:14:53 2009 -0500 @@ -1,14 +1,18 @@ +body, html { + height: 100%; +} + body { margin: 0 0; padding: 0; font-family: verdana; font-size: 12px; - overflow-y: hidden; + overflow: hidden; + background: #eeeeee; } #content { width: 100%; - height: 100%; } #center { @@ -29,22 +33,23 @@ border-left: 1px solid green; border-right: 1px solid red; } /* debugging */ #nav { - padding: 0.5em 0; - background:#cccccc; - background-image:url(style/panel_header_bg.png); - background-position:top center; - background-repeat:repeat-x;border-top:solid #999 1px; + padding: 0 0; color:#333;font-weight:bold; } #nav-controls { text-align: center; + background:#cccccc; + background-image:url(style/panel_header_bg.png); + background-position:top center; + background-repeat:repeat-x; + padding-bottom: 5px; } #nav-controls a { color: white; padding: 0.1em 0.4em; - margin: 0 0.1em; + margin: 0 0; text-decoration: none; background: black; -webkit-border-radius: 1em; @@ -55,6 +60,7 @@ width: 100%; margin: 0px; color: white; + margin-top: 10px; } #overview-viewport { @@ -63,8 +69,9 @@ /* border-top: solid #666 1px;*/ /* border-bottom: solid #aaa 1px;*/ background: white; - border: solid gray 1px; - margin: 5px; + border-top: solid gray 1px; + border-bottom: solid gray 1px; + margin: 5px 0; } #overview-box { position: absolute; @@ -75,7 +82,7 @@ } #viewport { - overflow: hidden; + overflow-x: hidden; background-color: #fff; /* overflow: scroll;*/ /* border-bottom: 2px solid black;*/ @@ -96,13 +103,15 @@ } .track { -/* border-top: solid gray 1px; */ -/* border-bottom: solid gray 1px; */ + /* border-top: solid #DDDDDD 1px; */ + /* border-bottom: solid #DDDDDD 1px; */ + background: white; } .track-header { - text-align: center; - padding: 2px 0; + text-align: left; + padding: 4px; + color: #666; } .track-content { @@ -138,4 +147,5 @@ #nav-labeltrack { border-top: solid #999 1px; + border-bottom: solid #999 1px; } diff -r b628cfc8a5d1 -r 86cbda1bcf67 templates/grid_base.mako --- a/templates/grid_base.mako Mon Dec 14 15:17:13 2009 -0500 +++ b/templates/grid_base.mako Mon Dec 14 21:14:53 2009 -0500 @@ -203,7 +203,15 @@ target = $(this).attr( "target" ); options[ $(this).text() ] = function() { if ( !confirmtext || confirm( confirmtext ) ) { - do_operation_from_href(href); + if ( href.indexOf( "operation" ) > -1 ) { + do_operation_from_href(href); + } else { + var f = window; + if ( target == "_parent" ) { + f = window.parent; + } + f.location = href; + } } }; }); diff -r b628cfc8a5d1 -r 86cbda1bcf67 templates/tracks/browser.mako --- a/templates/tracks/browser.mako Mon Dec 14 15:17:13 2009 -0500 +++ b/templates/tracks/browser.mako Mon Dec 14 21:14:53 2009 -0500 @@ -33,6 +33,7 @@ } else { view.zoom_out(); } + e.preventDefault(); }); $(document).bind("dblclick", function( e ) { @@ -53,20 +54,23 @@ // To adjust the size of the viewport to fit the fixed-height footer $(window).resize( function( e ) { - $("#viewport").height( $(window).height() - 120 ); + $("#content").height( $(window).height() - $("#nav-container").height() ); + $("#viewport-container").height( $("#content").height() - $("#top-labeltrack").height() - $("#nav-labeltrack").height() ); view.redraw(); }); + + $(window).resize(); $("#viewport").bind( "dragstart", function( e ) { this.original_low = view.low; this.current_height = e.clientY; this.current_x = e.offsetX; }).bind( "drag", function( e ) { + var container = $(this).parent(); var delta = e.offsetX - this.current_x; - var new_scroll = $(this).scrollTop() - (e.clientY - this.current_height); - - if ( new_scroll < $(this).get(0).scrollHeight - $(this).height() - 200) { - $(this).scrollTop(new_scroll); + var new_scroll = container.scrollTop() - (e.clientY - this.current_height); + if ( new_scroll < container.get(0).scrollHeight - container.height() ) { + container.scrollTop(new_scroll); } this.current_height = e.clientY; @@ -101,10 +105,13 @@ <div id="content"> <div id="top-labeltrack"></div> - <div id="viewport"></div> + <div id="viewport-container" style="overflow-x: hidden; overflow-y: auto;"> + <div id="viewport"></div> + </div> + <div id="nav-labeltrack"></div> </div> <div id="nav-container"> - <div id="nav-labeltrack"></div> + ## <div style="height: 5px; border-top: solid #ccc 1px"></div> <div id="nav"> <div id="overview"> <div id="overview-viewport"> @@ -116,9 +123,9 @@ <select id="chrom" name="chrom" style="width: 15em;"> <option value="">Loading</option> </select> - <input id="low" size="12" />:<input id="high" size="12" /> + <input id="low" size="12" />:<input id="high" size="12" /> ## <input type="hidden" name="dataset_ids" value="${dataset_ids}" /> - <input type="hidden" name="id" value="${id}" /> + <input type="hidden" name="id" value="${id}" /> <a href="#" onclick="javascript:view.zoom_in();view.redraw();">+</a> <a href="#" onclick="javascript:view.zoom_out();view.redraw();">-</a> </form>