• 
      

    Begin dark mode for review UIs and improve the Image Review UI.

    Review Request #13885 — Created May 21, 2024 and submitted

    Information

    Review Board
    release-7.x

    Reviewers

    The base classes for review UIs have been updated to support dark mode.
    On light mode, things look essentially as they did before, while on dark
    mode we now adopt the review request background color and correct text
    colors. Some old legacy decisions (like a very-subtly-different special
    tab color) have been removed in the process.

    The Image Review UI specifically has had a number of updates to the way
    the UI is structured:

    • We now use Ink.MenuLabel for the zoom menu.

    • Instead of float and absolute-position hacks for the header area, we
      now use CSS grid to position things the way we want, keeping captions
      properly centered in the process.

    • The image modes now use the rb-c-tabs component, instead of
      reinventing their own design. This fits in better with the rest of the
      UI.

    • The diff mode tabs bar has been positioned in the header area, instead
      of below it. It also no longer has its own background color.

    • The content area now has a minimum height, large enough to display the
      zoom menu (which was being clipped for small images).

    • The image is now vertically-centered within the content area, instead
      of aligned to the top.

    This isn't the big refactor of the review UI CSS structure that we've
    wanted to do, but gets us closer to it, and allows us to remove some
    really crufty code and workarounds that we had before.

    We'll likely rewrite much of this for Review Board 8, when we revisit
    the review UI architecture.

    Unit tests pass.

    Tested image review UIs in light and dark mode for:

    • Single-revision image file attachments
    • Multi-revision image file attachments
    • Diffed image file attachments
    • Single-revision images in the diff viewer
    • Diffed images in the diff viewer
    Summary ID
    Begin dark mode for review UIs and improve the Image Review UI.
    The base classes for review UIs have been updated to support dark mode. On light mode, things look essentially as they did before, while on dark mode we now adopt the review request background color and correct text colors. Some old legacy decisions (like a very-subtly-different special tab color) have been removed in the process. The Image Review UI specifically has had a number of updates to the way the UI is structured: * We now use `Ink.MenuLabel` for the zoom menu. * Instead of float and absolute-position hacks for the header area, we now use CSS grid to position things the way we want, keeping captions properly centered in the process. * The image modes now use the `rb-c-tabs` component, instead of reinventing their own design. This fits in better with the rest of the UI. * The diff mode tabs bar has been positioned in the header area, instead of below it. It also no longer has its own background color. * The content area now has a minimum height, large enough to display the zoom menu (which was being clipped for small images). * The image is now vertically-centered within the content area, instead of aligned to the top. This isn't the big refactor of the review UI CSS structure that we've wanted to do, but gets us closer to it, and allows us to remove some really crufty code and workarounds that we had before. We'll likely rewrite much of this for Review Board 8, when we revisit the review UI architecture.
    6d4a57163b9eda69cfc99ca676de7fc29bb56492

    david
    1. Ship It!
    2. 
        
    maubin
    1. Ship It!
    2. 
        
    chipx86
    Review request changed
    Status:
    Completed
    Change Summary:
    Pushed to release-7.x (8dee6bf)