details: http://www.bx.psu.edu/hg/galaxy/rev/185eab051284 changeset: 3359:185eab051284 user: James Taylor <james@jamestaylor.org> date: Tue Feb 09 04:16:26 2010 -0500 description: Update tooltips using a modified version of tipsy, these can be used on any page if you include the tipsy script. Also, updating some styles and icons for tags. diffstat: static/images/fugue/tag--plus.png | 0 static/images/fugue/tags.png | 0 static/images/tipsy.gif | 0 static/june_2007_style/autocomplete_tagging.css.tmpl | 6 +- static/june_2007_style/base.css.tmpl | 58 ++++-- static/june_2007_style/blue/autocomplete_tagging.css | 4 +- static/june_2007_style/blue/base.css | 29 ++- static/june_2007_style/blue/history-buttons.png | 0 static/scripts/galaxy.base.js | 10 +- static/scripts/jquery.tipsy.js | 161 +++++++++++++++++++ static/scripts/packed/galaxy.base.js | 2 +- static/scripts/packed/jquery.tipsy.js | 1 + templates/root/history.mako | 44 ++-- templates/tagging_common.mako | 5 +- 14 files changed, 256 insertions(+), 64 deletions(-) diffs (492 lines): diff -r b36c13131ac7 -r 185eab051284 static/images/fugue/tag--plus.png Binary file static/images/fugue/tag--plus.png has changed diff -r b36c13131ac7 -r 185eab051284 static/images/fugue/tags.png Binary file static/images/fugue/tags.png has changed diff -r b36c13131ac7 -r 185eab051284 static/images/tipsy.gif Binary file static/images/tipsy.gif has changed diff -r b36c13131ac7 -r 185eab051284 static/june_2007_style/autocomplete_tagging.css.tmpl --- a/static/june_2007_style/autocomplete_tagging.css.tmpl Mon Feb 08 23:52:56 2010 -0500 +++ b/static/june_2007_style/autocomplete_tagging.css.tmpl Tue Feb 09 04:16:26 2010 -0500 @@ -94,12 +94,12 @@ display: inline-block; cursor: pointer; margin: 0.2em; - border: 0; + border: solid #bbb 1px; padding: 0.1em 0.5em 0.1em 0.5em; -moz-border-radius: .5em; -webkit-border-radius: .5em; border-radius: .5em; - background:#bbb; + background:#eee; } .tag-button img @@ -109,7 +109,7 @@ .tag-button .tag-name:hover { - color: white; + color: black; } .add-tag-button diff -r b36c13131ac7 -r 185eab051284 static/june_2007_style/base.css.tmpl --- a/static/june_2007_style/base.css.tmpl Mon Feb 08 23:52:56 2010 -0500 +++ b/static/june_2007_style/base.css.tmpl Tue Feb 09 04:16:26 2010 -0500 @@ -667,6 +667,9 @@ margin-left: 2px; ## Allow alt text for screen readers text-indent: 20px; + background-repeat:no-repeat; + background-position: 0px 0px; + padding: 0; } .icon-button.display { @@ -700,38 +703,53 @@ } .icon-button.tag { - background-image:url(/static/images/tag-label.png); - background-repeat:no-repeat; - background-position:center; - padding: 0px 0px 0px 0px; + background-image: url(/static/images/tag-label.png); +} + +.icon-button.tags { + background-image: url(/static/images/fugue/tags.png); +} + +.icon-button.tag--plus { + background-image: url(/static/images/fugue/tag--plus.png); } .icon-button.annotate { background-image:url(/static/images/sticky-note-text.png); background-repeat:no-repeat; background-position:center; - padding: 0px 0px 0px 0px; + padding: 0; } -.tooltip { - position: relative; - cursor: pointer; +.tipsy { + padding: 5px; + font-size: 10px; + filter: alpha(opacity=80); + background-repeat: no-repeat; + background-image: url(../images/tipsy.gif); +} +.tipsy-inner { + padding: 5px 8px 4px 8px; + background-color: black; + color: white; + max-width: 200px; + text-align: center; } -span.tip { - display: none +.tipsy-north { + background-position: top center; } -.tooltip:hover span.tip { - font-size: 90%; - display: block; - position: absolute; - left:2em; - bottom:1.75em; - background-color: black; - color: white; - text-align: center; - padding: 0.25em 0.5em; +.tipsy-south { + background-position: bottom center; +} + +.tipsy-east { + background-position: right center; +} + +.tipsy-west { + background-position: left center; } .editable-text { diff -r b36c13131ac7 -r 185eab051284 static/june_2007_style/blue/autocomplete_tagging.css --- a/static/june_2007_style/blue/autocomplete_tagging.css Mon Feb 08 23:52:56 2010 -0500 +++ b/static/june_2007_style/blue/autocomplete_tagging.css Tue Feb 09 04:16:26 2010 -0500 @@ -10,9 +10,9 @@ .individual-tag-area{border:solid 1px #eee;cursor:pointer;} .active-tag-area{background-color:white;} .toggle-link{font-weight:normal;padding:0.3em;margin-bottom:1em;width:100%;padding:0.2em 0em 0.2em 0em;} -.tag-button{width:auto;color:#444;text-decoration:none;display:inline-block;cursor:pointer;margin:0.2em;border:0;padding:0.1em 0.5em 0.1em 0.5em;-moz-border-radius:.5em;-webkit-border-radius:.5em;border-radius:.5em;background:#bbb;} +.tag-button{width:auto;color:#444;text-decoration:none;display:inline-block;cursor:pointer;margin:0.2em;border:solid #bbb 1px;padding:0.1em 0.5em 0.1em 0.5em;-moz-border-radius:.5em;-webkit-border-radius:.5em;border-radius:.5em;background:#eee;} .tag-button img{padding-left:0.4em;} -.tag-button .tag-name:hover{color:white;} +.tag-button .tag-name:hover{color:black;} .add-tag-button{margin-bottom:0.3em;vertical-align:middle;padding:0.3em;} .add-tag-button:hover{cursor:pointer;} .tag-input{vertical-align:bottom;border:none;outline:none;resize:none;} diff -r b36c13131ac7 -r 185eab051284 static/june_2007_style/blue/base.css --- a/static/june_2007_style/blue/base.css Mon Feb 08 23:52:56 2010 -0500 +++ b/static/june_2007_style/blue/base.css Tue Feb 09 04:16:26 2010 -0500 @@ -110,17 +110,22 @@ .text-content fieldset{border-color:#ccc;border:1px solid #ccc;} .text-content th,.text-content td{border-bottom:1px solid #ddd;border-right:1px solid #ccc;} .text-content th,.text-content td{padding:.8em;} -.icon-button{width:16px;height:16px;display:block;float:left;margin-left:2px;text-indent:20px;} -.icon-button.edit{background:url(history-buttons.png) no-repeat 0px -52px;} -.icon-button.edit:hover{background:url(history-buttons.png) no-repeat 0px -78px;} +.icon-button{width:16px;height:16px;display:block;float:left;margin-left:2px;text-indent:20px;background-repeat:no-repeat;background-position:0px 0px;padding:0;} .icon-button.display{background:url(history-buttons.png) no-repeat 0px -0px;} .icon-button.display:hover{background:url(history-buttons.png) no-repeat 0px -26px;} -.icon-button.delete{background:url(history-buttons.png) no-repeat 0px -104px;} -.icon-button.delete:hover{background:url(history-buttons.png) no-repeat 0px -130px;} -.icon-button.tag{background-image:url(/static/images/tag-label.png);background-repeat:no-repeat;background-position:center;padding: 0px 0px 0px 0px;} -.icon-button.annotate{background-image:url(/static/images/sticky-note-text.png);background-repeat:no-repeat;background-position:center;padding: 0px 0px 0px 0px;} -.tooltip {position: relative; cursor: pointer} -span.tip{display: none;} -.tooltip:hover span.tip{font-size: 90%; display: block;position: absolute;left:3em;bottom:1.75em; background-color: black;color: white;text-align: center;padding: 0.25em 0.5em;} -.editable-text{cursor:pointer} -.editable-text:hover{background-image:url();background-repeat:no-repeat;background-position:right} \ No newline at end of file +.icon-button.delete{background:url(history-buttons.png) no-repeat 0px -52px;} +.icon-button.delete:hover{background:url(history-buttons.png) no-repeat 0px -78px;} +.icon-button.edit{background:url(history-buttons.png) no-repeat 0px -104px;} +.icon-button.edit:hover{background:url(history-buttons.png) no-repeat 0px -130px;} +.icon-button.tag{background-image:url(/static/images/tag-label.png);} +.icon-button.tags{background-image:url(/static/images/fugue/tags.png);} +.icon-button.tag--plus{background-image:url(/static/images/fugue/tag--plus.png);} +.icon-button.annotate{background-image:url(/static/images/sticky-note-text.png);background-repeat:no-repeat;background-position:center;padding:0;} +.tipsy{padding:5px;font-size:10px;filter:alpha(opacity=80);background-repeat:no-repeat;background-image:url(../images/tipsy.gif);} +.tipsy-inner{padding:5px 8px 4px 8px;background-color:black;color:white;max-width:200px;text-align:center;} +.tipsy-north{background-position:top center;} +.tipsy-south{background-position:bottom center;} +.tipsy-east{background-position:right center;} +.tipsy-west{background-position:left center;} +.editable-text{cursor:pointer;} +.editable-text:hover{background-image:url();background-repeat:no-repeat;background-position:right;} diff -r b36c13131ac7 -r 185eab051284 static/june_2007_style/blue/history-buttons.png Binary file static/june_2007_style/blue/history-buttons.png has changed diff -r b36c13131ac7 -r 185eab051284 static/scripts/galaxy.base.js --- a/static/scripts/galaxy.base.js Mon Feb 08 23:52:56 2010 -0500 +++ b/static/scripts/galaxy.base.js Tue Feb 09 04:16:26 2010 -0500 @@ -14,11 +14,15 @@ }); } -jQuery(document).ready( function() { +$(document).ready( function() { // Links with confirmation - jQuery( "a[confirm]" ).click( function() { - return confirm( jQuery(this).attr( "confirm" ) ) + $( "a[confirm]" ).click( function() { + return confirm( $(this).attr( "confirm" ) ) }); + // Tooltips + if ( $.fn.tipsy ) { + $(".tooltip").tipsy( { gravity: 's' } ); + } // Make popup menus. make_popup_menus(); }); diff -r b36c13131ac7 -r 185eab051284 static/scripts/jquery.tipsy.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/static/scripts/jquery.tipsy.js Tue Feb 09 04:16:26 2010 -0500 @@ -0,0 +1,161 @@ +(function($) { + function fixTitle($ele) { + if ($ele.attr('title') || typeof($ele.attr('original-title')) != 'string') { + $ele.attr('original-title', $ele.attr('title') || '').removeAttr('title'); + } + } + + $.fn.tipsy = function(options) { + + options = $.extend({}, $.fn.tipsy.defaults, options); + + return this.each(function() { + + fixTitle($(this)); + var opts = $.fn.tipsy.elementOptions(this, options); + var timeout = null; + + $(this).hover(function() { + var self = this; + timeout = setTimeout(function() { + $.data(self, 'cancel.tipsy', true); + + var tip = $.data(self, 'active.tipsy'); + if (!tip) { + tip = $('<div class="tipsy"><div class="tipsy-inner"/></div>'); + tip.css({position: 'absolute', zIndex: 100000}); + $.data(self, 'active.tipsy', tip); + } + + fixTitle($(self)); + + var title; + if (typeof opts.title == 'string') { + title = $(self).attr(opts.title == 'title' ? 'original-title' : opts.title); + } else if (typeof opts.title == 'function') { + title = opts.title.call(self); + } + + tip.find('.tipsy-inner')[opts.html ? 'html' : 'text'](title || opts.fallback); + + + var pos = $.extend({}, $(self).offset(), {width: self.offsetWidth, height: self.offsetHeight}); + tip.get(0).className = 'tipsy'; // reset classname in case of dynamic gravity + tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body); + + tip.css( { width: tip.width() + 1, height: tip.height() } ); + + var actualWidth = tip[0].offsetWidth, actualHeight = tip[0].offsetHeight; + var gravity = (typeof opts.gravity == 'function') ? opts.gravity.call(self) : opts.gravity; + + var top, left; + switch (gravity.charAt(0)) { + case 'n': + top = pos.top + pos.height; + left = pos.left + pos.width / 2 - actualWidth / 2; + tip.addClass('tipsy-north'); + break; + case 's': + top = pos.top - actualHeight; + left = pos.left + pos.width / 2 - actualWidth / 2; + tip.addClass('tipsy-south'); + break; + case 'e': + top = pos.top + pos.height / 2 - actualHeight / 2; + left = pos.left - actualWidth; + tip.addClass('tipsy-east'); + break; + case 'w': + top = pos.top + pos.height / 2 - actualHeight / 2; + left = pos.left + pos.width; + tip.addClass('tipsy-west'); + break; + } + // Shift if off screen + var window = $(window); + + top = Math.max( top, window.scrollTop() ); + top = Math.min( top, window.scrollTop() + window.height() - tip.outerHeight() ); + + var left_shift = 0; + if ( left < window.scrollLeft() ) { + left_shift = left - window.scrollLeft(); + } + var t = window.scrollLeft() + window.width() - tip.outerWidth(); + if ( left > t ) { + left_shift = left - t; + } + + left -= left_shift; + + tip.css( { left: left, top: top } ); + + // Shift background to center over element (not implemented for east/west) + switch (gravity.charAt(0)) { + case 'n': + tip.css( 'background-position', - ( 250 - tip.outerWidth() / 2 ) + left_shift + "px top" ); + break; + case 's': + tip.css( 'background-position', - ( 250 - tip.outerWidth() / 2 ) + left_shift + "px bottom" ); + break; + case 'e': + break; + case 'w': + break; + } + + if (opts.fade) { + tip.stop().css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: opts.opacity}); + } else { + tip.css({visibility: 'visible', opacity: opts.opacity}); + } + }, opts.delayIn); + + }, function() { + $.data(this, 'cancel.tipsy', false); + var self = this; + clearTimeout(timeout); + setTimeout(function() { + if ($.data(this, 'cancel.tipsy')) { return; } + var tip = $.data(self, 'active.tipsy'); + if (opts.fade) { + tip.stop().fadeOut(function() { $(this).remove(); }); + } else if (tip) { + tip.remove(); + } + }, opts.delayOut); + + }); + + }); + + }; + + // Overwrite this method to provide options on a per-element basis. + // For example, you could store the gravity in a 'tipsy-gravity' attribute: + // return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' }); + // (remember - do not modify 'options' in place!) + $.fn.tipsy.elementOptions = function(ele, options) { + return $.metadata ? $.extend({}, options, $(ele).metadata()) : options; + }; + + $.fn.tipsy.defaults = { + delayIn: 0, + delayOut: 100, + fade: false, + fallback: '', + gravity: 'n', + html: false, + opacity: 0.8, + title: 'title' + }; + + $.fn.tipsy.autoNS = function() { + return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n'; + }; + + $.fn.tipsy.autoWE = function() { + return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w'; + }; + +})(jQuery); diff -r b36c13131ac7 -r 185eab051284 static/scripts/packed/galaxy.base.js --- a/static/scripts/packed/galaxy.base.js Mon Feb 08 23:52:56 2010 -0500 +++ b/static/scripts/packed/galaxy.base.js Tue Feb 09 04:16:26 2010 -0500 @@ -1,1 +1,1 @@ -$.fn.makeAbsolute=function(a){return this.each(function(){var b=$(this);var c=b.position();b.css({position:"absolute",marginLeft:0,marginTop:0,top:c.top,left:c.left,right:$(window).width()-(c.left+b.width())});if(a){b.remove().appendTo("body")}})};jQuery(document).ready(function(){jQuery("a[confirm]").click(function(){return confirm(jQuery(this).attr("confirm"))});make_popup_menus()});function make_popup_menus(){jQuery("div[popupmenu]").each(function(){var c={};$(this).find("a").each(function(){var b=$(this).attr("confirm"),d=$(this).attr("href"),e=$(this).attr("target");c[$(this).text()]=function(){if(!b||confirm(b)){var g=window;if(e=="_parent"){g=window.parent}else{if(e=="_top"){g=window.top}}g.location=d}}});var a=$("#"+$(this).attr("popupmenu"));make_popupmenu(a,c);$(this).remove();a.addClass("popup").show()})}function ensure_popup_helper(){if($("#popup-helper").length==0){$("<div id='popup-helper'/>").css({background:"white",opacity:0,zIndex:15000,position:"absolute",t op:0,left:0,width:"100%",height:"100%"}).appendTo("body").hide()}}function make_popupmenu(d,c){ensure_popup_helper();var a=$(d);var b=$("<ul id='"+d.attr("id")+"-menu'></ul>");$.each(c,function(g,f){if(f){$("<li/>").html(g).click(f).appendTo(b)}else{$("<li class='head'/>").html(g).appendTo(b)}});var e=$("<div class='popmenu-wrapper'>");e.append(b).append("<div class='overlay-border'>").css("position","absolute").appendTo("body").hide();attach_popupmenu(d,e)}function attach_popupmenu(b,d){var a=function(){d.unbind().hide();$("#popup-helper").unbind("click.popupmenu").hide()};var c=function(g){var h=$(b).offset();$("#popup-helper").bind("click.popupmenu",a).show();d.click(a).css({left:0,top:-1000}).show();var f=g.pageX-d.width()/2;f=Math.min(f,$(document).scrollLeft()+$(window).width()-$(d).width()-20);f=Math.max(f,$(document).scrollLeft()+20);d.css({top:g.pageY-5,left:f});return false};$(b).click(c)}var array_length=function(a){if(a.length){return a.length}var b=0;for(element in a){b++}return b};var replace_dbkey_select=function(){var c=$("select[name=dbkey]");var d=c.attr("value");if(c.length!=0){var e=$("<input id='dbkey-input' type='text'></input>");e.attr("size",40);e.attr("name",c.attr("name"));e.click(function(){var g=$(this).attr("value");$(this).attr("value","Loading...");$(this).showAllInCache();$(this).attr("value",g);$(this).select()});var b=new Array();var a=new Object();c.children("option").each(function(){var h=$(this).text();var g=$(this).attr("value");if(g=="?"){return}b.push(h);a[h]=g;if(g==d){e.attr("value",h)}});if(e.attr("value")==""){e.attr("value","Click to Search or Select Build")}var f={selectFirst:false,autoFill:false,mustMatch:false,matchContains:true,max:1000,minChars:0,hideForLessThanMinChars:false};e.autocomplete(b,f);c.replaceWith(e);$("form").submit(function(){var i=$("#dbkey-input");if(i.length!=0){var h=i.attr("value");var g=a[h];if(g!=null&&g!=undefined){i.attr("value",g)}else{if(d!=""){i.attr("value",d)}else{i. attr("value","?")}}}})}};function async_save_text(d,f,e,a,c,h,i,g,b){if(c==null){c=30}if(i==null){i=4}$("#"+d).click(function(){var l=$("#"+f).text();if(h){var j=$("<textarea rows='"+i+"' cols='"+c+"'>"+l+"</textarea>")}else{var j=$("<input type='text' value='"+l+"' size='"+c+"'></input>")}j.blur(function(){$(this).remove();$("#"+f).show();if(m){k.addClass("tooltip")}if(b!=null){b(j)}});var m=$(this).hasClass("tooltip");var k=$(this);j.keyup(function(o){if(o.keyCode==27){$(this).trigger("blur")}else{if(o.keyCode==13){new_text=this.value;$(this).trigger("blur");var n=new Object();n[a]=new_text;$.ajax({url:e,data:n,error:function(){alert("Text editing for elt "+f+" failed")},success:function(p){$("#"+f).text(p);if(b!=null){b(j)}}})}}});if(g!=null){g(j)}$("#"+f).hide();j.insertAfter($("#"+f));j.focus();j.select();$(this).removeClass("tooltip");return false})}; \ No newline at end of file +$.fn.makeAbsolute=function(a){return this.each(function(){var b=$(this);var c=b.position();b.css({position:"absolute",marginLeft:0,marginTop:0,top:c.top,left:c.left,right:$(window).width()-(c.left+b.width())});if(a){b.remove().appendTo("body")}})};$(document).ready(function(){$("a[confirm]").click(function(){return confirm($(this).attr("confirm"))});if($.fn.tipsy){$(".tooltip").tipsy({gravity:"s"})}make_popup_menus()});function make_popup_menus(){jQuery("div[popupmenu]").each(function(){var c={};$(this).find("a").each(function(){var b=$(this).attr("confirm"),d=$(this).attr("href"),e=$(this).attr("target");c[$(this).text()]=function(){if(!b||confirm(b)){var g=window;if(e=="_parent"){g=window.parent}else{if(e=="_top"){g=window.top}}g.location=d}}});var a=$("#"+$(this).attr("popupmenu"));make_popupmenu(a,c);$(this).remove();a.addClass("popup").show()})}function ensure_popup_helper(){if($("#popup-helper").length==0){$("<div id='popup-helper'/>").css({background:"white",opacity:0 ,zIndex:15000,position:"absolute",top:0,left:0,width:"100%",height:"100%"}).appendTo("body").hide()}}function make_popupmenu(d,c){ensure_popup_helper();var a=$(d);var b=$("<ul id='"+d.attr("id")+"-menu'></ul>");$.each(c,function(g,f){if(f){$("<li/>").html(g).click(f).appendTo(b)}else{$("<li class='head'/>").html(g).appendTo(b)}});var e=$("<div class='popmenu-wrapper'>");e.append(b).append("<div class='overlay-border'>").css("position","absolute").appendTo("body").hide();attach_popupmenu(d,e)}function attach_popupmenu(b,d){var a=function(){d.unbind().hide();$("#popup-helper").unbind("click.popupmenu").hide()};var c=function(g){var h=$(b).offset();$("#popup-helper").bind("click.popupmenu",a).show();d.click(a).css({left:0,top:-1000}).show();var f=g.pageX-d.width()/2;f=Math.min(f,$(document).scrollLeft()+$(window).width()-$(d).width()-20);f=Math.max(f,$(document).scrollLeft()+20);d.css({top:g.pageY-5,left:f});return false};$(b).click(c)}var array_length=function(a){if(a.length){ return a.length}var b=0;for(element in a){b++}return b};var replace_dbkey_select=function(){var c=$("select[name=dbkey]");var d=c.attr("value");if(c.length!=0){var e=$("<input id='dbkey-input' type='text'></input>");e.attr("size",40);e.attr("name",c.attr("name"));e.click(function(){var g=$(this).attr("value");$(this).attr("value","Loading...");$(this).showAllInCache();$(this).attr("value",g);$(this).select()});var b=new Array();var a=new Object();c.children("option").each(function(){var h=$(this).text();var g=$(this).attr("value");if(g=="?"){return}b.push(h);a[h]=g;if(g==d){e.attr("value",h)}});if(e.attr("value")==""){e.attr("value","Click to Search or Select Build")}var f={selectFirst:false,autoFill:false,mustMatch:false,matchContains:true,max:1000,minChars:0,hideForLessThanMinChars:false};e.autocomplete(b,f);c.replaceWith(e);$("form").submit(function(){var i=$("#dbkey-input");if(i.length!=0){var h=i.attr("value");var g=a[h];if(g!=null&&g!=undefined){i.attr("value",g)}else{ if(d!=""){i.attr("value",d)}else{i.attr("value","?")}}}})}};function async_save_text(d,f,e,a,c,h,i,g,b){if(c==null){c=30}if(i==null){i=4}$("#"+d).click(function(){var l=$("#"+f).text();if(h){var j=$("<textarea rows='"+i+"' cols='"+c+"'>"+l+"</textarea>")}else{var j=$("<input type='text' value='"+l+"' size='"+c+"'></input>")}j.blur(function(){$(this).remove();$("#"+f).show();if(m){k.addClass("tooltip")}if(b!=null){b(j)}});var m=$(this).hasClass("tooltip");var k=$(this);j.keyup(function(o){if(o.keyCode==27){$(this).trigger("blur")}else{if(o.keyCode==13){new_text=this.value;$(this).trigger("blur");var n=new Object();n[a]=new_text;$.ajax({url:e,data:n,error:function(){alert("Text editing for elt "+f+" failed")},success:function(p){$("#"+f).text(p);if(b!=null){b(j)}}})}}});if(g!=null){g(j)}$("#"+f).hide();j.insertAfter($("#"+f));j.focus();j.select();$(this).removeClass("tooltip");return false})}; \ No newline at end of file diff -r b36c13131ac7 -r 185eab051284 static/scripts/packed/jquery.tipsy.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/static/scripts/packed/jquery.tipsy.js Tue Feb 09 04:16:26 2010 -0500 @@ -0,0 +1,1 @@ +(function(b){function a(c){if(c.attr("title")||typeof(c.attr("original-title"))!="string"){c.attr("original-title",c.attr("title")||"").removeAttr("title")}}b.fn.tipsy=function(c){c=b.extend({},b.fn.tipsy.defaults,c);return this.each(function(){a(b(this));var d=b.fn.tipsy.elementOptions(this,c);var e=null;b(this).hover(function(){var f=this;e=setTimeout(function(){b.data(f,"cancel.tipsy",true);var o=b.data(f,"active.tipsy");if(!o){o=b('<div class="tipsy"><div class="tipsy-inner"/></div>');o.css({position:"absolute",zIndex:100000});b.data(f,"active.tipsy",o)}a(b(f));var n;if(typeof d.title=="string"){n=b(f).attr(d.title=="title"?"original-title":d.title)}else{if(typeof d.title=="function"){n=d.title.call(f)}}o.find(".tipsy-inner")[d.html?"html":"text"](n||d.fallback);var l=b.extend({},b(f).offset(),{width:f.offsetWidth,height:f.offsetHeight});o.get(0).className="tipsy";o.remove().css({top:0,left:0,visibility:"hidden",display:"block"}).appendTo(document.body);o.css({width:o.wi dth()+1,height:o.height()});var h=o[0].offsetWidth,j=o[0].offsetHeight;var q=(typeof d.gravity=="function")?d.gravity.call(f):d.gravity;var m,i;switch(q.charAt(0)){case"n":m=l.top+l.height;i=l.left+l.width/2-h/2;o.addClass("tipsy-north");break;case"s":m=l.top-j;i=l.left+l.width/2-h/2;o.addClass("tipsy-south");break;case"e":m=l.top+l.height/2-j/2;i=l.left-h;o.addClass("tipsy-east");break;case"w":m=l.top+l.height/2-j/2;i=l.left+l.width;o.addClass("tipsy-west");break}var k=b(k);m=Math.max(m,k.scrollTop());m=Math.min(m,k.scrollTop()+k.height()-o.outerHeight());var g=0;if(i<k.scrollLeft()){g=i-k.scrollLeft()}var p=k.scrollLeft()+k.width()-o.outerWidth();if(i>p){g=i-p}i-=g;o.css({left:i,top:m});switch(q.charAt(0)){case"n":o.css("background-position",-(250-o.outerWidth()/2)+g+"px top");break;case"s":o.css("background-position",-(250-o.outerWidth()/2)+g+"px bottom");break;case"e":break;case"w":break}if(d.fade){o.stop().css({opacity:0,display:"block",visibility:"visible"}).animate({o pacity:d.opacity})}else{o.css({visibility:"visible",opacity:d.opacity})}},d.delayIn)},function(){b.data(this,"cancel.tipsy",false);var f=this;clearTimeout(e);setTimeout(function(){if(b.data(this,"cancel.tipsy")){return}var g=b.data(f,"active.tipsy");if(d.fade){g.stop().fadeOut(function(){b(this).remove()})}else{if(g){g.remove()}}},d.delayOut)})})};b.fn.tipsy.elementOptions=function(d,c){return b.metadata?b.extend({},c,b(d).metadata()):c};b.fn.tipsy.defaults={delayIn:0,delayOut:100,fade:false,fallback:"",gravity:"n",html:false,opacity:0.8,title:"title"};b.fn.tipsy.autoNS=function(){return b(this).offset().top>(b(document).scrollTop()+b(window).height()/2)?"s":"n"};b.fn.tipsy.autoWE=function(){return b(this).offset().left>(b(document).scrollLeft()+b(window).width()/2)?"e":"w"}})(jQuery); \ No newline at end of file diff -r b36c13131ac7 -r 185eab051284 templates/root/history.mako --- a/templates/root/history.mako Mon Feb 08 23:52:56 2010 -0500 +++ b/templates/root/history.mako Tue Feb 09 04:16:26 2010 -0500 @@ -15,7 +15,7 @@ <meta http-equiv="Pragma" content="no-cache"> ${h.css( "base", "history", "autocomplete_tagging" )} -${h.js( "galaxy.base", "jquery", "json2", "jquery.jstore-all", "jquery.autocomplete", "autocomplete_tagging" )} +${h.js( "jquery", "jquery.tipsy", "galaxy.base", "json2", "jquery.jstore-all", "jquery.autocomplete", "autocomplete_tagging" )} <script type="text/javascript"> $(function() { @@ -46,15 +46,25 @@ async_save_text("history-name-container", "history-name", "${h.url_for( controller="/history", action="rename_async", id=trans.security.encode_id(history.id) )}", "new_name", 18); // Tag management. + var historyTagArea = $('#history-tag-area'); $('#history-tag').click( function() { - $('#history-tag-area').toggle("fast"); + if ( historyTagArea.is( ":hidden" ) ) { + historyTagArea.slideDown("fast"); + } else { + historyTagArea.slideUp("fast"); + } return false; }); - // Annotation management. + // Annotation management. + var historyAnnotationArea = $('#history-annotation-area'); $('#history-annotate').click( function() { - $('#history-annotation-area').toggle("fast"); + if ( historyAnnotationArea.is( ":hidden" ) ) { + historyAnnotationArea.slideDown("fast"); + } else { + historyAnnotationArea.slideUp("fast"); + } return false; }); async_save_text("history-annotation-container", "history-annotation", "${h.url_for( controller="/history", action="annotate_async", id=trans.security.encode_id(history.id) )}", "new_annotation", 18, true, 4); @@ -281,15 +291,14 @@ <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td align="left"> - <div id="history-name-container" class="editable-text tooltip"> - <span id="history-name">${history.get_display_name() | h}</span> - <span class="tip">Click to edit</span></a> + <div id="history-name-container" class="editable-text"> + <span id="history-name" class="tooltip" title="Click to rename history">${history.get_display_name() | h}</span> </div> </td> <td align="right" style="width: 40px"> <div style="float: right; white-space: nowrap"> - <a id="history-tag" title="Tag" class="icon-button tag tooltip" target="galaxy_main" href="${h.url_for( controller='history', action='tag' )}"></a> - <a id="history-annotate" title="Annotate" class="icon-button annotate" target="galaxy_main" href="${h.url_for( controller='history', action='annotate' )}"></a> + <a id="history-tag" title="Edit history tags" class="icon-button tags tooltip" target="galaxy_main" href="${h.url_for( controller='history', action='tag' )}"></a> + <a id="history-annotate" title="Edit history annotation" class="icon-button annotate tooltip" target="galaxy_main" href="${h.url_for( controller='history', action='annotate' )}"></a> </div> </td> </tr> @@ -309,8 +318,8 @@ %if trans.get_user() is not None: <div style="margin: 0px 0px 5px 10px"> ## Tagging elt. - <div id="history-tag-area" class="form-row" style="display: none"> - <label>Tags:</label> + <div id="history-tag-area" style="display: none"> + <b>Tags:</b> <style> .tag-area { border: none; @@ -320,15 +329,10 @@ </div> ## Annotation elt. - <div id="history-annotation-area" class="form-row" style="display: none"> - <label>Annotation / Notes:</label> - <div id="history-annotation-container" class="tooltip"> - %if annotation: - <span id="history-annotation">${annotation | h}</span> - %else: - <span id="history-annotation">None</span> - %endif - <span class="tip">Click to edit annotation</span> + <div id="history-annotation-area" style="display: none"> + <b>Annotation / Notes:</b> + <div id="history-annotation-container"> + <span id="history-annotation" class="tooltip" title="Click to edit annotation">${annotation or 'None' | h}</span> </div> </div> diff -r b36c13131ac7 -r 185eab051284 templates/tagging_common.mako --- a/templates/tagging_common.mako Mon Feb 08 23:52:56 2010 -0500 +++ b/templates/tagging_common.mako Tue Feb 09 04:16:26 2010 -0500 @@ -37,7 +37,7 @@ %if use_toggle_link: <a class="toggle-link" href="#">${num_tags} Tag${iff( num_tags == 1, "", "s")}</a> %endif - <div class="tag-area tooltip + <div class="tag-area %if tag_type == 'individual': individual-tag-area %endif @@ -80,9 +80,8 @@ %endif ## Add "add tag" button. %if render_add_tag_button: - <img src='${h.url_for('/static/images/add_icon.png')}' rollover='${h.url_for('/static/images/add_icon_dark.png')}' class="add-tag-button"/> + <img src='${h.url_for('/static/images/fugue/tag--plus.png')}' class="add-tag-button tooltip" title="Add tags"/> %endif - <span class="tip">Click to edit tags</span> %endif </div> </div>