message_ui: Show non-sticky recipient bar action buttons on hover. #27265

ecxtacy · 2023-10-18T16:22:26Z

Fixes: #26852

CZO thread (The design idea discussion)
CZO thread (Implementation approach discussion)

Recipient bars show the action buttons on hover, except for the sticky recipient bar which always shows the action buttons.
The CSS rule visibility: hidden; is toggled on hover, and visibility: visible; applied if the bar is sticky.
The disappearance of the action buttons when action UI (notification menu, topic editing UI) is shown is prevented by using :focus-within CSS pseudo class on the recipient_bar to add visibility: visible to the action buttons.
In case of conversation views, since there is a single message box present, the controls are made forever visible by using the CSS :only-child pseudo selector.

Screenshots and screen captures:

Final Look

Action UI remains intact

Previously (All controls visible)

Conversation view

Self-review checklist

Self-reviewed the changes for clarity and maintainability
(variable names, code reuse, readability, etc.).

Communicate decisions, questions, and potential concerns.

Explains differences from previous plans (e.g., issue description).
Highlights technical choices and bugs encountered.
Calls out remaining decisions and concerns.
Automated tests verify logic where appropriate.

Individual commits are ready for review (see commit discipline).

Each commit is a coherent idea.
Commit message(s) explain reasoning and motivation for changes.

Completed manual review and testing of the following:

Visual appearance of the changes.
Responsiveness and internationalization.
Strings and tooltips.
End-to-end functionality of buttons, interactions and flows.
Corner cases, error conditions, and easily imagined bugs.

zulipbot · 2023-10-18T16:22:36Z

Hello @zulip/design members, this pull request was labeled with the "UI experiment", "redesign" labels, so you may want to check it out!

alya · 2023-10-18T18:51:22Z

Thanks!

If a user is editing a topic, the editing UI should always be shown. It should not disappear if the mouse is moved.

alya · 2023-10-18T18:52:21Z

Similarly, the notification settings button should remain visible while the menu is open, avoiding situations like this:

ecxtacy · 2023-10-19T17:54:45Z

Thanks a lot @alya, for bringing up these flaws, I will work on fixing them. 😃

ecxtacy · 2023-10-20T10:45:03Z

@alya I have fixed the flaws which were produced and rebased + updated my branch and updated the PR description. 😄

This is the UI after the fix :-

alya · 2023-10-24T04:50:42Z

The changes in response to the comments above look good! Please also address the comments here -- the icons should always be shown in a view that just has one conversation.

ecxtacy · 2023-10-25T18:08:13Z

As discussed on the CZO regarding the actions visibility in conversation view, I have fixed that bug and updated my PR. 😄

alya · 2023-10-25T18:11:44Z

Thanks! Please post a screen capture or screenshot demonstrating the changes.

ecxtacy · 2023-10-25T18:17:38Z

After the changes :-

alya · 2023-10-26T15:51:00Z

Works for me in manual testing! @amanagr are you up for reviewing this one?

amanagr · 2023-10-27T11:04:07Z

LGTM!

web/styles/zulip.css

ecxtacy · 2023-11-01T12:32:30Z

I've updated the code, which addresses the bug mentioned by Tim. Now the action buttons are always visible only in conversation views, not any other view which might have a single message.

alya · 2023-11-03T06:17:00Z

I did another round of manual testing and didn't spot any issues.

timabbott · 2023-11-14T22:14:02Z

web/src/message_list_view.js

+            $("#zfilt").addClass("is-conversation-view");
+        } else {
+            $("#zfilt").removeClass("is-conversation-view");
+        }


This is wrong if we are rerendering message_lists.home, which should not mutate zfilt. Please look at the table_name attribute for what part of the DOM to interact with.

Ill make the adjustments and update the code. Thank you for your feedback on this 😄

I have added a check so that the logic gets called only if the table_name attribute of the message_list is "zflit".
Branch has been updated and pushed.

timabbott · 2023-11-21T19:35:00Z

