Make bottom sheet not modal

boolder-org / boolder-android

Boolder Android app https://www.boolder.com/en/app

MIT License

28 stars 12 forks source link

Make bottom sheet not modal #32

Closed wang-li closed 1 year ago

wang-li commented 1 year ago

The map was not interactive when a boulder detail was shown, because the bottom sheet was implemented as a modal bottom sheet.

The previous ProblemBSFragment has been changed to a ProblemView custom view, so that it can be part of the bottom sheet layout.

https://github.com/boolder-org/boolder-android/assets/8343416/9ca559b1-7169-4472-b76b-5667c73fb3b3

Resolves #18

nmondollot commented 1 year ago

Awesome!!

Before merging, I think we should improve the mechanism to dismiss the modal. In the current state, it's not super clear to the user that they should swipe down.

Possible solutions:

add a close button
detect when user taps on the map (not on a problem, obviously)
- we do it on iOS, although the implementation is a bit brittle (we use queryRenderedFeatures with a if/else statement)

nmondollot commented 1 year ago

Other remarks (less important):

we could improve the UI when the photo is loading: for example, use a grey background (instead of white) and display a spinner
when switching to another problem, the problem line is visible for a few milliseconds after the photo disappeared, which looks a bit weird. Here is a screenshot taken exactly at the right time:
- is it possible to make the line disappear at the same time as the photo?

wang-li commented 1 year ago

I added the ability to dismiss the bottom sheet by clicking on the map's background, thanks for pointing to the iOS counterpart code 👍 Another commit makes sure that the spinner is shown over a gray background when a photo is loading.

I am a bit more skeptical about the screenshot that you got, because according to the code, the problem start and its associated line are cleared before the next image will start loading, then they are displayed only upon a successful request 😅

We can have a short call about it if you want to discuss it further 😉

nmondollot commented 1 year ago

Sorry for the delay! I was on vacation :)

This looks great 👍

I am a bit more skeptical about the screenshot that you got, because according to the code, the problem start and its associated line are cleared before the next image will start loading, then they are displayed only upon a successful request 😅

Ok, maybe it's just a problem with the virtual device I'm using for my tests. Let's forget about it for now.