boolder-org / boolder-android

Boolder Android app https://www.boolder.com/en/app
MIT License
28 stars 12 forks source link

Add projects and ticked problems filters #87

Closed wang-li closed 9 months ago

wang-li commented 9 months ago

Problems could be saved as projects or ticked, but the associated filters were missing. This commit implements them.

The "Projects" and "Ticked" filters are mutually exclusive, but can be used in combination with all the other previously implemented filters, as shown in this screen recording:

https://github.com/boolder-org/boolder-android/assets/8343416/b544e882-b860-4e32-a069-1f90c79e06a9

No projects saved No ticked problems
nmondollot commented 9 months ago

This works great 👍

One possible improvement: when the tick filter is activated but not visible (see screenshot below) it would be great if the user could deactivate the filter in one tap. Solution idea: make the "clear" button always visible on the left when a filter is activated. The button should stay visible even as the user scrolls right. What do you think?

Screenshot_20240306_103813_Boolder

wang-li commented 9 months ago

Solution idea: make the "clear" button always visible on the left when a filter is activated. The button should stay visible even as the user scrolls right. What do you think?

@nmondollot Here is what I could come up with:

https://github.com/boolder-org/boolder-android/assets/8343416/3ada5cab-b767-4cbd-a9ae-718300ab03e1

I did not have any idea to avoid the "cut" to the left of the scrolling content, is it ok for you?

nmondollot commented 9 months ago

Great!

I did not have any idea to avoid the "cut" to the left of the scrolling content, is it ok for you?

One idea: use an opacity gradient

a bit like this (from boolder's website):

Capture d’écran 2024-03-06 à 16 44 45
wang-li commented 9 months ago

One idea: use an opacity gradient

As the map content can vary behind the filters bar, I cannot apply a gradient with a fixed color like on the website (with the solid white background color). I will have to deal with the rendering of the filters bar itself to make its bound fading to transparency or not, which is way less trivial

wang-li commented 9 months ago

Here is an alternative proposal, with a separator that appears when the filters bar is scrolled to the right:

https://github.com/boolder-org/boolder-android/assets/8343416/07a4bc7b-eb4a-4ab7-954a-2a2d601d5bb7

What do you think about it?

nmondollot commented 9 months ago

It looks nice! Good job 👍

Let's ship it 🚢