Improve the structure and presentation of the Dashboard sidebar.

Review Request #5407 — Created Feb. 5, 2014 and submitted

Information

Review Board
master

Reviewers

Improve the structure and presentation of the Dashboard sidebar.

The Dashboard sidebar was pretty old, and is extensibility was not very
good. This change throws out all the old code, replacing it with a
nicer architecture and design.

DashboardDatagrid now has an instance of Sidebar, which works as a
container for BaseSidebarItem subclasses. Each item added will be
rendered when rendering the sidebar.

We provide two built-in subclasses: SidebarSection, and SidebarNavItem.
These are used to create the sectioned lists of links we use, along with
the counts.

Extensions can provide their own subclasses, which can override the
template and render custom data if needed. There aren't yet hooks for
this, but that will come in another change.

The design and organization has also changed. Instead of
"Starred Reviews," "Outgoing Reviews," "Incoming Reviews, "Watched
Groups," and "All My Requests," there's now only two sections:
"Outgoing" and "Incoming".

"Outgoing" has nav items for "All" and "Open," replacing "Outgoing" and
"All My Requests."

"Incoming" has "Open" (replacing the former link on "Incoming" itself),
"To Me", "Starred" (if there are any starred review requests), the list
of subscribed groups, and the list of watched groups.

The display is a bit nicer. The section labels are little larger and
don't have "Reviews" or "Requests" in the names. The counts are now
little bubbles showing the counts instead of free-floating text. The
current Dashboard view is also shown on the side, by making the
appropriate nav item appear selected.

There's also a couple CSS fixes for handling scrolling when there are
more items than screen space.

Tested every type of link on the sidebar, to make sure they went to the
right view and showed as highlighted.

Resized the screen small and saw that the scrollbar appeared and functioned.

Added a long group name, and saw it wrap without breaking everything.

Went to the default Dashboard link, and saw that "Incoming -> Open" was
highlighted.

Checked that the other data grids, including the user page, were unaffected.
(The user page will soon make use of this architecture, though, replacing
the current poor extensibility.)


Description From Last Updated

Hrm. It makes me uncomfortable that starred groups have more prominence than joined groups. The stars also look like they …

daviddavid

Why aren't we using the :first-child pseudo-class?

daviddavid

This should use the six.moves version.

daviddavid
chipx86
chipx86
david
  1. 
      
  2. Show all issues

    Hrm. It makes me uncomfortable that starred groups have more prominence than joined groups.

    The stars also look like they should be aligned a little bit higher next to the text.

    1. Most people don't have starred groups, and won't see it anyway. It's a totally fair point, though. I could go with the unstarred icon, but that seems wrong. Not sure what the best option is.

      The icon alignment is just due to the shape of the star. The fact that it comes to a point at the top. Just looking at the baselines, ignoring the ascents and descents, the text is properly vertically aligned with the star.

  3. reviewboard/datagrids/sidebar.py (Diff revision 3)
     
     
    Show all issues

    This should use the six.moves version.

  4. 
      
chipx86
chipx86
david
  1. 
      
  2. reviewboard/datagrids/builtin_items.py (Diff revisions 3 - 4)
     
     
     
     
     
    Show all issues

    Why aren't we using the :first-child pseudo-class?

    1. They're all part of the same list. It's a lot more code and structure to figure out how to group those into their own lists.

    2. OK.

  3. 
      
david
  1. Ship It!

  2. 
      
chipx86
Review request changed
Status:
Completed