Add a component class for comment thumbnails, with dark mode support.
Review Request #13854 — Created May 14, 2024 and submitted
We had multiple places were we were styling comment thumbnails. Both
reviews and the review dialog had their own variants on a structure for
these, with different styling, and those styles had hacks that made dark
mode support difficult to properly add.In an effort to make this more maintainable, and to add dark mode, we
now have a new CSS component calledrb-c-review-comment-thumbnail
,
which is responsible for styling the thumbnail area for a comment. This
includes the header (usually a filename and revision) and any thumbnail
contents (an image, part of a document, or a diff).There are still hacks involved. In particular, we still treat diffs
specially. Instead of providing its own header, this component uses the
diff's filename header. It also works with the expand-controls-on-hover
logic, when opted into. This all involves some special structure and
rules specific to diffs. However, we still benefit from having all of
this nicely grouped together with the base header and content styles,
and all in one component instead of scattered throughout other CSS
files.Styling has also been fixed up for some of the types of content we
render. Diffed text files, for instance, no longer attempt to override
borders for everything. This will benefit the review UI as well.
Tested in light and dark mode for all comment types, both draft (in the
Review Dialog) and published (in reviews).Tested diff expansion in light and dark modes in both the Review Dialog
and in published reviews.Python and JavaScript unit tests pass.
Summary | ID |
---|---|
4ccd2b9f1c1a96da32a70e2043dc9573b5193d9e |
Description | From | Last Updated |
---|---|---|
I notice that we don't have a border at the bottom of the comment thumbnails in dark mode, but we … |
maubin |
- Change Summary:
-
Fixed the bottom border of comment thumbnails. A late-stage change to reuse a CSS variable for border definitions unintentionally resulted in transparent borders on dark mode.
Note that collapsed diff comment thumbnails won't have a border, and hadn't had one before. This is due to the need to put the border at the bottom of the collapsed header, which gets visually lost when transforming that down to a small size.
- Commits:
-
Summary ID b58a754a244cea1c73076bae86bc847f7dab24ae 4ccd2b9f1c1a96da32a70e2043dc9573b5193d9e - Diff:
-
Revision 2 (+758 -544)