details: http://www.bx.psu.edu/hg/galaxy/rev/9e2ba4cf4494 changeset: 3339:9e2ba4cf4494 user: jeremy goecks <jeremy.goecks@emory.edu> date: Fri Feb 05 14:18:37 2010 -0500 description: UI improvements for history panel and tags: (1) added icons for tags, annotations; (2) added tooltips for editable text; (3) added tooltips for tags. diffstat: static/images/sticky-note-text.png | 0 static/images/tag-label.png | 0 static/june_2007_style/base.css.tmpl | 47 ++++++++++++++++++- static/june_2007_style/blue/base.css | 9 +++- static/scripts/galaxy.base.js | 13 +++- static/scripts/packed/galaxy.base.js | 2 +- templates/root/history.mako | 88 ++++++++++++++++++++-------------- templates/tagging_common.mako | 23 +++++--- 8 files changed, 129 insertions(+), 53 deletions(-) diffs (266 lines): diff -r 7163a2128267 -r 9e2ba4cf4494 static/images/sticky-note-text.png Binary file static/images/sticky-note-text.png has changed diff -r 7163a2128267 -r 9e2ba4cf4494 static/images/tag-label.png Binary file static/images/tag-label.png has changed diff -r 7163a2128267 -r 9e2ba4cf4494 static/june_2007_style/base.css.tmpl --- a/static/june_2007_style/base.css.tmpl Fri Feb 05 11:53:06 2010 -0500 +++ b/static/june_2007_style/base.css.tmpl Fri Feb 05 14:18:37 2010 -0500 @@ -697,4 +697,49 @@ .icon-button.edit:hover { -sprite-group: history-buttons; -sprite-image: pencil_icon_dark.png; -} \ No newline at end of file +} + +.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; +} + +.tooltip span.tip { + display: none +} + +.tooltip:hover span.tip { + font-size: 90%; + display: block; + position: absolute; + right:2em;top:-1.75em; + width: inherit; + 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; +} diff -r 7163a2128267 -r 9e2ba4cf4494 static/june_2007_style/blue/base.css --- a/static/june_2007_style/blue/base.css Fri Feb 05 11:53:06 2010 -0500 +++ b/static/june_2007_style/blue/base.css Fri Feb 05 14:18:37 2010 -0500 @@ -116,4 +116,11 @@ .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;} \ No newline at end of file +.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} +.tooltip span.tip{display: none;} +.tooltip:hover span.tip{font-size: 90%; display: block;position: absolute;right:2em;top:-1.75em; width: inherit; 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 diff -r 7163a2128267 -r 9e2ba4cf4494 static/scripts/galaxy.base.js --- a/static/scripts/galaxy.base.js Fri Feb 05 11:53:06 2010 -0500 +++ b/static/scripts/galaxy.base.js Fri Feb 05 14:18:37 2010 -0500 @@ -211,14 +211,21 @@ // // Edit and save text asynchronously. // -function async_save_text(click_to_edit_elt, text_elt_id, save_url, text_parm_name, use_textarea, num_rows, on_start, on_finish) +function async_save_text(click_to_edit_elt, text_elt_id, save_url, text_parm_name, num_cols, use_textarea, num_rows, on_start, on_finish) { + // Set defaults if necessary. + if (num_cols == null) + num_cols = 30; + if (num_rows == null) + num_rows = 4 + + // Set up input element. $("#" + click_to_edit_elt).click( function() { var old_text = $("#" + text_elt_id).text() if (use_textarea) - var t = $("<textarea rows='" + num_rows + "'>" + old_text + "</textarea>" ); + var t = $("<textarea rows='" + num_rows + "' cols='" + num_cols + "'>" + old_text + "</textarea>" ); else - var t = $("<input type='text' value='" + old_text + "'></input>" ); + var t = $("<input type='text' value='" + old_text + "' size='" + num_cols + "'></input>" ); t.blur( function() { $(this).remove(); $("#" + text_elt_id).show(); diff -r 7163a2128267 -r 9e2ba4cf4494 static/scripts/packed/galaxy.base.js --- a/static/scripts/packed/galaxy.base.js Fri Feb 05 11:53:06 2010 -0500 +++ b/static/scripts/packed/galaxy.base.js Fri Feb 05 14:18:37 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,c,a,e,f,b){$("#"+d).click(function(){var h=$("#"+c).text();if(f){var g=$("<textarea rows='"+b+"'>"+h+"</textarea>")}else{var g=$("<input type='text' value='"+h+"'></input>")}g.blur(function(){$(this).remove();$("#"+c).show()});g.keyup(function(j){if(j.keyCode==27){$(this).trigger("blur")}else{if(j.keyCode==13){new_text=this.value;$(this).trigger("blur");var i=new Object();i[e]=new_text;$.ajax({url:a,data:i,error:function(){alert("Text editing for elt "+c+" failed")},success:function(){$("#"+c).text(new_text)}})}}});$("#"+c).hide();g.insertAfter($("#"+c));g.focus();g.select();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")}})};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 k=$("#"+f).text();if(h){var j=$("<textarea rows='"+i+"' cols='"+c+"'>"+k+"</textarea>")}else{var j=$("<input type='text' value='"+k+"' size='"+c+"'></input>")}j.blur(function(){$(this).remove();$("#"+f).show();if(b!=null){b(j)}});j.keyup(function(m){if(m.keyCode==27){$(this).trigger("blur")}else{if(m.keyCode==13){new_text=this.value;$(this).trigger("blur");var l=new Object();l[a]=new_text;$.ajax({url:e,data:l,error:function(){alert("Text editing for elt "+f+" failed")},success:function(){$("#"+f).text(new_text);if(b!=null){b(j)}}})}}});if(g!=null){g(j)}$("#"+f).hide();j.insertAfter($("#"+f));j.focus();j.select();return false})}; \ No newline at end of file diff -r 7163a2128267 -r 9e2ba4cf4494 templates/root/history.mako --- a/templates/root/history.mako Fri Feb 05 11:53:06 2010 -0500 +++ b/templates/root/history.mako Fri Feb 05 14:18:37 2010 -0500 @@ -42,19 +42,22 @@ $.jStore.remove("history_expand_state"); })); - // Rename async. - async_save_text("history-rename", "history-name", "${h.url_for( controller="/history", action="rename_async", id=trans.security.encode_id(history.id) )}", "new_name"); + // Rename management. + async_save_text("history-name", "history-name", "${h.url_for( controller="/history", action="rename_async", id=trans.security.encode_id(history.id) )}", "new_name", 18); - // Annotation async. - // Tag async. Simply have the workflow tag element generate a click on the tag element to activate tagging. - $('#workflow-tag').click( function() + // Tag management. + $('#history-tag').click( function() { - $('.tag-area').click(); + $('#history-tag-area').toggle("fast"); return false; }); - - // Annotate async. - async_save_text("history-annotate", "history-annotation", "${h.url_for( controller="/history", action="annotate_async", id=trans.security.encode_id(history.id) )}", "new_annotation", true, 4); + + // Annotation management. + $('#history-annotate').click( function() { + $('#history-annotation-area').toggle("fast"); + return false; + }); + async_save_text("history-annotation", "history-annotation", "${h.url_for( controller="/history", action="annotate_async", id=trans.security.encode_id(history.id) )}", "new_annotation", 18, true, 4); // Updater updater({ @@ -273,10 +276,24 @@ | <a href="${h.url_for('history', show_deleted=False)}">${_('hide deleted')}</a> %endif </div> - + <div id="history-name-area" class="historyLinks" style="color: gray; font-weight: bold;"> - <div style="float: right"><a id="history-rename" title="Rename" class="icon-button edit" target="galaxy_main" href="${h.url_for( controller='history', action='rename' )}"></a></div> - <div id="history-name">${history.get_display_name() | h}</div> + <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> + </td> + <td align="right"> + <div style="float: right"> + <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> + </div> + </td> + </tr> + </table> </div> %if history.deleted: @@ -291,33 +308,30 @@ %if trans.get_user() is not None: <div style="margin: 0px 0px 5px 10px"> - <a href="#" onclick="$('#tags-and-annotation').toggle('fast')">Edit Tags and Annotation/Notes</a> - <div id="tags-and-annotation" style="display: none"> - ## Tagging elt. - <div class="form-row"> - <label>Tags:</label> - <div style="float: right"><a id="workflow-tag" title="Tag" class="icon-button edit" target="galaxy_main" href="${h.url_for( controller='workflow', action='annotate_async' )}"></a></div> - <style> - .tag-area { - border: none; - } - </style> - ${render_individual_tagging_element(user=trans.get_user(), tagged_item=history, elt_context="history.mako", use_toggle_link=False, input_size="20", render_add_tag_button=False)} - <div style="clear: both"></div> - </div> - - ## Annotation elt. - <div id="history-annotation-area" class="form-row"> - <label>Annotation / Notes:</label> - <div style="float: right"><a id="history-annotate" title="Annotate" class="icon-button edit" target="galaxy_main" href="${h.url_for( controller='history', action='annotate_async' )}"></a></div> - %if annotation: - <div id="history-annotation">${annotation | h}</div> - %else: - <div id="history-annotation"></div> - %endif - <div style="clear: both"></div> + ## Tagging elt. + <div id="history-tag-area" class="form-row" style="display: none"> + <label>Tags:</label> + <style> + .tag-area { + border: none; + } + </style> + ${render_individual_tagging_element(user=trans.get_user(), tagged_item=history, elt_context="history.mako", use_toggle_link=False, input_size="20")} + </div> + + ## Annotation elt. + <div id="history-annotation-area" class="form-row" style="display: none"> + <label>Annotation / Notes:</label> + <div 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> </div> + </div> %endif diff -r 7163a2128267 -r 9e2ba4cf4494 templates/tagging_common.mako --- a/templates/tagging_common.mako Fri Feb 05 11:53:06 2010 -0500 +++ b/templates/tagging_common.mako Fri Feb 05 14:18:37 2010 -0500 @@ -72,17 +72,20 @@ %endfor ## Add tag input field. If element is in form, tag input is a textarea; otherwise element is a input type=text. - %if editable: - %if in_form: - <textarea class="tag-input" rows='1' cols='${input_size}'></textarea> - %else: - <input class="tag-input" type='text' size='${input_size}'/> + <div class="tooltip"> + %if editable: + %if in_form: + <textarea class="tag-input" rows='1' cols='${input_size}'></textarea> + %else: + <input class="tag-input" type='text' size='${input_size}'/> + %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"/> + %endif %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"/> - %endif - %endif + <span class="tip">Click to add tags</span> + </div> </div> </div> </%def>