Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fuse recipient header into app bar for topic narrows #1039

Open
gnprice opened this issue Nov 1, 2024 · 1 comment
Open

Fuse recipient header into app bar for topic narrows #1039

gnprice opened this issue Nov 1, 2024 · 1 comment
Labels
a-design Visual and UX design a-msglist The message-list screen, except what's label:a-content
Milestone

Comments

@gnprice
Copy link
Member

gnprice commented Nov 1, 2024

Currently when viewing the message list for a topic narrow, we have an app bar that shows both the channel and the topic, and then a recipient header that shows the topic. (And both app bar and recipient header have the channel's subscription color.)

This looks kind of redundant. Especially so when the thread is long enough to fill the screen, so that the recipient header reaches the top — then the topic name gets displayed twice, one right below the other, at the top of the screen. It'd be good to eliminate the redundancy.

Vlad has made prototype designs for us that do that; see previous issue zulip/zulip-mobile#5511. Here's a screenshot: image

Design questions we'll want to resolve before implementing this include:

  • Have an example where the thread is shorter than the screen, so there's empty space between the app bar and the first message; make sure we're happy with how that looks, or adjust something. (Possibly switch to pinning the earliest message at the top instead of the latest at the bottom, so the empty space goes between the last message and the compose box.)
  • Decide how to handle showing the messages' dates, which currently live in the recipient header.

This is a post-launch issue; it doesn't represent any missing functionality, and I think the redundancy is OK for launch.

@gnprice gnprice added a-msglist The message-list screen, except what's label:a-content a-design Visual and UX design labels Nov 1, 2024
@gnprice gnprice added this to the Post-launch milestone Nov 1, 2024
@chrisbobbe
Copy link
Collaborator

  • Have an example where the thread is shorter than the screen, so there's empty space between the app bar and the first message; make sure we're happy with how that looks, or adjust something. (Possibly switch to pinning the earliest message at the top instead of the latest at the bottom, so the empty space goes between the last message and the compose box.)

The message list might also be empty, right, and in that case I think we don't show any recipient headers.

@gnprice gnprice modified the milestones: M6: Post-launch, M7: Future Nov 21, 2024
PIG208 added a commit to PIG208/zulip-flutter that referenced this issue Nov 25, 2024
This mostly follows the legacy mobile app. Notably, this changes the
title text to use normal font weight (wght=400), and breaks the text
into two rows for topic narrow.  This will eventually be superseded
by zulip#1039, so we should keep the implementation as simple as possible for
now.

There are some differences from the old design:

The legacy mobile uses different colors for the title text, depending on
the color of the channel, to make the text more visible.  We currently
don't have that, so the text just uses the ambient color.

The original design also displays the 'mute' icon when the channel is
muted:
  https://github.com/zulip/zulip-mobile/blob/a115df1f71c9dc31e9b41060a8d57b51c017d786/src/streams/StreamIcon.js#L20-L29
In the Flutter app, however, only the privacy level related
icons are displayed (e.g.: web public, invite only).  We continue to
leave out the 'mute' icon in this implementation.  This can change after
we have a concrete redesign plan.

This implementation also shows the corresponding icons for 'muted' and
'unmuted' topics; previously, only the icon for 'follow' was displayed.
And we continue using the existing icons in the Flutter app, without
trying to match with the exact ones in the old design.

References:
  https://github.com/zulip/zulip-mobile/blob/a115df1f71c9dc31e9b41060a8d57b51c017d786/src/title/TitleStream.js#L113-L141
  https://github.com/zulip/zulip-mobile/blob/a115df1f71c9dc31e9b41060a8d57b51c017d786/src/styles/navStyles.js#L5-L18

Fixes: zulip#348

Signed-off-by: Zixuan James Li <zixuan@zulip.com>
PIG208 added a commit to PIG208/zulip-flutter that referenced this issue Nov 25, 2024
This mostly follows the legacy mobile app. Notably, this changes the
title text to use normal font weight (wght=400), and breaks the text
into two rows for topic narrow.  This will eventually be superseded
by zulip#1039, so we should keep the implementation as simple as possible for
now.

There are some differences from the old design:

The legacy mobile uses different colors for the title text, depending on
the color of the channel, to make the text more visible.  We currently
don't have that, so the text just uses the ambient color.

The original design also displays the 'mute' icon when the channel is
muted:
  https://github.com/zulip/zulip-mobile/blob/a115df1f71c9dc31e9b41060a8d57b51c017d786/src/streams/StreamIcon.js#L20-L29
In the Flutter app, however, only the privacy level related
icons are displayed (e.g.: web public, invite only).  We continue to
leave out the 'mute' icon in this implementation.  This can change after
we have a concrete redesign plan.

This implementation also shows the corresponding icons for 'muted' and
'unmuted' topics; previously, only the icon for 'follow' was displayed.
And we continue using the existing icons in the Flutter app, without
trying to match with the exact ones in the old design.

References:
  https://github.com/zulip/zulip-mobile/blob/a115df1f71c9dc31e9b41060a8d57b51c017d786/src/title/TitleStream.js#L113-L141
  https://github.com/zulip/zulip-mobile/blob/a115df1f71c9dc31e9b41060a8d57b51c017d786/src/styles/navStyles.js#L5-L18

Fixes: zulip#348

Signed-off-by: Zixuan James Li <zixuan@zulip.com>
PIG208 added a commit to PIG208/zulip-flutter that referenced this issue Nov 25, 2024
This mostly follows the legacy mobile app. Notably, this changes the
title text to use normal font weight (wght=400), and breaks the text
into two rows for topic narrow.  This will eventually be superseded
by zulip#1039, so we should keep the implementation as simple as possible for
now.

There are some differences from the old design:

The legacy mobile uses different colors for the title text, depending on
the color of the channel, to make the text more visible.  We currently
don't have that, so the text just uses the ambient color.

The original design also displays the 'mute' icon when the channel is
muted:
  https://github.com/zulip/zulip-mobile/blob/a115df1f71c9dc31e9b41060a8d57b51c017d786/src/streams/StreamIcon.js#L20-L29
In the Flutter app, however, only the privacy level related
icons are displayed (e.g.: web public, invite only).  We continue to
leave out the 'mute' icon in this implementation.  This can change after
we have a concrete redesign plan.

This implementation also shows the corresponding icons for 'muted' and
'unmuted' topics; previously, only the icon for 'follow' was displayed.
And we continue using the existing icons in the Flutter app, without
trying to match with the exact ones in the old design.

References:
  https://github.com/zulip/zulip-mobile/blob/a115df1f71c9dc31e9b41060a8d57b51c017d786/src/title/TitleStream.js#L113-L141
  https://github.com/zulip/zulip-mobile/blob/a115df1f71c9dc31e9b41060a8d57b51c017d786/src/styles/navStyles.js#L5-L18

Fixes: zulip#348

Signed-off-by: Zixuan James Li <zixuan@zulip.com>
PIG208 added a commit to PIG208/zulip-flutter that referenced this issue Nov 25, 2024
This mostly follows the legacy mobile app. Notably, this changes the
title text to use normal font weight (wght=400), and breaks the text
into two rows for topic narrow.  This will eventually be superseded
by zulip#1039, so we should keep the implementation as simple as possible for
now.

There are some differences from the old design:

The legacy mobile uses different colors for the title text, depending on
the color of the channel, to make the text more visible.  We currently
don't have that, so the text just uses the ambient color.

The original design also displays the 'mute' icon when the channel is
muted:
  https://github.com/zulip/zulip-mobile/blob/a115df1f71c9dc31e9b41060a8d57b51c017d786/src/streams/StreamIcon.js#L20-L29
In the Flutter app, however, only the privacy level related
icons are displayed (e.g.: web public, invite only).  We continue to
leave out the 'mute' icon in this implementation.  This can change after
we have a concrete redesign plan.

This implementation also shows the corresponding icons for 'muted' and
'unmuted' topics; previously, only the icon for 'follow' was displayed.
And we continue using the existing icons in the Flutter app, without
trying to match with the exact ones in the old design.

References:
  https://github.com/zulip/zulip-mobile/blob/a115df1f71c9dc31e9b41060a8d57b51c017d786/src/title/TitleStream.js#L113-L141
  https://github.com/zulip/zulip-mobile/blob/a115df1f71c9dc31e9b41060a8d57b51c017d786/src/styles/navStyles.js#L5-L18

Fixes: zulip#348

Signed-off-by: Zixuan James Li <zixuan@zulip.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a-design Visual and UX design a-msglist The message-list screen, except what's label:a-content
Projects
Status: No status
Development

No branches or pull requests

2 participants