search

mattermost / mattermost-mobile

Next generation iOS and Android apps for Mattermost in React Native
https://about.mattermost.com/
Apache License 2.0
2.25k stars 1.36k forks source link

Horizontal scrolling in Code panel #7821

Open francislavoie opened 9 months ago

francislavoie commented 9 months ago

Summary

When the code panel is open, the code itself must be touched to scroll.

This means if you open a code block with only one or two lines of text (whose lines are very long), I have to my grip to move my thumb to the top of the screen to scroll the code.

Environment Information

Steps to reproduce

Send yourself a code block like this:

here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text 
here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text here is some extremely long lines of text

Then tap on the code block, opening the Code panel (is there a better name for this view?) and try to swipe in the empty space on the screen to scroll the code to the right. See that it doesn't scroll or react to any touch events.

Expected behavior

It should be possible to use the empty space in the code panel to scroll.

Possible fixes

The touch target for scrolling should be the full height of the panel, so that it reacts to swiping regardless of where the code is touched.

Alternatively, the panel could be shrunk down to only be as tall as the code, and aligned at the bottom of the screen, so it's closer to the thumb. Though, the touch target can still be extremely small if there's only one line of text, so it can be frustrating to try to land your thumb right on the line to scroll it.

I think https://github.com/mattermost/mattermost-mobile/issues/7659 is related, it also has to do with touch events in the Code panel; it doesn't allow selecting of code, which makes it impossible to partially copy text from code blocks.

amyblais commented 9 months ago

Are you (or anyone following this issue) interested in opening a pull request to implement this improvement?

amyblais commented 8 months ago

Thanks, appreciate your feedback @francislavoie,

Would you like to contribute this in the feature idea forum so it can be discussed, upvoted and considered for a help wanted ticket?

Please include a link back to this GitHub issue. If you're interested in implementing, please say so and we'll prioritize the review.

You get 10 votes in the feature idea forum, and each one influences the future of the project.