New design for PM and stream recipient bars. #23782

amanagr · 2022-12-07T19:06:00Z

This PR is aimed towards making significant progress in the direction of #22021.
Figma design was a great source used for finalizing some of the details on space between elements in this PR.
The changes that are mentioned in the issue but are not included in the PR are:

The recipient bar interactive icons like message like, edit pencil etc.
I didn't change the font size of text to match the new design, but did increase the height of the recipient bar.

amanagr · 2022-12-07T19:16:36Z

Ignore the CI failures for now. Once the design is finalized, I can easily take care of it now.

alya · 2022-12-07T20:25:33Z

It's cool being able to play around with this! Here are the issues I spotted...

alya · 2022-12-07T20:28:04Z

The lines on the sides curve in after each message, rather than going straight down.

alya · 2022-12-07T20:28:45Z

I noticed that this removes the stream color sidebar. While that's definitely the goal, integrating that change is currently blocked on #9910, so I guess I don't know if it's best to do that here or leave it as a follow-up.

alya · 2022-12-07T20:33:14Z

I noticed some awkward behaviors at the top of the message feed:

For some reason when there are two header bars at the very top, they aren't quite aligned horizontally.

In the same screenshot, there's an extra vertical line in the top right. You can also see this with just one header bar:

With some playing around with scrolling, I got into a state where the header bar is cut off in an awkward way:

It is possible to get a significant chunk of a message above the top header bar, which I don't think you can do on main, and it seems undesirable.

alya · 2022-12-07T20:34:57Z

The globe vertical alignment definitely looks too low to me; not sure about the other icons.

amanagr · 2022-12-08T00:22:53Z

The icons in your screenshot look different from mine for some reason.

amanagr · 2022-12-08T00:43:36Z

Updated the PR to fix the 1st bug you noticed.

alya · 2022-12-08T05:54:14Z

The icons in your screenshot look different from mine for some reason.

Huh, maybe a zoom issue?

terpimost · 2022-12-10T21:45:38Z

Good progress. I see the horizontal spacing is a bit different. It just feels that there is too much space for the icon:

Comparing with a correct icon in PM I think we should move icon 1px left and the text 2 px left:

For some reason switching the theme makes headers stuck in the previous theme. But reloading the page resolves that:
(could be some glitch on my end or some race condition)

About the background color of the PMs. Let's reevaluate that once we can see messages on the proper dark background instead of this bright blue.

@alya I highly recommend to have dark theme background change together (close) to merging that

terpimost · 2022-12-10T21:54:14Z

I'm not sure the color collation is correct for some cases. For example if I take hashtag icon color from this (# 9cbcda):

and apply it in my example:

the calculated bg color for the bar is # 1f262c, while on this PR calculation is # 21282e

amanagr · 2022-12-14T12:24:03Z

@terpimost addressed all your concerns. Please review again!

static/styles/message_recipient_bar.css

amanagr · 2023-02-15T16:05:46Z

wow, didn't realize this is difficult to rebase now.

terpimost · 2023-02-16T04:42:55Z

I can't review it due to error

amanagr · 2023-02-16T09:01:44Z

Yeah, it is not ready for review due to rebase conflicts, I am working on it right now, I have to basically rewrite the whole PR.

amanagr · 2023-02-16T17:17:00Z

@terpimost this should be ready for another review now.

terpimost · 2023-02-17T04:49:41Z

I still see some problems

What should I do?

stream_privacy template has conditions to show stream privacy icon for all the cases, so we use it here since we also want to show `#` icon for public streams.

web/src/stream_color.js

timabbott · 2023-04-11T05:31:12Z

web/src/zcommand.js

@@ -78,6 +80,7 @@ export function switch_to_dark_theme() {
        command: "/night",
        on_success(data) {
            dark_theme.enable();
+            message_lists.update_recipient_bar_background_color();


These slash commands shouldn't be doing UI updates at all, should they? I would expect the server_events system to be responsible for them.

My guess is we have dark_theme.enable(); here so that user feels that the color change to dark theme was quick. Since, dark_theme.enable(); is here, I need to do message_lists.update_recipient_bar_background_color(); here as well.

OK; I suppose we can add a comment. In any case, we could look at making dark_theme.enable call message_lists.update_recipient_bar_background_color as a follow-up I suppose.

web/src/click_handlers.js

web/styles/zulip.css

Following important changes are being made here: * color_class lib is removed since it not used anywhere now. * We don't need the `dark_background` class since the background color is already adjusted based on color scheme. So, all instances of it being used is removed.

This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.

This commit doesn't modify the lock and hashtag icon in settings.

amanagr · 2023-04-11T06:12:30Z

I made an additional change:

since I reverted it as part of Evy's PR I think, but it fixes the alignment now for date and time.

timabbott · 2023-04-11T06:21:06Z

This looks great, tagging to merge once CI passes; I'll deploy main including this to chat.zulip.org tomorrow. Thanks for all the work on this @amanagr and @evykassirer!

(#23782 (comment) seems pretty minor as a code cleanup/comment tweak, so let's leave that for a follow-up -- given it's not a functional change and is mostly a preexisting detail I noticed, there's no reason to block on it.)

timabbott · 2023-04-11T06:24:55Z

Do we need an issue for updating the stream privacy icon (i.e. the last commit work) for the settings pages? Could make sense for @sahil839 to take over that portion of it.

amanagr · 2023-04-11T06:31:15Z

I will just open a PR for it, it seems like a simple delete.

It’s unused since commit 7e47300 (zulip#23782). Signed-off-by: Anders Kaseorg <anders@zulip.com>

It’s unused since commit 7e47300 (#23782). Signed-off-by: Anders Kaseorg <anders@zulip.com>

It’s unused since commit 7e47300 (zulip#23782). Signed-off-by: Anders Kaseorg <anders@zulip.com>

zulipbot added the size: XL label Dec 7, 2022

amanagr changed the title ~~New desing for PM and stream recipient bars.~~ New design for PM and stream recipient bars. Dec 7, 2022

amanagr mentioned this pull request Dec 7, 2022

Port private messages to new design #23684

Closed

amanagr force-pushed the msg_recipient_redesign branch from 586e037 to af4b250 Compare December 8, 2022 00:40

amanagr force-pushed the msg_recipient_redesign branch from af4b250 to b3b675d Compare December 14, 2022 12:23

zulipbot added the has conflicts label Dec 15, 2022

amanagr force-pushed the msg_recipient_redesign branch from b3b675d to ad46016 Compare December 15, 2022 07:50

zulipbot removed the has conflicts label Dec 15, 2022

amanagr mentioned this pull request Dec 19, 2022

floating_recipient_bar: Replace with sticky header. #23900

Merged

zulipbot added the has conflicts label Jan 4, 2023

andersk reviewed Jan 17, 2023

View reviewed changes

static/styles/message_recipient_bar.css Outdated Show resolved Hide resolved

amanagr force-pushed the msg_recipient_redesign branch from ad46016 to 463349f Compare February 16, 2023 15:28

zulipbot removed the has conflicts label Feb 16, 2023

amanagr added 3 commits April 11, 2023 05:20

recipient_row: Use generic template to show stream icon.

c469aca

stream_privacy template has conditions to show stream privacy icon for all the cases, so we use it here since we also want to show `#` icon for public streams.

drafts: Use generic template to show stream icon.

915e155

recipient_row: Set color of privacy icon as a shade of stream color.

3a1c2ee