RFC: Resource view UI polish

[Lindsayauchin]

Now that Users have used the pinning feature for sometime, the first version of this implementation needs some UX iteration and UI polish.

Recommendations:

1. Update Comment overlay

• Include 'reason why this is pinned' message with meta data of user and date + time stamp in a sticky display element below the L1 and L2 nav
• Resource view: Better way of displaying what is currently pinned Resource view: Better way of displaying what is currently pinned  #4765

2. Remove pin bar in L2 nav area

• Resource view: Remove Pin bar Resource view: Remove Pin bar #4780

3. Dismissing comment overlay

• Resource view: dismissing comment overlay Resource view: dismissing comment overlay #4786

4. Editing comment

• Resource view: Edit Comment overlay Resource view: Edit Comment inline #4781

5. No overlay by default

• Resource view: no overlay by default Resource view: no overlay by default #4787

6 Update icon disable/enable button in version list

• In the resource version list UI, it's not entirely clear what the check mark does. See Resource version enable/disable UI improvements #4211

7. UI polish on the commenting input overlay

8. Layout "re-gridding" the table to an 8px grid

• Icons are not high enough fidelity on retina displays optimizing the grid will allow for improved svg rendering
• Resource view: Layout Resource view: Layout "re-gridding" the table to an 8px grid #4788

9. Display meta data on a version
   -make issue

Related open issues

#4211
#3960

Current State:

Proposed State:

[jamieklassen]

@kcmannem suggests that we have a 'sticky' row at the top of the versions list for the version to which the resource is pinned.

[Lindsayauchin]

Updated Design Mock:

For visibility design iteration based on the feedback in IPM.

Display the currently pinned resource sticky to the top of the version list.

• Remove tooltip as truncation should not be needed in this area. Bar should expand by one row if needed.

Display pinned comment in the same top bar

• timestamp and user name + comment. Bar should expand by one row if needed.

[jamieklassen]

@Lindsayauchin what happens to the comment bar - is it still at the bottom? if not, what does editing the pin comment look like?

If it is still at the bottom, then let's focus the scope of this issue to just be changing the 'pin bar' to a 'sticky version', and not add the comment to that sticky version.

[jomsie]

Talked to @Lindsayauchin @matthewpereira and @kcmannem regarding our questions, and came to these decisions:

• Pin icon in the currently pinned bar (at the top) is only a label now, no action (so change bg colour)
• Clicking on the pinned resource version (ref in this case) scrolls to the pinned resource in the list
• Clicking on the pin comment in the currently pinned bar brings up/shows the pinned comment edit section
• Pinning actions only happen in the list

@Lindsayauchin feel free to add any comments I missed!

[jomsie]

Just my own comment: I'm thinking about how obvious it will be to know clicking on the ref 12dcf... brings you to the pinned version in the list...

My thought is people might not realize that, and since they can't unpin from the top bar anymore, they'll start searching through pages to unpin. Should we remove the ability to unpin from that top bar?

[jamieklassen]

Versions are paginated, and for the moment the API doesn't tell you which page the pinned version lives on (if any). The current implementation has meant that pages of versions are only fetched on clicking the pagination chevrons. The proposed changes seem to mandate eagerly fetching versions in order to find the pinned one

[jomsie]

Good point, that seems like a pretty big undertaking (either on our side or API side). @Lindsayauchin how attached are you to the "click resource version to find it in the list" thing?

[matthewpereira]

Side topic of interest: it came up in conversation when we were looking at this on screen that the pin icon can be difficult to make out, and might be even more difficult on screens with a lower DPI than what we have in the office. I whipped up a couple quick variations to provide a starting point for discussion.

Each row has a different icon for comparison (you might have to click on each image and view them at full size to see the full effect):

From top to bottom:

1. Original icon
2. Fattened icon
3. Resized and adjusted, offset so that the pin is lined up with the pixel grid
4. Resized and adjusted, centered

Option 3 is nicest on ~72dpi - 96dpi displays (eg, lots of Windows laptops, non-Retina Mac models), while Option 4 seems nicest on high DPI displays.

View the original mockup on Figma

Maybe we could swap out the svg in an upcoming release?

pin icon - resized offset.svg.zip
pin icon - resized centered.svg.zip

[vito]

while playing with button sizes/spacing and icon style/alignment, maybe we can get a solution for #4211 as well.

Agreed that the pin button on the "sticky" version will still unpin, but clicking the version will not do any scrolling.

hitting 'Escape' with the textarea focused seems like it should dismiss the comment bar.
@Lindsayauchin pls weigh in on the 'dismissing' story.

[Lindsayauchin]

Sketch to talk about in IPM today with the team: