Skip to content

Fuse recipient header into app bar for topic narrows #1039

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

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.

Related issues

@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 <[email protected]>
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 <[email protected]>
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 <[email protected]>
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 <[email protected]>
PIG208 added a commit to PIG208/zulip-flutter that referenced this issue Dec 4, 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 do that, so the text just uses the ambient color.

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 <[email protected]>
PIG208 added a commit to PIG208/zulip-flutter that referenced this issue Dec 4, 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 do that, so the text just uses the ambient color.

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 <[email protected]>
PIG208 added a commit to PIG208/zulip-flutter that referenced this issue Dec 5, 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 do that, so the text just uses the ambient color.

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 <[email protected]>
PIG208 added a commit to PIG208/zulip-flutter that referenced this issue Dec 5, 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 do that, so the text just uses the ambient color.

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

Signed-off-by: Zixuan James Li <[email protected]>
PIG208 added a commit to PIG208/zulip-flutter that referenced this issue Dec 5, 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 do that, so the text just uses the ambient color.

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

Signed-off-by: Zixuan James Li <[email protected]>
PIG208 added a commit to PIG208/zulip-flutter that referenced this issue Dec 6, 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 do that, so the text just uses the ambient color.

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

Signed-off-by: Zixuan James Li <[email protected]>
PIG208 added a commit to PIG208/zulip-flutter that referenced this issue Dec 10, 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 do that, so the text just uses the ambient color.

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

Signed-off-by: Zixuan James Li <[email protected]>
PIG208 added a commit to PIG208/zulip-flutter that referenced this issue Dec 10, 2024
PIG208 added a commit to PIG208/zulip-flutter that referenced this issue Dec 10, 2024
This will eventually be superseded by zulip#1039, so we should keep the
implementation as simple as possible for now.

The two-line app bar idea comes from the legacy mobile app.  This gives
us a place to show the topic visibility policy on the app bar.

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

Signed-off-by: Zixuan James Li <[email protected]>
PIG208 added a commit to PIG208/zulip-flutter that referenced this issue Dec 10, 2024
This will eventually be superseded by zulip#1039, so we should keep the
implementation as simple as possible for now.

The two-line app bar idea comes from the legacy mobile app.  This gives
us a place to show the topic visibility policy on the app bar.

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

Signed-off-by: Zixuan James Li <[email protected]>
PIG208 added a commit to PIG208/zulip-flutter that referenced this issue Dec 10, 2024
This will eventually be superseded by zulip#1039, so we should keep the
implementation as simple as possible for now.

The two-line app bar idea comes from the legacy mobile app.  This gives
us a place to show the topic visibility policy on the app bar.

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

Signed-off-by: Zixuan James Li <[email protected]>
PIG208 added a commit to PIG208/zulip-flutter that referenced this issue Dec 11, 2024
This will eventually be superseded by zulip#1039, so we should keep the
implementation as simple as possible for now.

The two-line app bar idea comes from the legacy mobile app.  This gives
us a place to show the topic visibility policy on the app bar.

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

Signed-off-by: Zixuan James Li <[email protected]>
PIG208 added a commit to PIG208/zulip-flutter that referenced this issue Dec 11, 2024
This will eventually be superseded by zulip#1039, so we should keep the
implementation as simple as possible for now.

The two-line app bar idea comes from the legacy mobile app.  This gives
us a place to show the topic visibility policy on the app bar.

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

Signed-off-by: Zixuan James Li <[email protected]>
gnprice pushed a commit to PIG208/zulip-flutter that referenced this issue Dec 11, 2024
This will eventually be superseded by zulip#1039, so we should keep the
implementation as simple as possible for now.

The two-line app bar idea comes from the legacy mobile app.  This gives
us a place to show the topic visibility policy on the app bar.

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

Signed-off-by: Zixuan James Li <[email protected]>
shivanshsharma13 pushed a commit to shivanshsharma13/zulip-flutter that referenced this issue Dec 13, 2024
This will eventually be superseded by zulip#1039, so we should keep the
implementation as simple as possible for now.

The two-line app bar idea comes from the legacy mobile app.  This gives
us a place to show the topic visibility policy on the app bar.

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

Signed-off-by: Zixuan James Li <[email protected]>
chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue Jan 24, 2025
…narrow

With zulip#1039 "Fuse recipient header into app bar for topic narrows",
this setup will likely become invalid. It assumes that a topic
recipient header can be found in a topic-narrow message list.

Switching to the combined-feed narrow would break tests that use a
muted topic, because the topic's message(s) are excluded in that
narrow, so there wouldn't be a recipient header to tap.

Instead, trigger the topic action sheet from the topic-narrow app
bar.
chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue Jan 24, 2025
…narrow

