[galaxy-dev] [hg] galaxy 2604: Rework popup menu styles. Popups are now large...

24 Aug 2009

details:   http://www.bx.psu.edu/hg/galaxy/rev/abdb523727ed
changeset: 2604:abdb523727ed
user:      James Taylor <james@jamestaylor.org>
date:      Thu Aug 06 10:29:51 2009 -0400
description:
Rework popup menu styles. Popups are now larger, have borders, and have better highlight styles. The history options button is now a popup menu. (Also misc style fixes and improvements).

16 file(s) affected in this change:

lib/galaxy/web/controllers/history.py
static/june_2007_style/base.css.tmpl
static/june_2007_style/blue/base.css
static/june_2007_style/blue/history-buttons.png
static/june_2007_style/blue/history-states.png
static/june_2007_style/blue/library.css
static/june_2007_style/blue/panel_layout.css
static/june_2007_style/blue_colors.ini
static/june_2007_style/panel_layout.css.tmpl
static/scripts/galaxy.base.js
templates/base_panels.mako
templates/history/clone.mako
templates/history/grid.mako
templates/root/index.mako
templates/workflow/editor.mako
templates/workflow/list.mako

diffs (688 lines):

diff -r 542471b183d7 -r abdb523727ed lib/galaxy/web/controllers/history.py

--- a/lib/galaxy/web/controllers/history.py	Thu Aug 20 18:44:35 2009 -0400
+++ b/lib/galaxy/web/controllers/history.py	Thu Aug 06 10:29:51 2009 -0400
@@ -229,6 +229,7 @@
         # No message
         return None, None
     @web.expose
+    @web.require_login( "work with shared histories" )
     def list_shared( self, trans, **kwargs ):
         """List histories shared with current user by others"""
         msg = util.restore_text( kwargs.get( 'msg', '' ) )
@@ -617,6 +618,7 @@
         if send_to_err:
             msg += send_to_err
         return self.sharing( trans, histories=shared_histories, msg=msg )
+        
     @web.expose
     @web.require_login( "share histories with other users" )
     def sharing( self, trans, histories=[], id=None, **kwd ):
@@ -644,6 +646,7 @@
                 shared_msg = "History (%s) now shared with: %d users.  " % ( history.name, len( history.users_shared_with ) )
                 msg = '%s%s' % ( shared_msg, msg )
         return trans.fill_template( 'history/sharing.mako', histories=histories, msg=msg, messagetype='done' )
+
     @web.expose
     @web.require_login( "rename histories" )
     def rename( self, trans, id=None, name=None, **kwd ):
@@ -681,19 +684,26 @@
             else:
                 change_msg = change_msg + "<p>History: "+cur_names[i]+" does not appear to belong to you.</p>"
         return trans.show_message( "<p>%s" % change_msg, refresh_frames=['history'] )
+        
     @web.expose
     @web.require_login( "clone shared Galaxy history" )
-    def clone( self, trans, id, **kwd ):
+    def clone( self, trans, id=None, **kwd ):
         """Clone a list of histories"""
         params = util.Params( kwd )
-        ids = util.listify( id )
-        histories = []
-        for history_id in ids:
-            history = get_history( trans, history_id, check_ownership=False )
-            histories.append( history )
+        # If clone_choice was not specified, display form passing along id
+        # argument
         clone_choice = params.get( 'clone_choice', None )
         if not clone_choice:
-            return trans.fill_template( "/history/clone.mako", history=history )
+            return trans.fill_template( "/history/clone.mako", id_argument=id )
+        # Extract histories for id argument, defaulting to current
+        if id is None:
+            histories = [ trans.history ]
+        else:
+            ids = util.listify( id )
+            histories = []
+            for history_id in ids:
+                history = get_history( trans, history_id, check_ownership=False )
+                histories.append( history )
         user = trans.get_user()
         for history in histories:
             if history.user == user:
