[web] Increase clickable region of `ChatThreadListItem`
ClosedPublic
Actions

Authored by atul on Mar 29 2022, 11:24 AM.

Details

Reviewers

tomek
• jacek
ashoat

Commits

rCOMMc78cd28da854: [web] Increase clickable region of `ChatThreadListItem`

Summary

Addresses issue described in: https://linear.app/comm/issue/ENG-842/fix-threadlist-click-area

("Clickable" region in red)
Before:

After:

Test Plan

Tried clicking between threads, marking threads as read/unread, etc. and made sure things look/behave as expected"

Diff Detail

Repository

rCOMM Comm

Branch

master

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

atul created this revision.Mar 29 2022, 11:24 AM

Herald added subscribers: • abosh, • benschac, • karol, • adrian. · View Herald TranscriptMar 29 2022, 11:24 AM

atul edited the summary of this revision. (Show Details)Mar 29 2022, 11:25 AM

cursor:pointer

atul edited the test plan for this revision. (Show Details)Mar 29 2022, 11:28 AM

atul added inline comments.

web/chat/chat-thread-list-item-menu.react.js
24	see https://www.freecodecamp.org/news/event-propagation-event-bubbling-event-catching-beginners-guide/
42	see https://www.freecodecamp.org/news/event-propagation-event-bubbling-event-catching-beginners-guide/

Harbormaster completed remote builds in B7683: Diff 10785.Mar 29 2022, 11:31 AM

Harbormaster completed remote builds in B7684: Diff 10786.Mar 29 2022, 11:38 AM

atul requested review of this revision.Mar 29 2022, 11:38 AM

atul added inline comments.Mar 29 2022, 12:02 PM

web/chat/chat-thread-list-item-menu.react.js
24	Basically If the user clicks anywhere in the "clickable" thread list item div, we want to navigate to the corresponding thread If the user clicks the vertical ellipsis, we want to display the "mark as [read/unread]" menu. Without `event.stopPropogation()`, when the user clicks the vertical ellipsis for an inactive thread: The "mark as [read/unread" menu appears The user is navigated to the corresponding thread even though they didn't intend to

atul mentioned this in D3545: [web] Increase clickable region of `ChatThreadListSidebar`.Mar 29 2022, 12:34 PM

This makes sense, but I'm not sure about extending clickable area near vertical ellipsis. The issue might be that it is not clear where one clickable area ends and another begins, so a user might be confused (e.g. the intention was to open the menu but instead a thread was opened).
If we agree this is a real issue, we can e.g. find a way for a cursor to become default when hovering from thread to ellipsis so that it's clear where one area ends and another begins. We can also extend the clickable area only to some point on the right hand side.

We can also extend the clickable area only to some point on the right hand side.

This is actually what I tried originally. I changed the layout a bit and was able to change the "active" area from

but it was weird in practice because there were unexpected "dead areas" on the right (like under the timestamp).

Based on my experimentation, I think the best bet is the make the whole "cell" sans the ellipsis navigate the user to the thread, and for the ellipsis to bring up the menu.

If we agree this is a real issue, we can e.g. find a way for a cursor to become default when hovering from thread to ellipsis so that it's clear where one area ends and another begins.

But you're right that we should make it clear to the user where one clickable region begins and ends.

I think the best option is to introduce a hover state for the ellipsis icon? What are your thoughts on an approach like that? We could also "un-highlight" the thread cell when the ellipsis is "active" to make it more clear? (would address these styling changes to make clickable regions clear in a separate diff)

atul mentioned this in D3575: [web] Style `ChatThreadListItemMenu` vertical ellipsis on hover.Mar 30 2022, 1:31 PM

ashoat accepted this revision.Mar 30 2022, 11:02 PM

ashoat added inline comments.