[galaxy-dev] [hg] galaxy 2605: Fixing styles for history rename and share int...

24 Aug 2009

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() {

    

[galaxy-dev] [hg] galaxy 2605: Fixing styles for history rename and share int...

Greg Von Kuster