# HG changeset patch -- Bitbucket.org # Project galaxy-dist # URL http://bitbucket.org/galaxy/galaxy-dist/overview # User James Taylor <james@jamestaylor.org> # Date 1289163413 18000 # Node ID fb55bfc792b1d087783055a736d9fb439e5bb41c # Parent d46ccc650084224553b3b48c11df64d43d7673ef Trackster UI tweaks, mainly moving the navigation to the top, still needs to be compressed and cleaned up. Also, getting borders and spacing a little more even. Some intial keyboard navigation --- a/templates/tracks/browser.mako +++ b/templates/tracks/browser.mako @@ -15,8 +15,8 @@ ${h.css( "history", "autocomplete_tagging", "trackster", "overcast/jquery-ui-1.8.5.custom" )} <style type="text/css"> - #center { - overflow: auto; + #center, #browser-container { + overflow: none; } ul#sortable-ul { list-style: none; @@ -29,10 +29,7 @@ background: #eee; } .nav-container { - position: fixed; width: 100%; - left: 0; - bottom: 0; } # Styles for filters. .filter-name { @@ -57,6 +54,7 @@ <a id="add-track" class="panel-header-button right-float" href="javascript:void(0);">Add Tracks</a></div></div> +<div id="browser-container" class="unified-panel-body"></div></%def> @@ -79,7 +77,7 @@ $(function() { %if config: - view = new View( $("#center"), "${config.get('title') | h}", "${config.get('vis_id')}", "${config.get('dbkey')}" ); + view = new View( $("#browser-container"), "${config.get('title') | h}", "${config.get('vis_id')}", "${config.get('dbkey')}" ); view.editor = true; %for track in config.get('tracks'): view.add_track( @@ -215,6 +213,16 @@ error: function() { alert("Could not save visualization"); } }); }); + + $(document).keydown( function( e ) { + // 37 == left + if ( e.which == 39 ) { + view.move_fraction( -0.25 ); + // 39 == right + } else if ( e.which == 37 ) { + view.move_fraction( 0.25 ); + } + }); }; }); --- a/static/scripts/trackster.js +++ b/static/scripts/trackster.js @@ -103,15 +103,25 @@ var View = function( container, title, v // Create DOM elements var parent_element = this.container, view = this; - this.top_labeltrack = $("<div/>").addClass("top-labeltrack").appendTo(parent_element); + // Top container for things that are fixed at the top + this.top_container = $("<div/>").addClass("top-container").appendTo(parent_element); + // Content container, primary tracks are contained in here this.content_div = $("<div/>").addClass("content").css("position", "relative").appendTo(parent_element); + // Bottom container for things that are fixed at the bottom + this.bottom_container = $("<div/>").addClass("bottom-container").appendTo(parent_element); + // Label track fixed at top + this.top_labeltrack = $("<div/>").addClass("top-labeltrack").appendTo(this.top_container); + // Viewport for dragging tracks in center this.viewport_container = $("<div/>").addClass("viewport-container").addClass("viewport-container").appendTo(this.content_div); - this.intro_div = $("<div/>").addClass("intro").text("Select a chrom from the dropdown below").hide(); // Future overlay - - this.nav_container = $("<div/>").addClass("nav-container").appendTo(parent_element); - this.nav_labeltrack = $("<div/>").addClass("nav-labeltrack").appendTo(this.nav_container); + // Future overlay? + this.intro_div = $("<div/>").addClass("intro").text("Select a chrom from the dropdown below").hide(); + // Another label track at bottom + this.nav_labeltrack = $("<div/>").addClass("nav-labeltrack").appendTo(this.bottom_container); + // Navigation at top + this.nav_container = $("<div/>").addClass("nav-container").prependTo(this.top_container); this.nav = $("<div/>").addClass("nav").appendTo(this.nav_container); - this.overview = $("<div/>").addClass("overview").appendTo(this.nav); + // Overview (scrollbar and overview plot) at bottom + this.overview = $("<div/>").addClass("overview").appendTo(this.bottom_container); this.overview_viewport = $("<div/>").addClass("overview-viewport").appendTo(this.overview); this.overview_close = $("<a href='javascript:void(0);'>Close Overview</a>").addClass("overview-close").hide().appendTo(this.overview_viewport); this.overview_highlight = $("<div />").addClass("overview-highlight").hide().appendTo(this.overview_viewport); @@ -327,6 +337,11 @@ var View = function( container, title, v } view.change_chrom(chrom, new_low, new_high); }, + move_fraction : function( fraction ) { + var view = this; + var span = view.high - view.low; + this.move_delta( fraction * span ); + }, move_delta: function(delta_chrom) { var view = this; var current_chrom_span = view.high - view.low; @@ -439,7 +454,7 @@ var View = function( container, title, v this.redraw(); }, resize_window: function() { - this.viewport_container.height( this.container.height() - this.nav_container.height() - 45 ); + this.viewport_container.height( this.container.height() - this.top_container.height() - this.bottom_container.height() ); this.nav_container.width( this.container.width() ); this.redraw(); }, --- a/static/june_2007_style/blue/trackster.css +++ b/static/june_2007_style/blue/trackster.css @@ -1,7 +1,7 @@ .viewport-container{overflow-x:hidden;overflow-y:auto;} -.nav{padding:0 0;color:#333;font-weight:bold;} -.content{font:9px verdana;} -.nav-controls{text-align:center;position:relative;background:#cccccc;background-image:url(panel_header_bg.png);background-position:top center;background-repeat:repeat-x;padding:2px 0;} +.nav{padding:0 0;color:#333;font-weight:bold;background:#cccccc;background-image:url(panel_header_bg.png);background-position:bottom center;background-repeat:repeat-x;height:2.5em;border-bottom:solid #333 1px;} +.content{font:10px verdana;} +.nav-controls{text-align:center;position:relative;padding:2px 0;} .nav-controls input{margin:0 5px;} .nav-controls a{padding:0 0.4em;} .nav-input{font-size:12px;width:30em;z-index:1000;} @@ -9,24 +9,23 @@ .draghandle{cursor:move;float:left;background:transparent url(../images/visualization/draggable_horizontal.png) center center no-repeat;width:10px;height:12px;} .intro{z-index:1000;margin-left:auto;margin-right:auto;color:#555;text-align:center;font-size:16px;} .overview{width:100%;margin:0px;color:white;} -.overview-viewport{position:relative;height:14px;background:white;border-bottom:solid gray 1px;margin:0;} +.overview-viewport{position:relative;height:14px;background:white;margin:0;} .overview-close{font:9px verdana;position:absolute;top:0px;right:0px;padding:5px;z-index:500;background-color:white;} -.overview-highlight{opacity:0.5;top:0px;position:absolute;z-index:100;border-style:solid;border-color:#484848;border-width:0px 1px;} -.overview-boxback{width:100%;bottom:0px;z-index:50;position:absolute;height:14px;background:#eee;} -.overview-box{cursor:pointer;opacity:0.5;bottom:0px;z-index:100;position:absolute;margin-top:0px;height:14px;background:#484848 url(../images/visualization/draggable_horizontal.png) center center no-repeat;border-style:solid;border-color:#484848;border-width:0px 1px;-moz-border-radius:3px;border-radius:3px;} -.overview-box:hover{background-color:#838383;border-color:#838383;} +.overview-highlight{top:0px;position:absolute;z-index:100;border-style:solid;border-color:#666;border-width:0px 1px;} +.overview-boxback{width:100%;bottom:0px;z-index:50;position:absolute;height:14px;background:#eee;border:solid #999 1px;} +.overview-box{cursor:pointer;bottom:0px;z-index:100;position:absolute;margin-top:0px;height:14px;background:#C1C9E5 url(../images/visualization/draggable_horizontal.png) center center no-repeat;border:solid #666 1px;} .viewport-canvas{width:100%;height:100px;} .yaxislabel{color:#777;z-index:100;} .line-track .track-content{border-top:1px solid #ddd;border-bottom:1px solid #ddd;} -.track{background:white;margin-bottom:1px;} +.track{background:white;margin-bottom:1px;padding-bottom:4px;border-bottom:#eee solid 1px;} .track-header{text-align:left;padding:4px 0px;color:#666;} .track-header .menubutton{margin-left:3px;} .track-content{overflow:hidden;text-align:center;} -.track.error{background-color:#ECB4AF;} -.track.nodata{background-color:#ddd;} +.track.error .track-content{background-color:#ECB4AF;} +.track.nodata .track-content{background-color:#ddd;} .loading{min-height:100px;} -.label-track{} -.label-track .label{border-left:solid #999 1px;padding:1px;display:inline-block;} +.label-track{font-size:10px;border:none;padding:0;margin:0;height:1.3em;} +.label-track .label{border-left:solid #999 1px;padding:1px;padding-bottom:2px;display:inline-block;} .right-float{float:right;margin-left:5px;} .top-labeltrack{position:relative;border-bottom:solid #999 1px;} -.nav-labeltrack{border-top:solid #999 1px;border-bottom:solid #999 1px;} +.nav-labeltrack{border-top:solid #999 1px;border-bottom:solid #333 1px;} --- a/static/june_2007_style/trackster.css.tmpl +++ b/static/june_2007_style/trackster.css.tmpl @@ -5,17 +5,19 @@ .nav { padding: 0 0; color:#333;font-weight:bold; + background:#cccccc; + background-image:url(panel_header_bg.png); + background-position: bottom center; + background-repeat:repeat-x; + height: 2.5em; + border-bottom: solid #333 1px; } .content { - font: 9px verdana; + font: 10px verdana; } .nav-controls { text-align: center; position: relative; - background:#cccccc; - background-image:url(panel_header_bg.png); - background-position:top center; - background-repeat:repeat-x; padding: 2px 0; } .nav-controls input { @@ -61,7 +63,6 @@ /* border-top: solid #666 1px;*/ /* border-bottom: solid #aaa 1px;*/ background: white; - border-bottom: solid gray 1px; margin: 0; } .overview-close { @@ -74,12 +75,11 @@ background-color: white; } .overview-highlight { - opacity: 0.5; top: 0px; position: absolute; z-index: 100; border-style: solid; - border-color: #484848; + border-color: #666; border-width: 0px 1px; } .overview-boxback { @@ -89,25 +89,17 @@ position: absolute; height: 14px; background: #eee; + border: solid #999 1px; } .overview-box { cursor: pointer; - opacity: 0.5; bottom: 0px; z-index: 100; position: absolute; margin-top: 0px; height: 14px; - background: #484848 url(../images/visualization/draggable_horizontal.png) center center no-repeat; - border-style: solid; - border-color: #484848; - border-width: 0px 1px; - -moz-border-radius: 3px; - border-radius: 3px; -} -.overview-box:hover { - background-color: #838383; - border-color: #838383; + background: #C1C9E5 url(../images/visualization/draggable_horizontal.png) center center no-repeat; + border: solid #666 1px; } .viewport-canvas { width: 100%; @@ -129,6 +121,8 @@ /* border-bottom: solid #DDDDDD 1px; */ background: white; margin-bottom: 1px; + padding-bottom: 4px; + border-bottom: #eee solid 1px; } .track-header { @@ -146,10 +140,10 @@ text-align: center; } -.track.error { +.track.error .track-content { background-color: #ECB4AF; } -.track.nodata { +.track.nodata .track-content { background-color: #ddd; } @@ -159,11 +153,16 @@ .label-track { /* font-weight: bold; */ - /* font-size: 10px; */ + font-size: 10px; + border: none; + padding: 0; + margin: 0; + height: 1.3em; } .label-track .label { border-left: solid #999 1px; padding: 1px; + padding-bottom: 2px; display: inline-block; } .right-float { @@ -178,5 +177,5 @@ .nav-labeltrack { border-top: solid #999 1px; - border-bottom: solid #999 1px; + border-bottom: solid #333 1px; }