Add topic-list page #1500
Open
Add topic-list page #1500
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
PIG208
force-pushed
the
pr-topics
branch
2 times, most recently
from
a2d1174 to
e8fb3c3
Compare
|
Updated the PR to implement a intentional deviation from the Figma design on aligning items, discussed in #mobile-team > topic list item alignment @ 💬. |
|
For the "small" and "large" screenshots, I think it would look much better if the checkmarks and indicators on the right scaled too. |
|
Let's name the option "List of topics". I think that's a bit easier to parse, and it's what we're currently testing for the web app UI. |
Seems reasonable. I'd want to clamp the scale factor, for the reasons described at #1023. (For existing examples of implementing that, search for |
|
Thanks both! Updated the PR and the screenshots. I picked 1.5 to be the I clamped only the icons, though, not the topic name text. Because I think #1023 applies to scaling relatively unimportant information. |
|
Works for me, thanks! |
|
The app bar's back button and "Channel feed" button are broken; sometimes when I tap it doesn't respond and this gets logged: Looks like an upstream regression, flutter/flutter#168445, that's being worked on. Edit: Oh, I guess that issue's description says "app crash"—the app isn't crashing for me, but I am seeing "setState() or markNeedsBuild() called when widget tree was locked." like in a stack trace posted there: flutter/flutter#168445 (comment) |
|
We should use less than 28px padding at the start of each topic row. From the issue description:
|
|
For the layout, if we use an empty box as a placeholder for an icon when it's absent, it should scale exactly the same way as the icon does. See the start of the topic text being misaligned in the "large" screenshot: screenshot
|
|
I started a discussion about the chevron-down icon in the app bar: #mobile-team > topic list: chevron-down icon in app bar? @ 💬 |
|
Thanks for the review! I adjusted the padding at the start of each row to 6px (matching the start padding the "pinned" icon would have), and addressed the other issues. The screenshots have been updated.
Thanks for looking into this! Yeah, for this one, we might need flutter/flutter#168546 to land first. |
For the topic-list page app bar, we leave out the icon "chveron_down.svg" since it's related to a new design (zulip#1039) we haven't implemented yet. This also why "TOPICS" is not aligned to the middle part of the app bar on the message-list page. We also leave out the new topic button and topic filtering, which are out-of-scope for zulip#1158. 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
The icon was taken from CZO discussion: https://chat.zulip.org/#narrow/channel/530-mobile-design/topic/Topic.20list.20in.20channel/near/2140324 Fixes: zulip#1158 Co-authored-by: Zixuan James Li <[email protected]>
AFAICT the symptoms of that issue don't reproduce in a release build; the buttons work fine the first time. (I spent a few minutes just now trying to reproduce, in order to evaluate whether the issue will affect the upcoming beta v0.0.29.) In a debug build, I also see it on other screens even without this PR. So definitely an annoyance in dev — plus might be a sign of further bugginess that's just harder to spot the symptoms of — and will be good to see fixed upstream. But I don't think it needs to interact with merging this PR. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Stacked on top of #1491.
Some non-goals of this change are deferred to #1499. In this implementation, we fetch the topics but do not handle all events to receive live-updates. It's expected that when topics are resolved/unresolved or moved, or when new messages arrived, the changes to the topic-list will not be seen until the next fetch.
We also skip thinning down the app bar, since that will require work on app bars on message-list page too.
The PR is structured to encourage side-by-side comparison with similar existing code. Namely
_TopicItemfromlib/widgets/inbox.dartandMessageListAppBarTitle.Fixes: #1158
screenshots (taken on my Android device, hence the left-aligned app bar!)
debugDefaultTargetPlatformOverride = TargetPlatform.iOS: