Author: eallen Date: 2008-08-25 18:18:14 -0400 (Mon, 25 Aug 2008) New Revision: 2355 Modified: mgmt/trunk/cumin/python/wooly/tables.py mgmt/trunk/cumin/python/wooly/tables.strings Log: Added :hover style on table column headers to indicate that clicking on the column header will sort the list. Modified: mgmt/trunk/cumin/python/wooly/tables.py =================================================================== --- mgmt/trunk/cumin/python/wooly/tables.py 2008-08-25 19:11:27 UTC (rev 2354) +++ mgmt/trunk/cumin/python/wooly/tables.py 2008-08-25 22:18:14 UTC (rev 2355) @@ -158,14 +158,30 @@ def render_class_attr(self, session, *args): return self.column.get_class_attr(session) + def render_sorted_dir(self, session, *args): + sel = self.parent.get_selected_column(session) + + if sel is self.column: + if self.parent.reversed.get(session): + return "up" + else: + return "down" + elif self.parent.reversed.get(session): + return "unsorted_up" + else: + return "unsorted_down" + + def render_sort_arrow(self, session, *args): sel = self.parent.get_selected_column(session) if sel is self.column: if self.parent.reversed.get(session): - return "<img src=\"resource?name=sort-arrow-up.png\" />" + return "<img src=\"resource?name=sort-arrow-up.png\" alt=\"sort ascending\" />" else: - return "<img src=\"resource?name=sort-arrow-down.png\" />" + return "<img src=\"resource?name=sort-arrow-down.png\" alt=\"sort descending\" />" + else: + return "<img src=\"resource?name=x.png\" width=\"9\" height=\"10\" alt=\"\" />" class SqlTable(ItemTable): def __init__(self, app, name): Modified: mgmt/trunk/cumin/python/wooly/tables.strings =================================================================== --- mgmt/trunk/cumin/python/wooly/tables.strings 2008-08-25 19:11:27 UTC (rev 2354) +++ mgmt/trunk/cumin/python/wooly/tables.strings 2008-08-25 22:18:14 UTC (rev 2355) @@ -7,5 +7,37 @@ [ItemTable.item_html] <tr>{cells}</tr> +[ItemTableColumnHeader.css] +a.ItemTableColumnHeader span{ + border:1px solid transparent; + padding: 2px 14px 2px 4px; +} +a.ItemTableColumnHeader span:hover { + border:1px solid #EAEAEA; + background-color: #FFFFFF; + background-repeat: no-repeat; + background-position: right 5px; +} +a.ItemTableColumnHeader span.unsorted_down:hover { + background-image: url(resource?name=sort-arrow-down.png); + background-repeat: no-repeat; + background-position: right 5px; +} +a.ItemTableColumnHeader span.unsorted_up:hover { + background-image: url(resource?name=sort-arrow-up.png); + background-repeat: no-repeat; + background-position: right 5px; +} +a.ItemTableColumnHeader span.up { + background-image: url(resource?name=sort-arrow-up.png); + background-repeat: no-repeat; + background-position: right 5px; +} +a.ItemTableColumnHeader span.down { + background-image: url(resource?name=sort-arrow-down.png); + background-repeat: no-repeat; + background-position: right 5px; +} + [ItemTableColumnHeader.html] -<th {class_attr}><a href="{href}">{content} {sort_arrow}</a></th> +<th {class_attr}><a class="ItemTableColumnHeader" href="{href}"><span class="{sorted_dir}">{content}</span></a></th>