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)