Test-deploying this on chat.zulip.org.

ecxtacy · 2023-11-22T08:03:52Z

Thanks ! 😄

timabbott · 2024-01-25T20:40:51Z

Can you rebase this and then ping me to deploy it in DMs? It needs a bit of a rework because zfilt no longer exists.

ecxtacy · 2024-01-26T02:08:07Z

Sure 😄

ecxtacy · 2024-01-26T02:12:12Z

@timabbott I've rebased it.

timabbott · 2024-02-13T17:51:28Z

@ecxtacy zfilt no longer exists in the app, so this code can't possibly work - can you please carefully update that and re-test this logic after doing so? It's important to always test your changes after a big rebase.

ecxtacy · 2024-02-14T15:09:35Z

Yeah sure, I'll make the suitable changes on this. 👍
Thanks for pointing this out. 😄

When the current view is a conversation view, add the class `is-conversation-view` to `div.focused-message-list`. The check is done when `message_list_view` is rendered, which is in the `render()` function.

- Toggles the CSS rule `visibility: hidden;` on the recipient bar controls when the bar is hovered. - If the recipient bar is sticky, then the controls are always visible. - In case of conversation views, the recipient actions remain visible. Fixes part of zulip#26852

Added `visibility` CSS with `:focus-within` pseudo-class to the recipient bar. This keeps the action button visibility consistent with the action UIs - topic editing UI and notification menu. Fixes zulip#26852

ecxtacy · 2024-02-17T11:29:29Z

I have made the required changes.

zulipbot · 2024-05-02T21:02:23Z

Heads up @ecxtacy, we just merged some commits that conflict with the changes you made in this pull request! You can review this repository's recent commits to see where the conflicts occur. Please rebase your feature branch against the upstream/main branch and resolve your pull request's merge conflicts accordingly.

zulipbot added size: S area: message feed (UI) Buttons/UI directly in the message feed (not popovers, etc.) priority: high redesign Part of the webapp redesign project, including blockers. UI experiment Design direction to be evaluated labels Oct 18, 2023

ecxtacy force-pushed the issue_26852-hover-action-button branch from 7c5dc6e to 9a9f0c2 Compare October 20, 2023 10:04

ecxtacy force-pushed the issue_26852-hover-action-button branch 2 times, most recently from 7f563b4 to 9f61e29 Compare October 25, 2023 18:00

zulipbot added size: M and removed size: S labels Oct 25, 2023

ecxtacy force-pushed the issue_26852-hover-action-button branch from 9f61e29 to fe4c7aa Compare October 25, 2023 18:01

alya added the maintainer review PR is ready for review by Zulip maintainers. label Oct 26, 2023

amanagr added integration review Added by maintainers when a PR may be ready for integration. and removed maintainer review PR is ready for review by Zulip maintainers. labels Oct 27, 2023

timabbott reviewed Oct 27, 2023

View reviewed changes

web/styles/zulip.css Show resolved Hide resolved

ecxtacy force-pushed the issue_26852-hover-action-button branch 2 times, most recently from 8d2463b to 359434e Compare November 1, 2023 11:52

alya added chat.zulip.org review Added by maintainers when a PR requires chat.zulip.org testing to proceed. and removed integration review Added by maintainers when a PR may be ready for integration. labels Nov 3, 2023

timabbott reviewed Nov 14, 2023

View reviewed changes

ecxtacy force-pushed the issue_26852-hover-action-button branch from 359434e to c699cfe Compare November 17, 2023 17:12

ecxtacy force-pushed the issue_26852-hover-action-button branch from c699cfe to 921e7d5 Compare January 26, 2024 02:10

ecxtacy force-pushed the issue_26852-hover-action-button branch from 921e7d5 to 37c0998 Compare January 29, 2024 16:03

timabbott removed the chat.zulip.org review Added by maintainers when a PR requires chat.zulip.org testing to proceed. label Feb 16, 2024

