1 new commit in galaxy-central: https://bitbucket.org/galaxy/galaxy-central/commits/fd7ab1c8f6a5/ Changeset: fd7ab1c8f6a5 User: jgoecks Date: 2013-11-08 17:28:41 Summary: Trackster: (a) less-ify stylesheet; (b) update styles to project track header over data and adjust other styles as needed; (c) update styles to compress tracks and data as much as possible. Affected #: 4 files diff -r 029077baa05bd34b4b269e8d225d78f82001a64a -r fd7ab1c8f6a5d498f76b1b1a520fbceb07706769 static/scripts/viz/trackster/painters.js --- a/static/scripts/viz/trackster/painters.js +++ b/static/scripts/viz/trackster/painters.js @@ -357,17 +357,14 @@ if (mode === "no_detail" || mode === "Squish" || mode === "Pack") { required_height = rows_required * y_scale; } - return required_height + this.get_top_padding(width) + this.get_bottom_padding(width); + return required_height + this.get_top_padding(width); }, + /** Extra padding before first row of features */ get_top_padding: function(width) { return 0; }, - /** Extra padding after last row of features */ - get_bottom_padding: function(width) { - // Pad bottom by half a row, at least 5 px - return Math.max( Math.round( this.get_row_height() / 2 ), 5 ); - }, + /** * Draw data on ctx using slots and within the rectangle defined by width and height. Returns * a FeaturePositionMapper object with information about where features were drawn. diff -r 029077baa05bd34b4b269e8d225d78f82001a64a -r fd7ab1c8f6a5d498f76b1b1a520fbceb07706769 static/scripts/viz/trackster/tracks.js --- a/static/scripts/viz/trackster/tracks.js +++ b/static/scripts/viz/trackster/tracks.js @@ -279,7 +279,7 @@ { name: "settings_icon", title: "Edit settings", - css_class: "settings-icon", + css_class: "gear", on_click_fn: function(drawable) { var view = new ConfigView({ model: drawable.config @@ -1797,7 +1797,7 @@ // already in group, add track to group. if (current_track.container === view) { // Create new group. - var group = new DrawableGroup(view, view, { name: this.prefs.name }); + var group = new DrawableGroup(view, view, { name: this.model.get('track').prefs.name }); // Replace track with group. var index = current_track.container.replace_drawable(current_track, group, false); @@ -2397,7 +2397,7 @@ { name: "overview_icon", title: "Set as overview", - css_class: "overview-icon", + css_class: "application-dock-270", on_click_fn: function(track) { track.view.set_overview(track); } @@ -2408,7 +2408,7 @@ { name: "filters_icon", title: "Filters", - css_class: "filters-icon", + css_class: "ui-slider-050", on_click_fn: function(drawable) { // TODO: update Tooltip text. if (drawable.filters_manager.visible()) { @@ -2706,16 +2706,16 @@ if (!result || result === "error" || result.kind === "error") { // Dataset is in error state. track.container_div.addClass("error"); - track.tiles_div.text(DATA_ERROR); + track.content_div.text(DATA_ERROR); if (result.message) { // Add links to (a) show error and (b) try again. - track.tiles_div.append( + track.content_div.append( $("<a href='javascript:void(0);'></a>").text("View error").click(function() { Galaxy.modal.show({title: "Trackster Error", body: "<pre>" + result.message + "</pre>", buttons : {'Close' : function() { Galaxy.modal.hide(); } } }); }) ); - track.tiles_div.append( $('<span/>').text(' ') ); - track.tiles_div.append( + track.content_div.append( $('<span/>').text(' ') ); + track.content_div.append( $("<a href='javascript:void(0);'></a>").text("Try again").click(function() { track.init(true); }) @@ -2771,7 +2771,6 @@ return $.getJSON( track.dataset.url(), { data_type: 'data', stats: true, chrom: track.view.chrom, low: 0, high: track.view.max_high, hda_ldda: track.dataset.get('hda_ldda') }, function(result) { - track.container_div.addClass( "line-track" ); var data = result.data; // Tracks may not have stat data either because there is no data or data is not yet ready. @@ -3389,8 +3388,10 @@ tile_element.css('height', 'auto'); // Update max height based on current tile's height. - this.max_height_px = Math.max(this.max_height_px, tile_element.height()); - + // BUG/HACK: tile_element.height() returns a height that is always 2 pixels too big, so + // -2 to get the correct height. + this.max_height_px = Math.max(this.max_height_px, tile_element.height() - 2); + // Update height for all tiles based on max height. tile_element.parent().children().css("height", this.max_height_px + "px"); @@ -4327,8 +4328,7 @@ this.tiles_div.prepend( $("<div/>").html(samples_div_html).addClass('yaxislabel variant top sample').css({ - // +2 for padding - 'top': this.prefs.summary_height + 2, + 'top': this.prefs.summary_height, }) ); } diff -r 029077baa05bd34b4b269e8d225d78f82001a64a -r fd7ab1c8f6a5d498f76b1b1a520fbceb07706769 static/style/blue/trackster.css --- a/static/style/blue/trackster.css +++ b/static/style/blue/trackster.css @@ -2,57 +2,49 @@ .trackster-nav-container{width:100%;height:0;text-align:center} .trackster-nav{padding:0 0;color:#333;font-weight:bold;background:#cccccc;position:relative;display:inline-block;top:-2em;background:transparent;border:none} .content{font:10px verdana} -.nav-controls{text-align:center;padding:1px 0} -.nav-controls input{margin:0 5px} +.nav-controls{text-align:center;padding:1px 0}.nav-controls input{margin:0 5px} #zoom-in,#zoom-out{display:inline-block;height:16px;width:16px;margin-bottom:-3px;cursor:pointer} #zoom-out{background:transparent url(../images/fugue/magnifier-zoom-out.png) center center no-repeat} #zoom-in{margin-left:10px;background:transparent url(../images/fugue/magnifier-zoom.png) center center no-repeat} -.nav-input{font-size:12px;width:30em;z-index:1000} +.nav-input{font-size:12px;width:30em;z-index:2} .location{display:inline-block;width:15em;margin:0 10px} .draghandle{margin-top:2px;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} +.intro{z-index:2;margin-left:auto;margin-right:auto;color:#555;text-align:center;font-size:16px}.intro .action-button{background-color:#CCC;margin-top:10px;padding:1em;text-decoration:underline} .overview{width:100%;margin:0px;color:white} .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{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} +.overview-close{font:9px verdana;position:absolute;top:0px;right:0px;padding:5px;z-index:2;background-color:white} +.overview-highlight{top:0px;position:absolute;z-index:2;border-style:solid;border-color:#666;border-width:0px 1px} +.overview-boxback{width:100%;bottom:0px;z-index:2;position:absolute;height:14px;background:#eee;border:solid #999 1px} +.overview-box{cursor:pointer;bottom:0px;z-index:2;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{z-index:101;position:absolute} -.yaxislabel.top{top:24px;left:10px} -.yaxislabel.bottom{bottom:2px;left:10px} -.line-track .track-content{border-top:1px solid #eee;border-bottom:1px solid #eee} +.yaxislabel{z-index:2;position:absolute;right:20px} +.yaxislabel.bottom{bottom:2px} .group-handle{cursor:move;float:left;background:#eee url('../images/tracks/block.png');width:12px;height:12px} -.group{min-height:20px;border-top:2px solid #888;border-bottom:2px solid #888} -.track{background:white} -.track-header{text-align:left;padding:4px 0px;color:#666} +.group{min-height:20px;border-top:1px solid #bbb;border-bottom:1px solid #bbb}.group>.track-header{position:relative;float:left} +.track-header{height:16px;position:absolute;z-index:2;background-color:rgba(1,1,1,0.1);border-radius:5px;padding:0px 2px;text-align:left;margin:2px;}.track-header:hover{background-color:#DDDDDD} .track-header .menubutton{margin-left:0px} -.tiles{text-align:center;background:#eee url('../images/tracks/diag_bg.gif');position:relative;overflow:hidden} +.track-name{float:left;margin-top:2px} +.tiles{background:url('../images/tracks/diag_bg.gif');position:relative;overflow:hidden} .overlay{position:absolute;left:0;top:0} -.track-name{float:left;margin-top:2px;height:16px} -.label-track .track-content{background:white} -.track-tile{background:white} -.track-tile canvas{position:relative;z-index:100} +.track-tile{background:white}.track-tile canvas{position:relative;z-index:1} .tile-message{border-bottom:solid 1px red;text-align:center;color:red;background-color:white} -.track.error .track-content{background-color:#ECB4AF;background-image:none} -.track-content{position:relative} -.track.nodata .track-content{background-color:#eee;background-image:none} +.track{border-bottom:1px solid #bbb}.track.error{background-color:#ECB4AF;background-image:none} +.track.nodata .track-content{background-color:white;background-image:none} .track.pending .track-content{background-color:white;background-image:none} +.track-content{text-align:center;position:relative;min-height:20px;padding:0px 0px 1px 0px} .loading{min-height:100px} -.label-track{font-size:10px;border:none;padding:0;margin:0;height:1.5em;overflow:hidden} -.label-track .label{border-left:solid #999 1px;padding:1px;padding-bottom:2px;display:inline-block} -.label-track .track-content{border:none} -.reference-track{border:none;margin:0;padding:0;line-height:1} +.label-track{font-size:10px;border:none;padding:0;margin:0;height:1.5em;overflow:hidden}.label-track .label{border-left:solid #999 1px;padding:1px;padding-bottom:2px;display:inline-block} +.label-track .track-content{border:none;background:white} +.reference-track{border:none;margin:0;padding:0;line-height:1}.reference-track .track-content{min-height:0px} .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 #333 1px} -input{font:10px verdana} -.dynamic-tool,.filters{margin-left:0.25em;padding-bottom:0.5em} +input{font:10px verdana}input[type="submit"]{padding:0px;font-size:inherit} +.dynamic-tool,.filters{padding-top:18px;padding-bottom:0.5em;margin-left:0.25em} .dynamic-tool{width:410px} .filters{float:left;margin:1em;width:60%;position:relative} .display-controls{float:left;margin-left:1em} -.slider-row{margin-left:1em;height:16px} -.slider-row.input{height:22px} +.slider-row{margin-left:1em;height:16px}.slider-row.input{height:22px} .elt-label{float:left;width:30%;font-weight:bold;margin-right:1em} .slider{float:left;width:40%;position:relative;padding-top:2px} .tool-name{font-size:110%;font-weight:bold} @@ -60,44 +52,26 @@ .param-label{float:left;font-weight:bold;padding-top:0.2em;width:50%} .menu-button{margin:0px 4px 0px 4px} .exclamation{background:transparent url(../images/fugue/exclamation.png) no-repeat;margin-left:5em} -.layer-transparent{background:transparent url(../images/fugue/layer-transparent-bw.png) no-repeat} -.layer-transparent.active{background:transparent url(../images/fugue/layer-transparent.png) no-repeat} -.arrow-resize-090{background:transparent url(../images/fugue/arrow-resize-090-bw.png) no-repeat} -.arrow-resize-090.active{background:transparent url(../images/fugue/arrow-resize-090.png) no-repeat} -.layers-stack{background:transparent url(../images/fugue/layers-stack-bw.png) no-repeat} -.layers-stack:hover{background:transparent url(../images/fugue/layers-stack.png) no-repeat} -.settings-icon{background:transparent url(../images/fugue/gear-bw.png) no-repeat} -.settings-icon:hover{background:transparent url(../images/fugue/gear.png) no-repeat} -.overview-icon{background:transparent url(../images/fugue/application-dock-270-bw.png) no-repeat} -.overview-icon:hover{background:transparent url(../images/fugue/application-dock-270.png) no-repeat} -.hammer{background:transparent url(../images/fugue/hammer-bw.png) no-repeat} -.hammer:hover{background:transparent url(../images/fugue/hammer.png) no-repeat} -.toolbox{background:transparent url(../images/fugue/toolbox-bw.png) no-repeat} -.toolbox:hover{background:transparent url(../images/fugue/toolbox.png) no-repeat} -.filters-icon{background:transparent url(../images/fugue/ui-slider-050-bw.png) no-repeat} -.filters-icon:hover{background:transparent url(../images/fugue/ui-slider-050.png) no-repeat} -.globe{background:transparent url(../images/fugue/globe-bw.png) no-repeat} -.globe:hover{background:transparent url(../images/fugue/globe.png) no-repeat} +.icon-button.bookmarks{background:transparent url('../images/fugue/bookmarks-bw.png') no-repeat}.icon-button.bookmarks:hover{background:transparent url('../images/fugue/bookmarks.png') no-repeat} +.icon-button.layers-stack{background:transparent url('../images/fugue/layers-stack-bw.png') no-repeat}.icon-button.layers-stack:hover{background:transparent url('../images/fugue/layers-stack.png') no-repeat} +.icon-button.hammer{background:transparent url('../images/fugue/hammer-bw.png') no-repeat}.icon-button.hammer:hover{background:transparent url('../images/fugue/hammer.png') no-repeat} +.icon-button.toolbox{background:transparent url('../images/fugue/toolbox-bw.png') no-repeat}.icon-button.toolbox:hover{background:transparent url('../images/fugue/toolbox.png') no-repeat} +.icon-button.globe{background:transparent url('../images/fugue/globe-bw.png') no-repeat}.icon-button.globe:hover{background:transparent url('../images/fugue/globe.png') no-repeat} +.icon-button.block--plus{background:transparent url('../images/fugue/block--plus-bw.png') no-repeat}.icon-button.block--plus:hover{background:transparent url('../images/fugue/block--plus.png') no-repeat} +.icon-button.toggle{background:transparent url('../images/fugue/toggle-bw.png') no-repeat}.icon-button.toggle:hover{background:transparent url('../images/fugue/toggle.png') no-repeat} +.icon-button.toggle-expand{background:transparent url('../images/fugue/toggle-expand-bw.png') no-repeat}.icon-button.toggle-expand:hover{background:transparent url('../images/fugue/toggle-expand.png') no-repeat} +.icon-button.gear{background:transparent url('../images/fugue/gear-bw.png') no-repeat}.icon-button.gear:hover{background:transparent url('../images/fugue/gear.png') no-repeat} +.icon-button.application-dock-270{background:transparent url('../images/fugue/application-dock-270-bw.png') no-repeat}.icon-button.application-dock-270:hover{background:transparent url('../images/fugue/application-dock-270.png') no-repeat} +.icon-button.ui-slider-050{background:transparent url('../images/fugue/ui-slider-050-bw.png') no-repeat}.icon-button.ui-slider-050:hover{background:transparent url('../images/fugue/ui-slider-050.png') no-repeat} +.icon-button.arrow-resize-090{background:transparent url('../images/fugue/arrow-resize-090-bw.png') no-repeat}.icon-button.arrow-resize-090:hover{background:transparent url('../images/fugue/arrow-resize-090.png') no-repeat} +.icon-button.layer-transparent{background:transparent url('../images/fugue/layer-transparent-bw.png') no-repeat}.icon-button.layer-transparent:hover{background:transparent url('../images/fugue/layer-transparent.png') no-repeat} .remove-icon,.overview-close{background:transparent url(../images/fugue/cross-small-bw.png) no-repeat} .icon-button.remove-icon:hover,.overview-close:hover{background:transparent url(../images/fugue/cross-circle.png) no-repeat} -.icon-button.toggle{background:transparent url(../images/fugue/toggle-bw.png) no-repeat;margin-right:0px} -.icon-button.toggle:hover{background:transparent url(../images/fugue/toggle.png) no-repeat} -.icon-button.toggle-expand{background:transparent url(../images/fugue/toggle-expand-bw.png) no-repeat;margin-right:0px} -.icon-button.toggle-expand:hover{background:transparent url(../images/fugue/toggle-expand.png) no-repeat} -.icon-button.block--plus{background:transparent url(../images/fugue/block--plus-bw.png) no-repeat} -.icon-button.block--plus:hover{background:transparent url(../images/fugue/block--plus.png) no-repeat} -.icon-button.bookmarks{background:transparent url(../images/fugue/bookmarks-bw.png) no-repeat} -.icon-button.bookmarks:hover{background:transparent url(../images/fugue/bookmarks.png) no-repeat} -.icon-button.toolbox{background:transparent url(../images/fugue/toolbox-bw.png) no-repeat} -.icon-button.toolbox:hover{background:transparent url(../images/fugue/toolbox.png) no-repeat} .child-track-icon{background:url('../images/fugue/arrow-000-small-bw.png') no-repeat;width:30px;cursor:move} -.track-resize{background:#fff url('../images/visualization/draggable_vertical.png') no-repeat top center;position:absolute;right:3px;bottom:-4px;width:14px;height:7px;border:solid #999 1px;z-index:100} -.bookmark{background:white;border:solid #999 1px;border-right:none;margin:0.5em;margin-right:0;padding:0.5em} -.bookmark .position{font-weight:bold} +.track-resize{background:#fff url('../images/visualization/draggable_vertical.png') no-repeat top center;position:absolute;right:3px;bottom:-4px;width:14px;height:7px;border:solid #999 1px;z-index:2} +.bookmark{background:white;border:solid #999 1px;border-right:none;margin:0.5em;margin-right:0;padding:0.5em}.bookmark .position{font-weight:bold} .delete-icon-container{float:right} -.icon{display:inline-block;width:16px;height:16px} -.icon.more-down{background:url('../images/fugue/arrow-transition-270-bw.png') no-repeat 0 0} +.icon{display:inline-block;width:16px;height:16px}.icon.more-down{background:url('../images/fugue/arrow-transition-270-bw.png') no-repeat 0 0} .icon.more-across{background:url('../images/fugue/arrow-transition-bw.png') no-repeat 0 0} -.intro>.action-button{background-color:#CCC;margin-top:10px;padding:1em;text-decoration:underline} -.feature-popup{position:absolute;z-index:1000;padding:5px;font-size:10px;filter:alpha(opacity=80);background-repeat:no-repeat;background-image:url(../images/tipsy.gif);background-position:top center} +.feature-popup{position:absolute;z-index:2;padding:5px;font-size:10px;filter:alpha(opacity=80);background-repeat:no-repeat;background-image:url(../images/tipsy.gif);background-position:top center} .feature-popup-inner{padding:5px 8px 4px 8px;background-color:black;color:white} diff -r 029077baa05bd34b4b269e8d225d78f82001a64a -r fd7ab1c8f6a5d498f76b1b1a520fbceb07706769 static/style/src/less/trackster.less --- a/static/style/src/less/trackster.less +++ b/static/style/src/less/trackster.less @@ -1,3 +1,10 @@ +/* Z-indexes for levels used in viz; overlay level is shown above base level. */ +@base-index: 1; +@overlay-index: @base-index + 1; +@track-header-height: 16px; +@min-track-height: (@track-header-height + 4); +@separator-color: #BBB; + .viewport-container { overflow-x: hidden; overflow-y: auto; @@ -31,10 +38,9 @@ .nav-controls { text-align: center; padding: 1px 0; -} - -.nav-controls input { - margin: 0 5px; + input { + margin: 0 5px; + } } #zoom-in, #zoom-out { @@ -57,7 +63,7 @@ .nav-input { font-size: 12px; width: 30em; - z-index: 1000; + z-index: @overlay-index; } .location { @@ -76,13 +82,20 @@ } .intro { - z-index: 1000; + z-index: @overlay-index; /* margin-top: 200px;*/ margin-left: auto; margin-right: auto; color: #555; text-align: center; font-size: 16px; + + .action-button { + background-color: #CCC; + margin-top: 10px; + padding: 1em; + text-decoration:underline; + } } .overview { @@ -106,14 +119,14 @@ top: 0px; right: 0px; padding: 5px; - z-index: 500; + z-index: @overlay-index; background-color: white; } .overview-highlight { top: 0px; position: absolute; - z-index: 100; + z-index: @overlay-index; border-style: solid; border-color: #666; border-width: 0px 1px; @@ -122,7 +135,7 @@ .overview-boxback { width: 100%; bottom: 0px; - z-index: 50; + z-index: @overlay-index; position: absolute; height: 14px; background: #eee; @@ -132,7 +145,7 @@ .overview-box { cursor: pointer; bottom: 0px; - z-index: 100; + z-index: @overlay-index; position: absolute; margin-top: 0px; height: 14px; @@ -146,25 +159,13 @@ } .yaxislabel { - /* Needs to be > canvas z-index. */ - z-index: 101; + z-index: @overlay-index; position: absolute; -} - -.yaxislabel.top { - top: 24px; - left: 10px; + right: 20px; } .yaxislabel.bottom { bottom: 2px; - left: 10px; -} - -/* Line track needs borders to show range */ -.line-track .track-content { - border-top: 1px solid #eee; - border-bottom: 1px solid #eee; } .group-handle { @@ -176,30 +177,45 @@ } .group { - min-height: 20px; - border-top: 2px solid #888; - border-bottom: 2px solid #888; -} + min-height: @min-track-height; + border-top: 1px solid @separator-color; + border-bottom: 1px solid @separator-color; -.track { - /* border-top: solid #DDDDDD 1px; */ - /* border-bottom: solid #DDDDDD 1px; */ - background: white; + // Put group header on its own line to avoid overlap with track header. + > .track-header { + position: relative; + float: left; + } } .track-header { + /* Overlay header drawn semi-transparently on track. */ + height: @track-header-height; + position: absolute; + z-index: @overlay-index; + background-color: rgba(1, 1, 1, 0.1); + border-radius: 5px; + padding: 0px 2px; text-align: left; - padding: 4px 0px; - color: #666; + margin: 2px; + + /* Make header opaque when focused on. */ + &:hover { + background-color: #DDDDDD; + } + + .menubutton { + margin-left: 0px; + } } -.track-header .menubutton { - margin-left: 0px; +.track-name { + float: left; + margin-top: 2px; } .tiles { - text-align: center; - background: #eee url('../images/tracks/diag_bg.gif'); + background: url('../images/tracks/diag_bg.gif'); position: relative; overflow: hidden; } @@ -210,23 +226,13 @@ top: 0; } -.track-name { - float: left; - margin-top: 2px; - height: 16px; -} - -.label-track .track-content { - background: white; -} - .track-tile { background: white; -} - -.track-tile canvas { - position: relative; - z-index: 100; + + canvas { + position: relative; + z-index: @base-index; + } } .tile-message { @@ -236,22 +242,35 @@ background-color: white; } -.track.error .track-content { - background-color: #ECB4AF; - background-image: none; +.track { + // Separates tracks. + border-bottom: 1px solid @separator-color; + + &.error { + background-color: #ECB4AF; + background-image: none; + } + + &.nodata { + .track-content { + background-color: white; + background-image: none; + } + } + + &.pending { + .track-content { + background-color: white; + background-image: none; + } + } } .track-content { + text-align: center; position: relative; -} - -.track.nodata .track-content { - background-color: #eee; - background-image: none; -} -.track.pending .track-content { - background-color: white; - background-image: none; + min-height: @min-track-height; + padding: 0px 0px 1px 0px; } .loading { @@ -259,24 +278,25 @@ } .label-track { - /* font-weight: bold; */ font-size: 10px; border: none; padding: 0; margin: 0; height: 1.5em; overflow: hidden; -} -.label-track .label { - border-left: solid #999 1px; - padding: 1px; - padding-bottom: 2px; - display: inline-block; -} + .label { + border-left: solid #999 1px; + padding: 1px; + padding-bottom: 2px; + display: inline-block; + } -.label-track .track-content { - border: none; + .track-content { + border: none; + background: white; + } + } .reference-track { @@ -285,6 +305,10 @@ padding: 0; // Override Galaxy defaults. line-height: 1; + + .track-content { + min-height: 0px; + } } .right-float { @@ -305,22 +329,29 @@ // Styles for tools and filters. input { font: 10px verdana; + + // Override Galaxy defaults to make a smaller button. + &[type="submit"] { + padding: 0px; + font-size: inherit; + } } .dynamic-tool, .filters { + padding-top: (@track-header-height + 2); + padding-bottom: 0.5em; margin-left: 0.25em; - padding-bottom:0.5em; } .dynamic-tool { - width:410px; + width: 410px; } .filters { float: left; margin: 1em; width: 60%; - position:relative; + position: relative; } .display-controls { @@ -331,10 +362,10 @@ .slider-row { margin-left: 1em; height: 16px; -} -.slider-row.input { - height: 22px; + &.input { + height: 22px; + } } .elt-label { @@ -361,7 +392,7 @@ margin-left: 1em; } -.param-label{ +.param-label { float: left; font-weight: bold; padding-top: 0.2em; @@ -372,81 +403,38 @@ margin: 0px 4px 0px 4px; } -.exclamation{ +.exclamation { background: transparent url(../images/fugue/exclamation.png) no-repeat; margin-left: 5em; } -.layer-transparent { - background: transparent url(../images/fugue/layer-transparent-bw.png) no-repeat; +// Defines icons that change from black/white to normal on hover. Note that the images +// are required to exist in the location specified. +// TODO: make images into spritemap. +.icon-hover-mixin(@name) { + &.@{name} { + background: transparent url('../images/fugue/@{name}-bw.png') no-repeat; + + &:hover { + background: transparent url('../images/fugue/@{name}.png') no-repeat; + } + } } -.layer-transparent.active { - background: transparent url(../images/fugue/layer-transparent.png) no-repeat; -} - -.arrow-resize-090 { - background: transparent url(../images/fugue/arrow-resize-090-bw.png) no-repeat; -} - -.arrow-resize-090.active { - background: transparent url(../images/fugue/arrow-resize-090.png) no-repeat; -} - -.layers-stack { - background: transparent url(../images/fugue/layers-stack-bw.png) no-repeat; -} - -.layers-stack:hover { - background:transparent url(../images/fugue/layers-stack.png) no-repeat; -} - -.settings-icon { - background: transparent url(../images/fugue/gear-bw.png) no-repeat; -} - -.settings-icon:hover { - background: transparent url(../images/fugue/gear.png) no-repeat; -} - -.overview-icon { - background:transparent url(../images/fugue/application-dock-270-bw.png) no-repeat; -} - -.overview-icon:hover { - background:transparent url(../images/fugue/application-dock-270.png) no-repeat; -} - -.hammer { - background: transparent url(../images/fugue/hammer-bw.png) no-repeat; -} - -.hammer:hover { - background: transparent url(../images/fugue/hammer.png) no-repeat; -} - -.toolbox { - background: transparent url(../images/fugue/toolbox-bw.png) no-repeat; -} - -.toolbox:hover { - background: transparent url(../images/fugue/toolbox.png) no-repeat; -} - -.filters-icon { - background: transparent url(../images/fugue/ui-slider-050-bw.png) no-repeat; -} - -.filters-icon:hover { - background: transparent url(../images/fugue/ui-slider-050.png) no-repeat; -} - -.globe { - background: transparent url(../images/fugue/globe-bw.png) no-repeat; -} - -.globe:hover { - background: transparent url(../images/fugue/globe.png) no-repeat; +.icon-button { + .icon-hover-mixin(bookmarks); + .icon-hover-mixin(layers-stack); + .icon-hover-mixin(hammer); + .icon-hover-mixin(toolbox); + .icon-hover-mixin(globe); + .icon-hover-mixin(block--plus); + .icon-hover-mixin(toggle); + .icon-hover-mixin(toggle-expand); + .icon-hover-mixin(gear); + .icon-hover-mixin(application-dock-270); + .icon-hover-mixin(ui-slider-050); + .icon-hover-mixin(arrow-resize-090); + .icon-hover-mixin(layer-transparent); } .remove-icon, .overview-close { @@ -457,46 +445,6 @@ background: transparent url(../images/fugue/cross-circle.png) no-repeat; } -.icon-button.toggle { - background: transparent url(../images/fugue/toggle-bw.png) no-repeat;margin-right:0px; -} - -.icon-button.toggle:hover { - background: transparent url(../images/fugue/toggle.png) no-repeat; -} - -.icon-button.toggle-expand { - background: transparent url(../images/fugue/toggle-expand-bw.png) no-repeat;margin-right:0px; -} - -.icon-button.toggle-expand:hover { - background: transparent url(../images/fugue/toggle-expand.png) no-repeat; -} - -.icon-button.block--plus { - background: transparent url(../images/fugue/block--plus-bw.png) no-repeat; -} - -.icon-button.block--plus:hover { - background: transparent url(../images/fugue/block--plus.png) no-repeat; -} - -.icon-button.bookmarks { - background: transparent url(../images/fugue/bookmarks-bw.png) no-repeat; -} - -.icon-button.bookmarks:hover { - background: transparent url(../images/fugue/bookmarks.png) no-repeat; -} - -.icon-button.toolbox { - background: transparent url(../images/fugue/toolbox-bw.png) no-repeat; -} - -.icon-button.toolbox:hover { - background: transparent url(../images/fugue/toolbox.png) no-repeat; -} - .child-track-icon { background:url('../images/fugue/arrow-000-small-bw.png') no-repeat; width: 30px; @@ -511,7 +459,7 @@ width: 14px; height: 7px; border: solid #999 1px; - z-index: 100; + z-index: @overlay-index; } .bookmark { @@ -521,10 +469,10 @@ margin:0.5em; margin-right:0; padding:0.5em; -} -.bookmark .position { - font-weight:bold; + .position { + font-weight: bold; + } } .delete-icon-container { @@ -532,29 +480,22 @@ } .icon { - display:inline-block; - width:16px; - height:16px; -} + display: inline-block; + width: 16px; + height: 16px; -.icon.more-down { - background:url('../images/fugue/arrow-transition-270-bw.png') no-repeat 0px 0px; -} + &.more-down { + background:url('../images/fugue/arrow-transition-270-bw.png') no-repeat 0px 0px; + } -.icon.more-across { - background: url('../images/fugue/arrow-transition-bw.png') no-repeat 0px 0px; -} - -.intro > .action-button { - background-color: #CCC; - margin-top: 10px; - padding: 1em; - text-decoration:underline; + &.more-across { + background: url('../images/fugue/arrow-transition-bw.png') no-repeat 0px 0px; + } } .feature-popup { position: absolute; - z-index: 1000; + z-index: @overlay-index; padding: 5px; font-size: 10px; filter: alpha(opacity=80); Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.