details: http://www.bx.psu.edu/hg/galaxy/rev/fb7dd12ea39c changeset: 3106:fb7dd12ea39c user: jeremy goecks <jeremy.goecks@emory.edu> date: Wed Nov 18 11:51:09 2009 -0500 description: Tweaks to grid filter UI: (1) added search image/submit button for initiating search and (2) styled text filter criteria. diffstat: lib/galaxy/web/framework/helpers/grids.py | 3 +++ static/images/mag_glass.png | templates/grid_base.mako | 35 +++++++++++++++++++++++++++++++++++ templates/grid_common.mako | 13 ++++++++----- 4 files changed, 46 insertions(+), 5 deletions(-) diffs (97 lines): diff -r f4c2bf76b2e2 -r fb7dd12ea39c lib/galaxy/web/framework/helpers/grids.py --- a/lib/galaxy/web/framework/helpers/grids.py Wed Nov 18 10:57:24 2009 -0500 +++ b/lib/galaxy/web/framework/helpers/grids.py Wed Nov 18 11:51:09 2009 -0500 @@ -120,6 +120,9 @@ column_filter = from_json_string_recurse( column_filter ) if len( column_filter ) == 1: column_filter = column_filter[0] + # If filter criterion is empty, do nothing. + if column_filter == '': + continue # Update query. query = column.filter( trans.sa_session, query, column_filter ) # Upate current filter dict. diff -r f4c2bf76b2e2 -r fb7dd12ea39c static/images/mag_glass.png Binary file static/images/mag_glass.png has changed diff -r f4c2bf76b2e2 -r fb7dd12ea39c templates/grid_base.mako --- a/templates/grid_base.mako Wed Nov 18 10:57:24 2009 -0500 +++ b/templates/grid_base.mako Wed Nov 18 11:51:09 2009 -0500 @@ -62,6 +62,21 @@ t2.autocomplete("${h.url_for( controller='history', action='name_autocomplete_data' )}", autocomplete_options); } + + // Initialize submit image elements. + $('.submit-image').each( function() + { + // On mousedown, add class to simulate click. + $(this).mousedown( function() { + $(this).addClass('gray-background'); + }); + + // On mouseup, add class to simulate click. + $(this).mouseup( function() { + $(this).removeClass('gray-background'); + }); + + }); }); ## Can this be moved into base.mako? %if refresh_frames: @@ -168,6 +183,26 @@ text-align: center; display: inline-block; } + .submit-image { + vertical-align: text-bottom; + margin: 0; + padding: 0; + } + .no-padding-or-margin { + margin: 0; + padding: 0; + } + .gray-background { + background-color: #DDDDDD; + } + .text-filter-val { + border: solid 1px #AAAAAA; + padding: 1px 3px 1px 3px; + margin-right: 5px; + -moz-border-radius: .5em; + -webkit-border-radius: .5em; + font-style: italic; + } </style> </%def> diff -r f4c2bf76b2e2 -r fb7dd12ea39c templates/grid_common.mako --- a/templates/grid_common.mako Wed Nov 18 10:57:24 2009 -0500 +++ b/templates/grid_common.mako Wed Nov 18 11:51:09 2009 -0500 @@ -32,10 +32,11 @@ <% column_filter = cur_filter_dict[column.key] %> %if isinstance( column_filter, basestring ): %if column_filter != "All": - <span style="font-style: italic">${cur_filter_dict[column.key]}</span> - <% filter_all = GridColumnFilter( "", { column.key : "All" } ) %> - <a href="${url( filter_all.get_url_args() )}"><img src="${h.url_for('/static/images/delete_tag_icon_gray.png')}"/></a> - | + <span class='text-filter-val'> + ${cur_filter_dict[column.key]} + <% filter_all = GridColumnFilter( "", { column.key : "All" } ) %> + <a href="${url( filter_all.get_url_args() )}"><img src="${h.url_for('/static/images/delete_tag_icon_gray.png')}"/></a> + </span> %endif %elif isinstance( column_filter, list ): %for i, filter in enumerate( column_filter ): @@ -53,7 +54,9 @@ %endif %endif - <span><input id="input-${column.key}-filter" name="f-${column.key}" type="text" value="" size="15"/></span> + <span> + <input class="no-padding-or-margin" id="input-${column.key}-filter" name="f-${column.key}" type="text" value="" size="15"/> + <input class='submit-image' type='image' src='${h.url_for('/static/images/mag_glass.png')}' alt='Filter'/></span> </form> %else: %for i, filter in enumerate( column.get_accepted_filters() ):