ecxtacy added 3 commits February 17, 2024 15:21

message_ui: Add class to message-list if conversation view.

4f65c00

When the current view is a conversation view, add the class `is-conversation-view` to `div.focused-message-list`. The check is done when `message_list_view` is rendered, which is in the `render()` function.

css: Prevent action buttons from hiding on recipient bar focus.

ee3434a

Added `visibility` CSS with `:focus-within` pseudo-class to the recipient bar. This keeps the action button visibility consistent with the action UIs - topic editing UI and notification menu. Fixes zulip#26852

ecxtacy force-pushed the issue_26852-hover-action-button branch from 37c0998 to ee3434a Compare February 17, 2024 09:59

ecxtacy changed the title ~~css: Show non-sticky recipient bar action buttons on hover.~~ message_ui: Show non-sticky recipient bar action buttons on hover. Feb 17, 2024

alya added the chat.zulip.org review Added by maintainers when a PR requires chat.zulip.org testing to proceed. label Feb 22, 2024

zulipbot added the has conflicts label May 2, 2024

alya added the completion candidate PRs with reviews that may unblock merging label May 15, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

message_ui: Show non-sticky recipient bar action buttons on hover. #27265

message_ui: Show non-sticky recipient bar action buttons on hover. #27265

ecxtacy commented Oct 18, 2023 •

edited

zulipbot commented Oct 18, 2023

alya commented Oct 18, 2023

alya commented Oct 18, 2023

ecxtacy commented Oct 19, 2023

ecxtacy commented Oct 20, 2023 •

edited

alya commented Oct 24, 2023

ecxtacy commented Oct 25, 2023

alya commented Oct 25, 2023

ecxtacy commented Oct 25, 2023

alya commented Oct 26, 2023

amanagr commented Oct 27, 2023

ecxtacy commented Nov 1, 2023

alya commented Nov 3, 2023

timabbott Nov 14, 2023

ecxtacy Nov 16, 2023

ecxtacy Nov 17, 2023

timabbott commented Nov 21, 2023

ecxtacy commented Nov 22, 2023

timabbott commented Jan 25, 2024

ecxtacy commented Jan 26, 2024

ecxtacy commented Jan 26, 2024

timabbott commented Feb 13, 2024

ecxtacy commented Feb 14, 2024

ecxtacy commented Feb 17, 2024 •

edited

zulipbot commented May 2, 2024

message_ui: Show non-sticky recipient bar action buttons on hover. #27265

Are you sure you want to change the base?

message_ui: Show non-sticky recipient bar action buttons on hover. #27265

Conversation

ecxtacy commented Oct 18, 2023 • edited

Final Look

zulipbot commented Oct 18, 2023

alya commented Oct 18, 2023

alya commented Oct 18, 2023

ecxtacy commented Oct 19, 2023

ecxtacy commented Oct 20, 2023 • edited

alya commented Oct 24, 2023

ecxtacy commented Oct 25, 2023

alya commented Oct 25, 2023

ecxtacy commented Oct 25, 2023

alya commented Oct 26, 2023

amanagr commented Oct 27, 2023

ecxtacy commented Nov 1, 2023

alya commented Nov 3, 2023

timabbott Nov 14, 2023

Choose a reason for hiding this comment

ecxtacy Nov 16, 2023

Choose a reason for hiding this comment

ecxtacy Nov 17, 2023

Choose a reason for hiding this comment

timabbott commented Nov 21, 2023

ecxtacy commented Nov 22, 2023

timabbott commented Jan 25, 2024

ecxtacy commented Jan 26, 2024

ecxtacy commented Jan 26, 2024

timabbott commented Feb 13, 2024

ecxtacy commented Feb 14, 2024

ecxtacy commented Feb 17, 2024 • edited

zulipbot commented May 2, 2024

ecxtacy commented Oct 18, 2023 •

edited

ecxtacy commented Oct 20, 2023 •

edited

ecxtacy commented Feb 17, 2024 •

edited