diff -r 542471b183d7 -r abdb523727ed static/june_2007_style/base.css.tmpl
--- a/static/june_2007_style/base.css.tmpl	Thu Aug 20 18:44:35 2009 -0400
+++ b/static/june_2007_style/base.css.tmpl	Thu Aug 06 10:29:51 2009 -0400
@@ -2,6 +2,19 @@
 body{font:13px/1.231 verdana,arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea,button{font:99% verdana,arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
 body{font-size:75%;}
 
+## Mixins
+.unselectable {
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+}
+
+.shadow {
+    -moz-box-shadow: 0 3px 30px black;
+    -webkit-box-shadow: 0 3px 30px black;
+}
+
+## Real styles
 body 
 {
     background: $base_bg_bottom;
@@ -48,7 +61,7 @@
   padding-left: 10px;
   padding-right: 10px;
   background: $form_title_bg_bottom;
-  background-image: url(form_title_bg.png);
+  ## background-image: url(form_title_bg.png);
   background-repeat: repeat-x;
   background-position: top;
   border-bottom: solid $form_border 1px;
@@ -524,10 +537,11 @@
 ## Button styles
 
 .action-button {
-    background: #eeeeee;
+    background: transparent;
+    line-height: 16px;
     color: #333;
     text-decoration: none;
-    font-size: 95%;
+    font-size: 100%;
     font-weight: bold;
     display: inline-block;
     cursor: pointer;
@@ -556,39 +570,139 @@
     background: #aaaaaa;
 }
 
-## Popup menu styles
+## A menu button is a button that has an attached popup menu
 
-div.popupmenu {
-    display: none;
-    background: #eeeeee;
-    color: #333;
-    font-size: 110%;
-    font-weight: bold;
-    font-style: normal;
-    white-space: nowrap;
-    position: absolute;
-    z-index: 20000;
-    border: solid #aaaaaa 1px;
-    padding: 3px 0;
+.menubutton {
+    display: inline-block;
+    cursor: pointer;
+    position: relative;
+    .unselectable;
+    
+    border: solid transparent 1px;
     -moz-border-radius: 0.5em;
     -webkit-border-radius: 0.5em;
     border-radius: 0.5em;
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
+    
+    padding: 3px 0.5em;
+    margin: -3px -0.5em;
+    padding-right: 1.5em;
+    
+    .label, .arrow {
+        position: relative;
+        display: block;
+    }
+    
+    .label {
+        border-right: none;
+    }
+    
+    .arrow {
+        padding-left: 2px;
+        width: 1em;
+        position: absolute;
+        top: 0;
+        right: 5px;
+        height: 100%;
+    }
+    
+    .arrow > span {
+        display: inline-block;
+        padding-top: 3px;
+    }
+    
 }
 
-div.popupmenu-item {
-    padding: 3px 1em;
-    cursor: pointer;
+.menubutton:hover {
+    border-color: #aaaaaa;
+    ## background: #eeeeee;
+    ## color: #333;
 }
 
-div.popupmenu-item:hover {
-    background: #aaaaaa;
+## A split menu button, the main button has an action, the arrow causes the
+## popup menu to appear
+
+.menubutton.split {
+    padding-right: 2em;
+    .arrow {
+        border-left: solid transparent 1px;
+    }
+}
+
+.menubutton.split:hover {
+    .arrow {
+        border-left: solid #aaaaaa 1px;
+    }
+}
+
+## Popup menu styles
+
+.overlay-border {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    padding: 1em;
+    margin: -1em;
+    background-color: rgba(0,0,0,0.5);
+    -moz-border-radius: 1em;
+    -webkit-border-radius: 1em;
+    z-index: -1;
+}
+
+div.popmenu-wrapper {
+
+    position: absolute;
+    top: 100%;
+    z-index: 20000;
+
+    ul {
+        
+        display: block;
+        margin: 0;
+        padding: 0;
+        
+        background: white;
+        color: #333;
+        font-weight: bold;    
+        font-style: normal;
+        white-space: nowrap;
+        border: solid #aaaaaa 1px;
+        padding: 3px 0;
+        -moz-border-radius: 0.5em;
+        -webkit-border-radius: 0.5em;
+        border-radius: 0.5em;
+        ## margin: -3px -0.5em;
+        ## min-width: 100%;
+        
+        .unselectable;
+        
+        li {
+            display: block;
+            padding: 3px 1em;
+            cursor: pointer;
+            border-top: solid transparent 1px;
+            border-bottom: solid transparent 1px;
+        }
+        
+        li.head {
+            color: #999;
+            font-style: italic;
+        }
+    }
+}
+
+div.popmenu-wrapper ul li:hover {
+    background: #EEEEFF;
+    border-color: #aaa;
+}
+
+div.popmenu-wrapper ul li.head:hover {
+    background: inherit;
+    border-color: transparent;
 }
 
 .popup-arrow {
-    font-size: 80%;
     cursor: pointer;
     text-decoration: none;
     color: #555;
@@ -632,7 +746,7 @@
 }
 .grid thead th {
     background: $table_header_bg;
-    background-image: url(form_title_bg.png);
+    ## background-image: url(form_title_bg.png);
     background-repeat: repeat-x;
     background-position: top;
     border-top: solid $table_border 1px;
@@ -648,4 +762,4 @@
 }
 .grid .current {
     background-color: #EEEEFF;
-}
\ No newline at end of file
+}
diff -r 542471b183d7 -r abdb523727ed static/june_2007_style/blue/base.css
--- a/static/june_2007_style/blue/base.css	Thu Aug 20 18:44:35 2009 -0400
+++ b/static/june_2007_style/blue/base.css	Thu Aug 06 10:29:51 2009 -0400
@@ -3,13 +3,15 @@
 table{font-size:inherit;font:100%;}
 pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
 body{font-size:75%;}
+.unselectable{user-select:none;-moz-user-select:none;-webkit-user-select:none;}
+.shadow{-moz-box-shadow:0 3px 30px black;-webkit-box-shadow:0 3px 30px black;}
 body{background:#FFFFFF;color:#303030;background-image:url(base_bg.png);background-repeat:repeat-x;background-position:top;margin:10px;}
 img{border:0;}
 a:link,a:visited,a:active{color:#303030;}
 h1,h2,h3,h4{color:#023858;}
 hr{border:none;height:0px;border-bottom:dotted #303030 1px;}
 div.toolForm{border:solid #d8b365 1px;}
-div.toolFormTitle{font-weight:bold;padding:5px;padding-left:10px;padding-right:10px;background:#d2c099;background-image:url(form_title_bg.png);background-repeat:repeat-x;background-position:top;border-bottom: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;}
 div.toolParamHelp a{color:#666;}
 div.toolFormBody{background:#FFFFFF;background-image:url(form_body_bg.png);background-repeat:repeat-x;background-position:top;padding:5px 0;}
@@ -20,7 +22,7 @@
 div.toolHelpBody{width:100%;overflow:auto;}
 div.titleRow{font-weight:bold;border-bottom:dotted gray 1px;margin-bottom:0.5em;padding-bottom:0.25em;}
 div.form{border:solid #d8b365 1px;}
-div.form-title{font-weight:bold;padding:5px 10px;background:#d2c099;background-image:url(form_title_bg.png);background-repeat:repeat-x;background-position:top;border-bottom:solid #d8b365 1px;}
+div.form-title{font-weight:bold;padding:5px 10px;background:#ebd9b2;background-image:url(form_title_bg.png);background-repeat:repeat-x;background-position:top;border-bottom:solid #d8b365 1px;}
 div.form-body{padding:5px 0;}
 div.form-row{padding:5px 10px;}
 div.form-title-row{padding:5px 10px;}
@@ -77,14 +79,28 @@
 .state-fg-ok{color:#66AA66;}
 .state-fg-running{color:#AAAA66;}
 .state-fg-error{color:#AA6666;}
-.action-button{background:#eeeeee;color:#333;text-decoration:none;font-size:95%;font-weight:bold;display:inline-block;cursor:pointer;padding:2px;border:solid #aaaaaa 1px;padding-right:0.5em;padding-left:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;border-radius:0.5em;user-select:none;-moz-user-select:none;-webkit-user-select:none;}
+.action-button{background:transparent;line-height:16px;color:#333;text-decoration:none;font-size:100%;font-weight:bold;display:inline-block;cursor:pointer;padding:2px;border:solid #aaaaaa 1px;padding-right:0.5em;padding-left:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;border-radius:0.5em;user-select:none;-moz-user-select:none;-webkit-user-select:none;}
 .action-button > *{vertical-align:middle;}
 .action-button:hover{color:black;background:#dddddd;}
 .action-button:active{color:white;background:#aaaaaa;}
-div.popupmenu{display:none;background:#eeeeee;color:#333;font-size:110%;font-weight:bold;font-style:normal;white-space:nowrap;position:absolute;z-index:20000;border:solid #aaaaaa 1px;padding:3px 0;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;border-radius:0.5em;user-select:none;-moz-user-select:none;-webkit-user-select:none;}
-div.popupmenu-item{padding:3px 1em;cursor:pointer;}
-div.popupmenu-item:hover{background:#aaaaaa;}
-.popup-arrow{font-size:80%;cursor:pointer;text-decoration:none;color:#555;}
+.menubutton{display:inline-block;cursor:pointer;position:relative;user-select:none;-moz-user-select:none;-webkit-user-select:none;border:solid transparent 1px;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;border-radius:0.5em;padding:3px 0.5em;margin:-3px -0.5em;padding-right:1.5em;}
+.menubutton .label,.menubutton .arrow{position:relative;display:block;}
+.menubutton .label{border-right:none;}
+.menubutton .arrow{padding-left:2px;width:1em;position:absolute;top:0;right:5px;height:100%;}
+.menubutton .arrow > span{display:inline-block;padding-top:3px;}
+.menubutton:hover{border-color:#aaaaaa;}
+.menubutton.split{padding-right:2em;}
+.menubutton.split .arrow{border-left:solid transparent 1px;}
+.menubutton.split:hover{}
+.menubutton.split:hover .arrow{border-left:solid #aaaaaa 1px;}
+.overlay-border{position:absolute;top:0;left:0;height:100%;width:100%;padding:1em;margin:-1em;background-color:rgba(0,0,0,0.5);-moz-border-radius:1em;-webkit-border-radius:1em;z-index:-1;}
+div.popmenu-wrapper{position:absolute;top:100%;z-index:20000;}
+div.popmenu-wrapper ul{display:block;margin:0;padding:0;background:white;color:#333;font-weight:bold;font-style:normal;white-space:nowrap;border:solid #aaaaaa 1px;padding:3px 0;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;border-radius:0.5em;user-select:none;-moz-user-select:none;-webkit-user-select:none;}
+div.popmenu-wrapper ul li{display:block;padding:3px 1em;cursor:pointer;border-top:solid transparent 1px;border-bottom:solid transparent 1px;}
+div.popmenu-wrapper ul li.head{color:#999;font-style:italic;}
+div.popmenu-wrapper ul li:hover{background:#EEEEFF;border-color:#aaa;}
+div.popmenu-wrapper ul li.head:hover{background:inherit;border-color:transparent;}
+.popup-arrow{cursor:pointer;text-decoration:none;color:#555;}
 .popup-arrow:hover{color:black;}
 div.permissionContainer{padding-left:20px;}
 .grid-header{padding-bottom:1em;}
@@ -93,6 +109,6 @@
 .grid{padding-top:1em;border-collapse:collapse;width:100%;}
 .grid tbody td{border-top:solid #DDDDDD 1px;border-bottom:solid #DDDDDD 1px;padding:0.5em 1em;}
 .grid tbody td:empty{padding:0;}
-.grid thead th{background:#ebd9b2;background-image:url(form_title_bg.png);background-repeat:repeat-x;background-position:top;border-top:solid #d8b365 1px;border-bottom:solid #d8b365 1px;padding:0.5em 1em;text-align:left;}
+.grid thead th{background:#ebd9b2;background-repeat:repeat-x;background-position:top;border-top:solid #d8b365 1px;border-bottom:solid #d8b365 1px;padding:0.5em 1em;text-align:left;}
 .grid tfoot td{background-color:#F8F8F8;border-top:solid #DDDDDD 1px;border-bottom:solid #DDDDDD 1px;padding:0.5em 1em;}
 .grid .current{background-color:#EEEEFF;}
diff -r 542471b183d7 -r abdb523727ed static/june_2007_style/blue/history-buttons.png
Binary file static/june_2007_style/blue/history-buttons.png has changed
diff -r 542471b183d7 -r abdb523727ed static/june_2007_style/blue/history-states.png
Binary file static/june_2007_style/blue/history-states.png has changed
diff -r 542471b183d7 -r abdb523727ed static/june_2007_style/blue/library.css
--- a/static/june_2007_style/blue/library.css	Thu Aug 20 18:44:35 2009 -0400
+++ b/static/june_2007_style/blue/library.css	Thu Aug 06 10:29:51 2009 -0400
@@ -1,4 +1,4 @@
-.libraryRow{background-color:#d2c099;}
+.libraryRow{background-color:#ebd9b2;}
 .datasetHighlighted{background-color:#C1C9E5;}
 .libraryItemDeleted-True{font-style:italic;}
 div.historyItemBody{padding:4px 4px 2px 4px;}
diff -r 542471b183d7 -r abdb523727ed static/june_2007_style/blue/panel_layout.css
--- a/static/june_2007_style/blue/panel_layout.css	Thu Aug 20 18:44:35 2009 -0400
+++ b/static/june_2007_style/blue/panel_layout.css	Thu Aug 06 10:29:51 2009 -0400
@@ -24,7 +24,7 @@
 .unified-panel-header-inner{padding-top:0.45em;}
 .menu-bg{background:#C1C9E5 url(menu_bg.png) top repeat-x;}
 div.unified-panel-body{position:absolute;top:2em;bottom:0;width:100%;margin-top:1px;}
-.panel-header-button{color:#333;text-decoration:none;display:inline-block;cursor:pointer;margin:-1px;padding:1px;border:0px;padding-right:0.5em;padding-left:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;border-radius:0.5em;background:transparent;}
+.panel-header-button{color:#333;text-decoration:none;display:inline-block;cursor:pointer;margin:-1px;padding:1px;padding-right:0.5em;padding-left:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;border-radius:0.5em;background:#bbb;}
 .panel-header-button:hover{color:black;background:#aaaaaa;}
 .panel-header-button:active{color:white;background:#aaaaaa;}
 #overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:20000;}
@@ -37,9 +37,8 @@
 .panel-done-message{background-image:url(done_small.png);background-color:#CCFFCC;}
 .panel-info-message{background-image:url(info_small.png);background-color:#CCCCFF;}
 #masthead{position:absolute;top:0;left:0;width:100%;height:32px;background:#2C3143;color:#fff;border-bottom:solid #444 1px;z-index:15000;padding:0;}
-#masthead a{color:#eeeeee;}
+#masthead a{color:#eeeeee;text-decoration:none;}
 #masthead .title{padding:3px 10px;font-size:175%;font-weight:bold;}
-#masthead a{text-decoration:none;}
 #masthead a:hover{text-decoration:underline;}
 .tab-group{margin:0;padding:0 10px;height:100%;white-space:nowrap;cursor:default;background:transparent;}
 .tab-group .tab{background:#2C3143;position:relative;float:left;margin:0;padding:0 1em;height:32px;line-height:32px;text-align:left;}
diff -r 542471b183d7 -r abdb523727ed static/june_2007_style/blue_colors.ini
--- a/static/june_2007_style/blue_colors.ini	Thu Aug 20 18:44:35 2009 -0400
+++ b/static/june_2007_style/blue_colors.ini	Thu Aug 06 10:29:51 2009 -0400
@@ -9,7 +9,7 @@
 #menu_bg_hatch=#AAAAFF
 # Forms
 form_title_bg_top=#ebd9b2
-form_title_bg_bottom=#d2c099
+form_title_bg_bottom=#ebd9b2
 form_title_bg_hatch=-
 form_border=#d8b365
 #form_body_bg=#FFFFFF
diff -r 542471b183d7 -r abdb523727ed static/june_2007_style/panel_layout.css.tmpl
--- a/static/june_2007_style/panel_layout.css.tmpl	Thu Aug 20 18:44:35 2009 -0400
+++ b/static/june_2007_style/panel_layout.css.tmpl	Thu Aug 06 10:29:51 2009 -0400
@@ -144,13 +144,12 @@
     display: inline-block;
     cursor: pointer;
     margin: -1px; padding: 1px;
-    border: 0px;
     padding-right: 0.5em;
     padding-left: 0.5em;
     -moz-border-radius: 0.5em;
     -webkit-border-radius: 0.5em;
     border-radius: 0.5em;
-    background: transparent;
+    background: #bbb;
 }
 
 .panel-header-button:hover {
@@ -230,8 +229,7 @@
 
 ## Masthead
 
-#masthead 
-{
+#masthead {
     position:absolute; 
     top:0; 
     left:0; 
@@ -242,27 +240,20 @@
     border-bottom: solid ${layout_masthead_border} 1px;
     z-index: 15000;
     padding: 0;
+
+    a {
+        color: ${masthead_link};
+        text-decoration: none;
+    }
+    
+    .title {
+        padding: 3px 10px;
+        font-size: 175%;
+        font-weight: bold;
+    }
 }
 
-#masthead a
-{
-    color: $masthead_link;
-}
-
-#masthead .title
-{
-    padding: 3px 10px;
-    font-size: 175%;
-    font-weight: bold;
-}
-
-#masthead a
-{
-    text-decoration: none;
-}
-
-#masthead a:hover
-{
+#masthead a:hover {
     text-decoration: underline;
 }
 
diff -r 542471b183d7 -r abdb523727ed static/scripts/galaxy.base.js
--- a/static/scripts/galaxy.base.js	Thu Aug 20 18:44:35 2009 -0400
+++ b/static/scripts/galaxy.base.js	Thu Aug 06 10:29:51 2009 -0400
@@ -54,30 +54,52 @@
 
 function make_popupmenu( button_element, options ) {
     ensure_popup_helper();
-    $(button_element).css( "position", "relative" );
-    var menu_element = $( "<div class='popupmenu' id='" + button_element.attr('id') + "-menu'></div>" )
-        .css( "position", "absolute" )
-        .appendTo( button_element );
+    var container_element = $(button_element);
+    // if ( container_element.parent().hasClass( "combo-button" ) ) {
+    //    container_element = container_element.parent();
+    // }
+    // ontainer_element).css( "position", "relative" );
+    var menu_element = $( "<ul id='" + button_element.attr('id') + "-menu'></div>" );
     $.each( options, function( k, v ) {
-        $( "<div class='popupmenu-item' />" ).html( k ).click( v ).appendTo( menu_element );
+        if ( v ) {
+            $( "<li/>" ).html( k ).click( v ).appendTo( menu_element );
+        } else {
+            $( "<li class='head'/>" ).html( k ).appendTo( menu_element );
+        }
     });
+    var wrapper = $( "<div class='popmenu-wrapper'>" );
+    wrapper.append( menu_element )
+           .append( "<div class='overlay-border'>" )
+           .css( "position", "absolute" )
+           .appendTo( "body" )
+           .hide();
+    attach_popupmenu( button_element, wrapper );
+};
+
+function attach_popupmenu( button_element, wrapper ) {
+    console.log( button_element, wrapper );
     var clean = function() {
-        $(menu_element).unbind().hide();
-        // $("#popup-helper").unbind().hide();
-        $(document).unbind( "click.popupmenu" ); 
+        wrapper.unbind().hide();
+        $("#popup-helper").unbind( "click.popupmenu" ).hide();
+        // $(document).unbind( "click.popupmenu" ); 
     };
     var click = function( e ) {
+        console.log( e );
         var o = $(button_element).offset();
-        // $("#popup-helper").mousedown( clean ).show();
-        $(document).bind( "click.popupmenu", clean );
+        $("#popup-helper").bind( "click.popupmenu", clean ).show();
+        // $(document).bind( "click.popupmenu", clean );
         // Show off screen to get size right
-        $( menu_element ).click( clean ).css( { left: 0, top: -1000 } ).show();
+        wrapper.click( clean ).css( { left: 0, top: -1000 } ).show();
         // console.log( e.pageX, $(document).scrollLeft() + $(window).width(), $(menu_element).width() );
-        // var x = Math.min( e.pageX - 2, $(document).scrollLeft() + $(window).width() - $(menu_element).width() - 5 );
+        var x = e.pageX - wrapper.width() / 2 
+        x = Math.min( x, $(document).scrollLeft() + $(window).width() - $(wrapper).width() - 20 );
+        x = Math.max( x, $(document).scrollLeft() + 20 );
         // console.log( e.pageX, $(document).scrollLeft() + $(window).width(), $(menu_element).width() );
-        $( menu_element ).css( {
-            top: 0, //e.pageY - 2,
-            left: 0 // x
+        
+        
+        wrapper.css( {
+            top: e.pageY - 5,
+            left: x
         } );
         return false;
     };
diff -r 542471b183d7 -r abdb523727ed templates/base_panels.mako
--- a/templates/base_panels.mako	Thu Aug 20 18:44:35 2009 -0400
+++ b/templates/base_panels.mako	Thu Aug 06 10:29:51 2009 -0400
@@ -20,7 +20,7 @@
 
 ## Default stylesheets
 <%def name="stylesheets()">
-    ${h.css('panel_layout')}
+    ${h.css('base','panel_layout')}
     <style type="text/css">
     #center {
         %if not self.has_left_panel:
@@ -50,7 +50,7 @@
 <%def name="late_javascripts()">
     ## Scripts can be loaded later since they progressively add features to
     ## the panels, but do not change layout
-    ${h.js( 'jquery', 'jquery.event.drag', 'jquery.event.hover', 'jquery.form', 'galaxy.panels' )}
+    ${h.js( 'jquery', 'jquery.event.drag', 'jquery.event.hover', 'jquery.form', 'galaxy.base', 'galaxy.panels' )}
     <script type="text/javascript">
         
     ensure_dd_helper();
diff -r 542471b183d7 -r abdb523727ed templates/history/clone.mako
--- a/templates/history/clone.mako	Thu Aug 20 18:44:35 2009 -0400
+++ b/templates/history/clone.mako	Thu Aug 06 10:29:51 2009 -0400
@@ -7,7 +7,9 @@
     <div class="toolFormBody">
         <form action="${h.url_for( controller='history', action='clone' )}" method="post" >
             <div class="form-row">
-                <input type="hidden" name="id" value="${trans.security.encode_id( history.id )}">
+                %if id_argument is not None:
+                  <input type="hidden" name="id" value="${trans.security.encode_id( id_argument )}">
+                %endif
                 You can clone the history such that the clone will include all items in the original
                 history, or you can eliminate the original history's deleted items from the clone.
             </div>
diff -r 542471b183d7 -r abdb523727ed templates/history/grid.mako
--- a/templates/history/grid.mako	Thu Aug 20 18:44:35 2009 -0400
+++ b/templates/history/grid.mako	Thu Aug 06 10:29:51 2009 -0400
@@ -153,16 +153,15 @@
                                 <%
                                     # Attach popup menu?
                                     if column.attach_popup and cellnum == 0:
-                                        extra = '<a id="grid-%d-popup" class="popup-arrow" style="display: none;">▼</a>' % i
+                                        extra = '<a id="grid-%d-popup" class="arrow" style="display: none;"><span>▼</span></a>' % i
                                     else:
                                         extra = ""
                                 %>
                                 %if href:                    
-                                    <td><a href="${href}">${v}</a> ${extra}</td>
+                                    <td><div class="menubutton split"><a class="label" href="${href}">${v}${extra}</a></td>
                                 %else:
                                     <td >${v}${extra}</td>
                                 %endif    
-                                </td>
                             %endfor
                         %endif
                     %endfor
diff -r 542471b183d7 -r abdb523727ed templates/root/index.mako
--- a/templates/root/index.mako	Thu Aug 20 18:44:35 2009 -0400
+++ b/templates/root/index.mako	Thu Aug 06 10:29:51 2009 -0400
@@ -1,4 +1,46 @@
 <%inherit file="/base_panels.mako"/>
+
+<%def name="late_javascripts()">
+    ${parent.late_javascripts()}
+    <script type="text/javascript">
+    $(function(){
+        $("#history-options-button").css( "position", "relative" );
+        make_popupmenu( $("#history-options-button"), {
+            "List your histories": null,
+            "Stored by you": function() {
+                galaxy_main.location = "${h.url_for( controller='history', action='list')}";
+            },
+            "Shared with you": function() {
+                galaxy_main.location = "${h.url_for( controller='history', action='list_shared')}";
+            },
+            "Current History": null,
+            "Create new": function() {
+                galaxy_history.location = "${h.url_for( controller='root', action='history_new' )}";
+            },
+            "Clone": function() {
+                galaxy_main.location = "${h.url_for( controller='history', action='clone')}";
+            },
+            "Manage sharing": function() {
+                galaxy_main.location = "${h.url_for( controller='history', action='share' )}";
+            },
+            "Extract workflow": function() {
+                galaxy_main.location = "${h.url_for( controller='workflow', action='build_from_current_history' )}";
+            },
+            "Dataset security": function() {
+                galaxy_main.location = "${h.url_for( controller='root', action='history_set_default_permissions' )}";
+            },
+            "Show deleted datasets": function() {
+                galaxy_history.location = "${h.url_for( controller='root', action='history', show_deleted=True)}";
+            },
+            "Delete": function() {
+                if ( confirm( "Really delete the current history?" ) ) {
+                    galaxy_main.location = "${h.url_for( controller='history', action='delete_current' )}";
+                }
+            }
+        });
+    });
+    </script>
+</%def>
 
 <%def name="init()">
 <%
@@ -48,7 +90,7 @@
     <div class="unified-panel-header" unselectable="on">
         <div class="unified-panel-header-inner">
             <div style="float: right">
-                <a class='panel-header-button' href="${h.url_for( controller='root', action='history_options' )}" target="galaxy_main"><span>${_('Options')}</span></a>
+                <a id="history-options-button" class='panel-header-button' href="${h.url_for( controller='root', action='history_options' )}" target="galaxy_main"><span>${_('Options')}<span>▼</span></span></a>
             </div>
             <div class="panel-header-text">${_('History')}</div>
         </div>
diff -r 542471b183d7 -r abdb523727ed templates/workflow/editor.mako
--- a/templates/workflow/editor.mako	Thu Aug 20 18:44:35 2009 -0400
+++ b/templates/workflow/editor.mako	Thu Aug 06 10:29:51 2009 -0400
@@ -677,9 +677,8 @@
 
     <div class="unified-panel-header" unselectable="on">
         <div class="unified-panel-header-inner" style="float: right">
-            <span class="panel-header-button-group">
             <a id="layout-button" class="panel-header-button">Layout</a>
-            </span>
+              
             <a id="save-button" class="panel-header-button">Save</a>
             <a id="close-button" class="panel-header-button">Close</a>
         </div>
diff -r 542471b183d7 -r abdb523727ed templates/workflow/list.mako
--- a/templates/workflow/list.mako	Thu Aug 20 18:44:35 2009 -0400
+++ b/templates/workflow/list.mako	Thu Aug 06 10:29:51 2009 -0400
@@ -37,8 +37,10 @@
         %for i, workflow in enumerate( workflows ):
             <tr>
                 <td>
+                    <div class="menubutton">
+                    <a id="wf-${i}-popup" class="arrow" style="display: none;"><span>▼</span></a>
                     ${workflow.name}
-                    <a id="wf-${i}-popup" class="popup-arrow" style="display: none;">▼</a>
+                    </div>
                 </td>
                 <td>${len(workflow.latest_workflow.steps)}</td>
                 ## <td>${str(workflow.update_time)[:19]}</td>

    

[galaxy-dev] [hg] galaxy 2604: Rework popup menu styles. Popups are now large...

Greg Von Kuster