Make the on-hover detail panel in infoboxes more generic and reusable.

Review Request #9082 — Created July 16, 2017 and submitted

Review Board

The user infobox includes a nifty on-hover panel for the timestamp,
showing the last logged in time and joined date. The implementation was
a bit specific to the user infobox (partly due to the way it was
positioned and the hover triggered), but this change makes it more
generic and usable for other infoboxes, allowing it to be placed
anywhere in the infobox.

The new implementation provides standard CSS rules and a structure for
the hover panel. There's now a containing element
(.infobox-hover-item) with an anchor that triggers the display
(.infobox-hover-item-anchor) and the panel contents that will be shown
(.infobox-hover-item-contents). Unlike the previous implementation,
this one doesn't absolutely position the main container, meaning that it
can sit directly above and below other content without affecting the
flow of those elements.

There's also a .infobox-item class for items that don't have a hover
rule. This enables us to have consistent spacing for all detail items.

With the new implementation, we can no longer depend on :hover (since
the element used for it is now positioned relatively alongside the panel
instead of absolutely inside of it, and the panel is shown/hidden based
on the hover instead of its child elements). Instead, the hover
functionality now lives in JavaScript, and is common to all infoboxes.
In theory, infoboxes could have multiple of these hover panels and
they'd all work.

Tested that the user infobox's hover panel worked, and continued to work
as I switched between users and re-rendered the infobox.

Tested these CSS rules with new infobox content for review requests
(coming in another change).

Loading file attachments...

  • 0
  • 0
  • 3
  • 0
  • 3
Description From Last Updated
  2. reviewboard/static/rb/css/ui/infoboxes.less (Diff revision 1)

    There's no actual rule in here.

    1. Oops, meant to remove that.

  1. Ship It!
  1. Ship It!
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to release-3.0.x (1af0aa9)