With zulip#1039 "Fuse recipient header into app bar for topic narrows",
this setup will likely become invalid. It assumes that a topic
recipient header can be found in a topic-narrow message list.

Switching to the combined-feed narrow would break tests that use a
muted topic, because the topic's message(s) are excluded in that
narrow, so there wouldn't be a recipient header to tap.

Instead, trigger the topic action sheet from the topic-narrow app
bar.
chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue Jan 24, 2025
…narrow

With zulip#1039 "Fuse recipient header into app bar for topic narrows",
this setup will likely become invalid. It assumes that a topic
recipient header can be found in a topic-narrow message list.

Switching to the combined-feed narrow would break tests that use a
muted topic, because the topic's message(s) are excluded in that
narrow, so there wouldn't be a recipient header to tap.

Instead, trigger the topic action sheet from the topic-narrow app
bar.
chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue Jan 28, 2025
…narrow

With zulip#1039 "Fuse recipient header into app bar for topic narrows",
this setup will likely become invalid. It assumes that a topic
recipient header can be found in a topic-narrow message list.

Switching to the combined-feed narrow would break tests that use a
muted topic, because the topic's message(s) are excluded in that
narrow, so there wouldn't be a recipient header to tap.

Instead, trigger the topic action sheet from the topic-narrow app
bar.
rishichirchi pushed a commit to rishichirchi/zulip-flutter that referenced this issue Feb 7, 2025
…narrow

With zulip#1039 "Fuse recipient header into app bar for topic narrows",
this setup will likely become invalid. It assumes that a topic
recipient header can be found in a topic-narrow message list.

Switching to the combined-feed narrow would break tests that use a
muted topic, because the topic's message(s) are excluded in that
narrow, so there wouldn't be a recipient header to tap.

Instead, trigger the topic action sheet from the topic-narrow app
bar.
github-actions bot pushed a commit that referenced this issue Feb 12, 2025
…narrow

With #1039 "Fuse recipient header into app bar for topic narrows",
this setup will likely become invalid. It assumes that a topic
recipient header can be found in a topic-narrow message list.

Switching to the combined-feed narrow would break tests that use a
muted topic, because the topic's message(s) are excluded in that
narrow, so there wouldn't be a recipient header to tap.

Instead, trigger the topic action sheet from the topic-narrow app
bar.
PIG208 added a commit to PIG208/zulip-flutter that referenced this issue Apr 30, 2025
You will see that "TOPICS" is not aligned to the middle part of the app
bar, that's because we haven't got to zulip#1039 yet.
PIG208 added a commit to PIG208/zulip-flutter that referenced this issue May 1, 2025
You will see that "TOPICS" is not aligned to the middle part of the app
bar, that's because we haven't got to zulip#1039 yet.
PIG208 added a commit to PIG208/zulip-flutter that referenced this issue May 1, 2025
You will see that "TOPICS" is not aligned to the middle part of the app
bar, that's because we haven't got to zulip#1039 yet.
PIG208 added a commit to PIG208/zulip-flutter that referenced this issue May 1, 2025
You will see that "TOPICS" is not aligned to the middle part of the app
bar, that's because we haven't got to zulip#1039 yet.
PIG208 added a commit to PIG208/zulip-flutter that referenced this issue May 2, 2025
You will see that "TOPICS" is not aligned to the middle part of the app
bar, that's because we haven't got to zulip#1039 yet.
PIG208 added a commit to PIG208/zulip-flutter that referenced this issue May 6, 2025
The topic-list page app bar should match the Figma design except for its
height.  That part needs to be coordinated with other pages.

Also on the topic-list page app bar, the icon "chveron_down.svg"
(originally "chveron-down-16.svg") comes from:
  https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6820-36184&m=dev

and not the "Icons" page, since the "chveron-down" there
appears to be different from the one on the topic list page design.

We also leave out the new topic button and topic filtering.  Those are
out-of-scope for zulip#1158.

---

On the message-list page, "TOPICS" is not aligned to the middle part
of the app bar, that's because we haven't got to zulip#1039 yet.

---

The topic-list implementation is quite similar to parts of inbox page
and message-list page.  Therefore, we structure the code to make them
look similar to compare for changes side-by-side to help with reviewing
what has changed.

Figma design:
  https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6819-35869&m=dev
PIG208 added a commit to PIG208/zulip-flutter that referenced this issue May 6, 2025
The topic-list page app bar should match the Figma design except for its
height.  That part needs to be coordinated with other pages.

Also on the topic-list page app bar, the icon "chveron_down.svg"
(originally "chveron-down-16.svg") comes from:
  https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6820-36184&m=dev

and not the "Icons" page, since the "chveron-down" there
appears to be different from the one on the topic list page design.

We also leave out the new topic button and topic filtering.  Those are
out-of-scope for zulip#1158.

---

