-
Notifications
You must be signed in to change notification settings - Fork 343
all_channels: Replace three dot menu with long press gesture and add on tap to feed #1915
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
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks @chungwwei for writing this PR! Generally this looks good. Various small comments below.
The screencast video is helpful, thanks. Please also include a still screenshot. See discussion in our instructions: The interactions in the screencast are somewhat hard to follow, because the viewer can't see where on the screen you were tapping. When you take a screen recording, there's an option to have it show touches on the screen (here's Android docs); you should basically always enable that option when making a screencast to demonstrate some UI behavior. |
Thanks for the revision. One reply in a subthread above: #1915 (comment) Please also add a screenshot, and a screen recording with touches visible, so that we can review the visual changes. See details in my comment above: #1915 (comment) |
Oh and please see our Git style guide: In this PR, the two commits should be squashed together, rather than have one commit for the first revision and then another commit that adjusts those changes. |
1a64215
to
a3105d0
Compare
Thanks for the revision. Please see our Git style guide (linked above and in our README) for how to write clear commit messages. See also the reply above at #1915 (comment) . In the screenshots, the toggles are much too close to the right edge of the screen. (Notice that they're visually much closer than the content at the left is to the left edge, and much closer than the three-dots icon is in main.) They should get appropriate padding. |
698f215
to
4ae4515
Compare
Thanks Greg for the review! Hopefully the commits are following the style guide now. I believe that |
508fa04
to
173bf47
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the revision, and the updated screenshots. Some comments below.
The commit messages are mostly good now, but the body should get line-wrapped. See this section:
https://zulip.readthedocs.io/en/latest/contributing/commit-discipline.html#formatting-guidelines
To demonstrate why, here's how the first commit message looks when I'm reviewing the changes (with git log --stat -p
):

lib/widgets/all_channels.dart
Outdated
child: SizedBox( | ||
height: 38, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hmm, I just noticed this part — a fixed height like this can't be right.
Try setting your system's font size setting to larger text, and you'll see why.
This is also too short. Touch targets should be at least 44px high so it's not too difficult to tap the right one. In your screenshots, these rows are getting shorter; they should stay the same height unless there's a clear reason we're choosing to change the height.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🤯Ahh, I didn’t notice the subtle details. The text would get truncated if system font size is large enough.
The motivation for the SizedBox
was to keep the row height same for all row item even when the toggle isn’t shown and/or when text gets too large. Two other solutions I thought of
// a bit hacky I feel
IgnorePointer(
ignoring: !hasContentAccess,
child: Opacity(
opacity: hasContentAccess ? 1 : 0,
child: _SubscribeToggle(channel: channel)
)
)
/*
Maintain layout whether or not the toggle is shown.
SizedBox height is set to 40 because the top and bottom padding
of the row is 2 each, which makes each row at least 44px high.
The Row takes the height of the Text when text gets too large.
Width is set to 52 to match the width of the toggle, so long text doesn't
extend all the way before long text ellipsis
*/
hasContentAccess ? _SubscribeToggle(channel: channel) : const SizedBox(height: 40, width: 52),
I believe height is currently 40. Touch target should be at least 44 px high can be fixed by adding top and bottom padding.
The other thing I just noticed is that, the row height gets taller when the channel name is too long and/or font is large. I should restrict text to one line and ellipsis on overflow just like how the Channel Page does it.
4f54dbf
to
1f3725d
Compare
Make the All channels view UI consistent with the Channels view. Specifically, onTap on a row item should lead to channel feed page and onLongPress should launch the channel bottom sheet. - all_channels: Add SizedBox(height: 40, width: 52) as a placeholder when toggle shouldn't shown. The top and bottom padding at 2 will make the Row height at least 44 px. Width is set to 52 to match the width of the toggle, so long text wouldn't extend all the way before text ellipsis - all_channels: Add on tap to channel feed if user has content access - all_channels: Add additional end padding for row item, also setting top and bottom padding to 2 so that widget height is at least 44px Fixes zulip#1914
bottom sheet MarkChannelAsReadButton, TopicListButton, and ChannelFeedButton should not be displayed for a user without content access, as the server won't provide any information the user doesn't have permission to view.
1f3725d
to
e775639
Compare
Fixes #1914
Before and After still
Page View
After Max Sys Font
Long Press View
Gesture Press Views
Gesture press in default sys font
screen-20251021-132024.mp4
Gesture press in max sys font
screen-20251021-131618.mp4