Skip to content

Styling of comments and system notes in issues/mrs/epics

I was trying to think of a way to contain each comment so all elements for each comment are within proper boundaries. This closely matches how our file headers look.

Before After
screencapture-localhost-3000-h5bp-html5-boilerplate-merge_requests-6-1489096366826 screencapture-localhost-3000-h5bp-html5-boilerplate-merge_requests-6-1489096261333

I also tried a few other things, keeping the avatar within the note header.
Screen_Shot_2017-03-09_at_3.41.16_PM Screen_Shot_2017-03-09_at_3.42.07_PM
Screen_Shot_2017-03-09_at_3.24.11_PM Screen_Shot_2017-03-09_at_3.22.22_PM

Design

Discussions tab on merge request / issue page
  • Discussions which is not related to a code:
  • It always shows the initial comment regardless of expanding or collapsing.
  • The replies belong to the initial comment are indented.
  • Discussions which is related to a code:
  • When it is collapsed, it shows "Hazel Yang started a discussion on the diff about 17 hours ago" + "toggle discussion v" in the bar.
MR - Discussions Issue
merge-request issue
Changes tab on merge request page
  • The system note icons have the circle border.
  • The system notes are indented.
Inline Side-by-side
merge-request--changes-inline merge-request--changes-side-by-side
Edited by Hazel Yang