On the message-list page, "TOPICS" is not aligned to the middle part
of the app bar, that's because we haven't got to zulip#1039 yet.

---

The topic-list implementation is quite similar to parts of inbox page
and message-list page.  Therefore, we structure the code to make them
look similar to compare for changes side-by-side to help with reviewing
what has changed.

Figma design:
  https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6819-35869&m=dev
PIG208 added a commit to PIG208/zulip-flutter that referenced this issue May 8, 2025
The topic-list page app bar should match the Figma design except for its
height.  That part needs to be coordinated with other pages.

Also on the topic-list page app bar, the icon "chveron_down.svg"
(originally "chveron-down-16.svg") comes from:
  https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6820-36184&m=dev

and not the "Icons" page, since the "chveron-down" there
appears to be different from the one on the topic list page design.

We also leave out the new topic button and topic filtering.  Those are
out-of-scope for zulip#1158.

---

On the message-list page, "TOPICS" is not aligned to the middle part
of the app bar, that's because we haven't got to zulip#1039 yet.

---

The topic-list implementation is quite similar to parts of inbox page
and message-list page.  Therefore, we structure the code to make them
look similar to compare for changes side-by-side to help with reviewing
what has changed.

Figma design:
  https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6819-35869&m=dev
PIG208 added a commit to PIG208/zulip-flutter that referenced this issue May 8, 2025
The topic-list page app bar should match the Figma design except for its
height.  That part needs to be coordinated with other pages.

Also on the topic-list page app bar, the icon "chveron_down.svg"
(originally "chveron-down-16.svg") comes from:
  https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6820-36184&m=dev

and not the "Icons" page, since the "chveron-down" there
appears to be different from the one on the topic list page design.

We also leave out the new topic button and topic filtering.  Those are
out-of-scope for zulip#1158.

---

On the message-list page, "TOPICS" is not aligned to the middle part
of the app bar, that's because we haven't got to zulip#1039 yet.

---

The topic-list implementation is quite similar to parts of inbox page
and message-list page.  Therefore, we structure the code to make them
look similar to compare for changes side-by-side to help with reviewing
what has changed.

Figma design:
  https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6819-35869&m=dev
PIG208 added a commit to PIG208/zulip-flutter that referenced this issue May 10, 2025
The topic-list page app bar should match the Figma design except for its
height.  That part needs to be coordinated with other pages.

Also on the topic-list page app bar, the icon "chveron_down.svg"
(originally "chveron-down-16.svg") comes from:
  https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6820-36184&m=dev

and not the "Icons" page, since the "chveron-down" there
appears to be different from the one on the topic list page design.

We also leave out the new topic button and topic filtering.  Those are
out-of-scope for zulip#1158.

---

On the message-list page, "TOPICS" is not aligned to the middle part
of the app bar, that's because we haven't got to zulip#1039 yet.

---

The topic-list implementation is quite similar to parts of inbox page
and message-list page.  Therefore, we structure the code to make them
look similar to compare for changes side-by-side to help with reviewing
what has changed.

Figma design:
  https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6819-35869&m=dev
PIG208 added a commit to PIG208/zulip-flutter that referenced this issue May 13, 2025
The topic-list page app bar should match the Figma design except for its
height.  That part needs to be coordinated with other pages.

Also on the topic-list page app bar, the icon "chveron_down.svg"
(originally "chveron-down-16.svg") comes from:
  https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6820-36184&m=dev

and not the "Icons" page, since the "chveron-down" there
appears to be different from the one on the topic list page design.

We also leave out the new topic button and topic filtering.  Those are
out-of-scope for zulip#1158.

---

On the message-list page, "TOPICS" is not aligned to the middle part
of the app bar, that's because we haven't got to zulip#1039 yet.

---

The topic-list implementation is quite similar to parts of inbox page
and message-list page.  Therefore, we structure the code to make them
look similar to compare for changes side-by-side to help with reviewing
what has changed.

Figma design:
  https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6819-35869&m=dev
PIG208 added a commit to PIG208/zulip-flutter that referenced this issue May 14, 2025
The topic-list page app bar should match the Figma design except for its
height.  That part needs to be coordinated with other pages.

Also on the topic-list page app bar, the icon "chveron_down.svg"
(originally "chveron-down-16.svg") comes from:
  https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6820-36184&m=dev

and not the "Icons" page, since the "chveron-down" there
appears to be different from the one on the topic list page design.

We also leave out the new topic button and topic filtering.  Those are
out-of-scope for zulip#1158.

---

On the message-list page, "TOPICS" is not aligned to the middle part
of the app bar, that's because we haven't got to zulip#1039 yet.

---

The topic-list implementation is quite similar to parts of inbox page
and message-list page.  Therefore, we structure the code to make them
look similar to compare for changes side-by-side to help with reviewing
what has changed.

Figma design:
  https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6819-35869&m=dev
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