Skip to content

Conversation

chungwwei
Copy link

@chungwwei chungwwei commented Oct 11, 2025

Fixes #1914

Before and After still

Page View

Before After
before after
After Max Sys Font
After Max Sys Font
after_max_font
Long Press View
Long Press on Public Channel Long Press on Private Channel
public-long private-long
Gesture Press Views

Gesture press in default sys font

screen-20251021-132024.mp4

Gesture press in max sys font

screen-20251021-131618.mp4

@gnprice gnprice added maintainer review PR ready for review by Zulip maintainers integration review Added by maintainers when PR may be ready for integration and removed maintainer review PR ready for review by Zulip maintainers labels Oct 15, 2025
Copy link
Member

@gnprice gnprice left a 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.

@gnprice
Copy link
Member

gnprice commented Oct 15, 2025

The screencast video is helpful, thanks.

Please also include a still screenshot. See discussion in our instructions:
https://zulip.readthedocs.io/en/latest/contributing/reviewable-prs.html#demonstrating-visual-changes

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.

@gnprice
Copy link
Member

gnprice commented Oct 17, 2025

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)

@gnprice
Copy link
Member

gnprice commented Oct 17, 2025

Oh and please see our Git style guide:
https://zulip.readthedocs.io/en/latest/contributing/commit-discipline.html#each-commit-must-be-coherent

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.

@chungwwei chungwwei force-pushed the all-channels-ui branch 3 times, most recently from 1a64215 to a3105d0 Compare October 17, 2025 16:58
@gnprice
Copy link
Member

gnprice commented Oct 18, 2025

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.

@chungwwei chungwwei force-pushed the all-channels-ui branch 3 times, most recently from 698f215 to 4ae4515 Compare October 18, 2025 12:24
@chungwwei
Copy link
Author

Thanks Greg for the review! Hopefully the commits are following the style guide now.

I believe that GestureDetector was probably not the best fit to use in the PR. Other parts of the app like the Channel Page uses InkWell, which has the rippling effect when long press.

Copy link
Member

@gnprice gnprice left a 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):

Image

Comment on lines 112 to 113
child: SizedBox(
height: 38,
Copy link
Member

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.

Copy link
Author

@chungwwei chungwwei Oct 21, 2025

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.

@chungwwei chungwwei force-pushed the all-channels-ui branch 4 times, most recently from 4f54dbf to 1f3725d Compare October 21, 2025 16:34
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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

integration review Added by maintainers when PR may be ready for integration

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Make "All channels" view more similar to "Channels"

2 participants