• 
      

    Add UI for easily linking to comments or replies in reviews.

    Review Request #9184 — Created Sept. 8, 2017 and submitted

    Information

    Review Board
    release-3.0.x
    b770ec3...

    Reviewers

    Linking to particular comments or replies in reviews used to require
    digging through the page to get the appropriate anchor name, which was
    kind of terrible. The header/footer of reviews couldn't even be linked to.
    This change aims to fix all this by introducing a couple UI enhancements
    for linking.

    The timestamps on entries and on replies are now anchors to their
    particular locations, allowing one to right-click and copy the link.
    This is a familiar concept for many, which is why it's included, but
    it's not the primary means of linking, as it doesn't cover everything.
    Top-level comments don't have individual timestamps, so it's not
    suitable for those.

    Instead, we offer a common way of linking to any comment or reply by
    hovering over and clicking a link icon to the left of the review box.
    This only shows on hover, keeping the UI largely clean, but making the
    presence of the link obvious to users.

    The "floating anchor" link is positioned such that a user can easily
    move their mouse cursor from the comment/reply onto the link without it
    disappearing. It covers the entire height of the comment/reply and
    extends most of the way to the left of the page, with sufficient padding
    around the icon itself to make it easy to hit.

    This required a bit of element restructuring, as the comment and its
    replies shared a parent container. Those are now split out into two
    separate parents, retaining all the margins/padding that we had before,
    but making it much easier to draft CSS rules that target exactly what we
    need without hacks.

    When linking to a comment or reply, we no longer wrap the text in a blue
    box. This was kind of distracting and messed with the layout a bit.
    Instead, we just use the standard browser behavior of scrolling to that
    element. Highlighting of a selected comment may come back in a future
    change in a different form, however, as I want to eventually add
    keyboard navigation like the diff viewer has.

    Tested hovering and the resulting links for all types of comments and
    replies, in desktop and mobile mode.

    Compared the padding/margins on the page with how things looked before
    the restructuring/style changes.


    david
    1. Ship It!
    2. 
        
    chipx86
    Review request changed
    Status:
    Completed
    Change Summary:
    Pushed to release-3.0.x (935fdce)