details: http://www.bx.psu.edu/hg/galaxy/rev/ef075ec1445a changeset: 3175:ef075ec1445a user: James Taylor <james@jamestaylor.org> date: Mon Dec 14 12:17:01 2009 -0500 description: Fix various popup button issues. When there is no popup, button will be correctly sized (no extra space on right). When there is only a popup, entire button area is clickable. Combo buttons are mostly unchanged except that the popup click area is larger (anything to the right of the separator bar. An image is used so the arrow has a consistent shape and size across browsers. diffstat: static/images/ddarrowsplit.png | static/june_2007_style/base.css.tmpl | 37 ++++-------------- static/june_2007_style/blue/base.css | 14 ++---- static/june_2007_style/blue/panel_layout.css | 5 +- static/june_2007_style/panel_layout.css.tmpl | 9 +++- static/scripts/galaxy.base.js | 2 +- templates/grid_base.mako | 11 ++--- templates/root/index.mako | 2 +- templates/workflow/list.mako | 6 +-- 9 files changed, 33 insertions(+), 53 deletions(-) diffs (212 lines): diff -r 4b0e9e727dbf -r ef075ec1445a static/images/ddarrowsplit.png Binary file static/images/ddarrowsplit.png has changed diff -r 4b0e9e727dbf -r ef075ec1445a static/june_2007_style/base.css.tmpl --- a/static/june_2007_style/base.css.tmpl Mon Dec 14 10:33:39 2009 -0500 +++ b/static/june_2007_style/base.css.tmpl Mon Dec 14 12:17:01 2009 -0500 @@ -451,31 +451,17 @@ padding: 3px 0.5em; margin: -3px -0.5em; - padding-right: 1.5em; - .label, .arrow { + .label { 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; - } - +} + +.menubutton.popup { + padding-right: 1.5em; + background: url(../images/dropdownarrow.png) no-repeat right 8px; } .menubutton:hover { @@ -487,17 +473,12 @@ ## A split menu button, the main button has an action, the arrow causes the ## popup menu to appear -.menubutton.split { +.menubutton.popup.split { padding-right: 2em; - .arrow { - border-left: solid transparent 1px; - } } -.menubutton.split:hover { - .arrow { - border-left: solid #aaaaaa 1px; - } +.menubutton.popup.split:hover { + background: url(../images/ddarrowsplit.png) no-repeat right -38px; } ## Popup menu styles diff -r 4b0e9e727dbf -r ef075ec1445a static/june_2007_style/blue/base.css --- a/static/june_2007_style/blue/base.css Mon Dec 14 10:33:39 2009 -0500 +++ b/static/june_2007_style/blue/base.css Mon Dec 14 12:17:01 2009 -0500 @@ -77,16 +77,12 @@ .action-button > *{vertical-align:middle;} .action-button:hover{color:black;background:#dddddd;} .action-button:active{color:white;background:#aaaaaa;} -.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{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;} +.menubutton .label{position:relative;display:block;border-right:none;} +.menubutton.popup{padding-right:1.5em;background:url(../images/dropdownarrow.png) no-repeat right 8px;} .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;} +.menubutton.popup.split{padding-right:2em;} +.menubutton.popup.split:hover{background:url(../images/ddarrowsplit.png) no-repeat right -38px;} .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;} diff -r 4b0e9e727dbf -r ef075ec1445a static/june_2007_style/blue/panel_layout.css --- a/static/june_2007_style/blue/panel_layout.css Mon Dec 14 10:33:39 2009 -0500 +++ b/static/june_2007_style/blue/panel_layout.css Mon Dec 14 12:17:01 2009 -0500 @@ -25,8 +25,9 @@ .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;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;} +.panel-header-button.popup{padding-right:1.75em;background:url(../images/dropdownarrow.png) no-repeat right 7px;} +.panel-header-button:hover{color:black;background-color:#aaaaaa;} +.panel-header-button:active{color:white;background-color:#aaaaaa;} #overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:20000;} .dialog-box-container{position:relative;margin-top:80px;margin-right:auto;margin-left:auto;} .dialog-box-wrapper{position:relative;padding:1em;background-color:rgba(0,0,0,0.5);-moz-border-radius:1em;-webkit-border-radius:1em;} diff -r 4b0e9e727dbf -r ef075ec1445a static/june_2007_style/panel_layout.css.tmpl --- a/static/june_2007_style/panel_layout.css.tmpl Mon Dec 14 10:33:39 2009 -0500 +++ b/static/june_2007_style/panel_layout.css.tmpl Mon Dec 14 12:17:01 2009 -0500 @@ -152,14 +152,19 @@ background: #bbb; } +.panel-header-button.popup { + padding-right: 1.75em; + background: url(../images/dropdownarrow.png) no-repeat right 7px; +} + .panel-header-button:hover { color: black; - background: #aaaaaa; + background-color: #aaaaaa; } .panel-header-button:active { color: white; - background: #aaaaaa; + background-color: #aaaaaa; } #overlay { diff -r 4b0e9e727dbf -r ef075ec1445a static/scripts/galaxy.base.js --- a/static/scripts/galaxy.base.js Mon Dec 14 10:33:39 2009 -0500 +++ b/static/scripts/galaxy.base.js Mon Dec 14 12:17:01 2009 -0500 @@ -44,7 +44,7 @@ var b = $( "#" + $(this).attr( 'popupmenu' ) ); make_popupmenu( b, options ); $(this).remove(); - b.show(); + b.addClass( "popup" ).show(); }); } diff -r 4b0e9e727dbf -r ef075ec1445a templates/grid_base.mako --- a/templates/grid_base.mako Mon Dec 14 10:33:39 2009 -0500 +++ b/templates/grid_base.mako Mon Dec 14 12:17:01 2009 -0500 @@ -210,7 +210,7 @@ var b = $( "#" + $(this).attr( 'popupmenu' ) ); make_popupmenu( b, options ); $(this).remove(); - b.show(); + b.addClass( "popup" ).show(); }); } @@ -847,19 +847,18 @@ %> %for cellnum, v in enumerate( value ): <% + id = "" # Handle non-ascii chars. if isinstance(v, str): v = unicode(v, 'utf-8') # Attach popup menu? if column.attach_popup and cellnum == 0: - extra = '<a id="grid-%d-popup" class="arrow" style="display: none;"><span>▼</span></a>' % i - else: - extra = "" + id = 'grid-%d-popup' % i %> %if href: - <td><div class="menubutton split" style="float: left;"><a class="label" href="${href}">${v}</a>${extra}</td> + <td><div id="${id}" class="menubutton split" style="float: left;"><a class="label" href="${href}">${v}</a></td> %else: - <td >${v}${extra}</td> + <td><div id="${id}" class="menubutton">${v}</div></td> %endif %endfor %endif diff -r 4b0e9e727dbf -r ef075ec1445a templates/root/index.mako --- a/templates/root/index.mako Mon Dec 14 10:33:39 2009 -0500 +++ b/templates/root/index.mako Mon Dec 14 12:17:01 2009 -0500 @@ -102,7 +102,7 @@ <div class="unified-panel-header" unselectable="on"> <div class="unified-panel-header-inner"> <div style="float: right"> - <a id="history-options-button" class='panel-header-button' href="${h.url_for( controller='root', action='history_options' )}" target="galaxy_main"><span style="padding:0 20px 0 5px;background:url(${h.url_for( '/static/images/dropdownarrow.png')}) no-repeat right center;">${_('Options')}</span></a> + <a id="history-options-button" class='panel-header-button popup' href="${h.url_for( controller='root', action='history_options' )}" target="galaxy_main">${_('Options')}</a> </div> <div class="panel-header-text">${_('History')}</div> </div> diff -r 4b0e9e727dbf -r ef075ec1445a templates/workflow/list.mako --- a/templates/workflow/list.mako Mon Dec 14 10:33:39 2009 -0500 +++ b/templates/workflow/list.mako Mon Dec 14 12:17:01 2009 -0500 @@ -37,8 +37,7 @@ %for i, workflow in enumerate( workflows ): <tr> <td> - <div class="menubutton" style="float: left;"> - <a id="wf-${i}-popup" class="arrow" style="display: none;"><span>▼</span></a> + <div class="menubutton" style="float: left;" id="wf-${i}-popup"> ${workflow.name} </div> </td> @@ -77,8 +76,7 @@ <% workflow = association.stored_workflow %> <tr> <td> - <a href="${h.url_for( action='run', id=trans.security.encode_id(workflow.id) )}">${workflow.name}</a> - <a id="shared-${i}-popup" class="popup-arrow" style="display: none;">▼</a> + <a class="menubutton" id="shared-${i}-popup" href="${h.url_for( action='run', id=trans.security.encode_id(workflow.id) )}">${workflow.name}</a> </td> <td>${workflow.user.email}</td> <td>${len(workflow.latest_workflow.steps)}</td>