details: http://www.bx.psu.edu/hg/galaxy/rev/fbad627b45ac changeset: 2605:fbad627b45ac user: James Taylor <james@jamestaylor.org> date: Sat Aug 22 23:18:47 2009 -0400 description: Fixing styles for history rename and share interfaces 6 file(s) affected in this change: static/june_2007_style/base.css.tmpl static/june_2007_style/blue/base.css static/scripts/packed/galaxy.base.js templates/history/rename.mako templates/history/share.mako templates/root/index.mako diffs (390 lines): diff -r abdb523727ed -r fbad627b45ac static/june_2007_style/base.css.tmpl --- a/static/june_2007_style/base.css.tmpl Thu Aug 06 10:29:51 2009 -0400 +++ b/static/june_2007_style/base.css.tmpl Sat Aug 22 23:18:47 2009 -0400 @@ -3,6 +3,7 @@ body{font-size:75%;} ## Mixins + .unselectable { user-select: none; -moz-user-select: none; @@ -15,8 +16,8 @@ } ## Real styles -body -{ + +body { background: $base_bg_bottom; color: $base_text; background-image: url(base_bg.png); @@ -25,60 +26,55 @@ margin: 10px; } -img -{ +img { border: 0; } -a:link, a:visited, a:active -{ +a:link, a:visited, a:active { color: $link_text; } -h1, h2, h3, h4 -{ +h1, h2, h3, h4 { color: $header_text; /*text-shadow: #bbb 2px 2px 1px;*/ } -hr -{ +hr { border: none; height: 0px; border-bottom: dotted $base_text 1px; } -div.toolForm -{ - border: solid $form_border 1px; +th { + text-align: left; } -div.toolFormTitle -{ - font-weight: bold; - padding: 5px; - padding-left: 10px; - padding-right: 10px; - background: $form_title_bg_bottom; - ## background-image: url(form_title_bg.png); - background-repeat: repeat-x; - background-position: top; - border-bottom: solid $form_border 1px; +div.toolForm { + border: solid $form_border 1px; } -div.toolParamHelp -{ - color: #666; +div.toolFormTitle { + font-weight: bold; + padding: 5px; + padding-left: 10px; + padding-right: 10px; + background: $form_title_bg_bottom; + ## background-image: url(form_title_bg.png); + background-repeat: repeat-x; + background-position: top; + border-bottom: solid $form_border 1px; } -div.toolParamHelp a -{ - color: #666; +div.toolParamHelp { + color: #666; } -div.toolFormBody -{ +div.toolParamHelp a { + color: #666; +} + +div.toolFormBody { background: $form_body_bg_bottom; background-image: url(form_body_bg.png); background-repeat: repeat-x; @@ -86,8 +82,7 @@ padding: 5px 0; } -div.toolFormBody div.toolFormTitle -{ +div.toolFormBody div.toolFormTitle { background: transparent; border: none; font-weight: bold; @@ -104,12 +99,10 @@ border-color: ${layout_border}; } -div.toolHelp -{ +div.toolHelp { } -div.toolHelpBody -{ +div.toolHelpBody { width: 100%; overflow: auto; } @@ -121,15 +114,13 @@ padding-bottom: 0.25em; } -/* Forms */ +## Forms -div.form -{ +div.form { border: solid $form_border 1px; } -div.form-title -{ +div.form-title { font-weight: bold; padding: 5px 10px; background: $form_title_bg_bottom; @@ -139,53 +130,44 @@ border-bottom: solid $form_border 1px; } -div.form-body -{ +div.form-body { padding: 5px 0; } -div.form-row -{ +div.form-row { padding: 5px 10px; } -div.form-title-row -{ +div.form-title-row { padding: 5px 10px; } -div.repeat-group-item -{ +div.repeat-group-item { border-left: solid $form_border 5px; margin-left: 10px; margin-bottom: 10px; } -div.form-row-error -{ +div.form-row-error { background: $error_message_bg; } -div.form-row label -{ +div.form-row label { font-weight: bold; display: block; margin-bottom: .2em; } -div.form-row-input -{ +div.form-row-input { float: left; width: 300px; } -div.form-row-input > input -{ +div.form-row-input > input { max-width: 300px; } -div.form-row-error-message -{ +div.form-row-error-message { width: 300px; float: left; color: red; @@ -193,19 +175,17 @@ padding: 3px 0 0 1em; } -select, input, textarea -{ +select, input, textarea { font: inherit; font-size: 115%; } -select, textarea, input[type="text"], input[type="file"], input[type="password"] -{ +select, textarea, input[type="text"], input[type="file"], input[type="password"] { -webkit-box-sizing: border-box; max-width: 300px; } -/* Messages */ +## Messages .errormessage, .warningmessage, .donemessage, .infomessage, .welcomeBlue, .welcomeRed , .screencastBox, .yellowbox, .redbox, .bluebox, .greenbox { diff -r abdb523727ed -r fbad627b45ac static/june_2007_style/blue/base.css --- a/static/june_2007_style/blue/base.css Thu Aug 06 10:29:51 2009 -0400 +++ b/static/june_2007_style/blue/base.css Sat Aug 22 23:18:47 2009 -0400 @@ -10,6 +10,7 @@ a:link,a:visited,a:active{color:#303030;} h1,h2,h3,h4{color:#023858;} hr{border:none;height:0px;border-bottom:dotted #303030 1px;} +th{text-align:left;} div.toolForm{border:solid #d8b365 1px;} div.toolFormTitle{font-weight:bold;padding:5px;padding-left:10px;padding-right:10px;background:#ebd9b2;background-repeat:repeat-x;background-position:top;border-bottom:solid #d8b365 1px;} div.toolParamHelp{color:#666;} diff -r abdb523727ed -r fbad627b45ac static/scripts/packed/galaxy.base.js --- a/static/scripts/packed/galaxy.base.js Thu Aug 06 10:29:51 2009 -0400 +++ b/static/scripts/packed/galaxy.base.js Sat Aug 22 23:18:47 2009 -0400 @@ -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"))});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}g.location=d}}});var a=$("#"+$(this).attr("popupmenu"));make_popupmenu(a,c);$(this).remove();a.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,b){ens ure_popup_helper();$(d).css("position","relative");var a=$("<div class='popupmenu' id='"+d.attr("id")+"-menu'></div>").css("position","absolute").appendTo(d);$.each(b,function(g,f){$("<div class='popupmenu-item' />").html(g).click(f).appendTo(a)});var c=function(){$(a).unbind().hide();$(document).unbind("click.popupmenu")};var e=function(f){var g=$(d).offset();$(document).bind("click.popupmenu",c);$(a).click(c).css({left:0,top:-1000}).show();$(a).css({top:0,left:0});return false};$(d).click(e)}; \ 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"))});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}g.location=d}}});var a=$("#"+$(this).attr("popupmenu"));make_popupmenu(a,c);$(this).remove();a.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){ens ure_popup_helper();var a=$(d);var b=$("<ul id='"+d.attr("id")+"-menu'></div>");$.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){console.log(b,d);var a=function(){d.unbind().hide();$("#popup-helper").unbind("click.popupmenu").hide()};var c=function(g){console.log(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)}; \ No newline at end of file diff -r abdb523727ed -r fbad627b45ac templates/history/rename.mako --- a/templates/history/rename.mako Thu Aug 06 10:29:51 2009 -0400 +++ b/templates/history/rename.mako Sat Aug 22 23:18:47 2009 -0400 @@ -3,39 +3,37 @@ <%def name="title()">${_('Rename History')}</%def> <div class="toolForm"> - <div class="toolFormTitle">${_('Rename History')}</div> + <div class="toolFormTitle">${_('Rename')}</div> <div class="toolFormBody"> <form action="${h.url_for( controller='history', action='rename' )}" method="post" > - <table class="grid"> + <div class="form-row"> + <table> + <thead> + <tr> + <th>${_('Current Name')}</th> + <th>${_('New Name')}</th> + </tr> + </thead> + <tbody> %for history in histories: <tr> <td> - <div class="form-row"> - <input type="hidden" name="id" value="${trans.security.encode_id( history.id )}"> - <label>${_('Current Name')}</label> - <div style="float: left; width: 250px; margin-right: 10px;"> - ${history.name} - </div> - </div> + <input type="hidden" name="id" value="${trans.security.encode_id( history.id )}"> + ${history.name} </td> <td> - <div class="form-row"> - <label>${_('New Name')}</label> - <div style="float: left; width: 250px; margin-right: 10px;"> - <input type="text" name="name" value="${history.name}" size="40"> - </div> - </div> + <input type="text" name="name" value="${history.name}" size="40"> </td> </tr> %endfor + </tbody> <tr> <td colspan="2"> - <div class="form-row"> - <input type="submit" name="history_rename_btn" value="${_('Rename Histories')}"> - </div> + <input type="submit" name="history_rename_btn" value="${_('Rename Histories')}"> </td> </tr> </table> + </div> </form> </div> </div> diff -r abdb523727ed -r fbad627b45ac templates/history/share.mako --- a/templates/history/share.mako Thu Aug 06 10:29:51 2009 -0400 +++ b/templates/history/share.mako Sat Aug 22 23:18:47 2009 -0400 @@ -8,32 +8,32 @@ %if not can_change and not cannot_change and not no_change_needed: ## We are sharing histories that contain only public datasets <form name='share' id='share' action="${h.url_for( controller="history", action='share' )}" method="post" > - %for history in histories: - <input type="hidden" name="id" value="${trans.security.encode_id( history.id )}"> - <div class="toolForm"> - <div class="form-row"> - <label>${_('History Name:')}</label> - <div style="float: left; width: 250px; margin-right: 10px;"> - ${history.name} - </div> - </div> - <div style="clear: both"></div> - <div class="form-row"> - <label>${_('Number of Datasets:')}</label> - <div style="float: left; width: 250px; margin-right: 10px;"> - %if len( history.datasets ) < 1: - <div class="warningmark">${_('This history contains no data.')}</div> - %else: - ${len(history.datasets)} - %endif - </td> - </div> - </div> - <div style="clear: both"></div> - <p/> - </div> - %endfor - <p/> + <div class="form-title-row"><b>Histories to be shared:</b></div> + <div class="form-row" style="padding-left: 2em;"> + <table width="100%"> + <thead> + <th>${_('History Name')}</th> + <th>${_('Number of Datasets')}</th> + </thead> + <tbody> + %for history in histories: + <tr> + <td> + <input type="hidden" name="id" value="${trans.security.encode_id( history.id )}"> + ${history.name} + </td> + <td> + %if len( history.datasets ) < 1: + <div class="warningmark">${_('This history contains no data.')}</div> + %else: + ${len(history.datasets)} + %endif + </td> + </tr> + %endfor + </tbody> + </table> + </div> <div style="clear: both"></div> <div class="form-row"> <label>Galaxy user emails with which to share histories</label> diff -r abdb523727ed -r fbad627b45ac templates/root/index.mako --- a/templates/root/index.mako Thu Aug 06 10:29:51 2009 -0400 +++ b/templates/root/index.mako Sat Aug 22 23:18:47 2009 -0400 @@ -20,7 +20,7 @@ "Clone": function() { galaxy_main.location = "${h.url_for( controller='history', action='clone')}"; }, - "Manage sharing": function() { + "Share": function() { galaxy_main.location = "${h.url_for( controller='history', action='share' )}"; }, "Extract workflow": function() {