Feature: slide the knob up to close the calendars view on agenda

[slorber]

Currently it's possible to slide down the knob to open the calendar view.

I think it would be good UX to allow the opposite gesture, with a knob that remains visible at the bottom of the screen even after the calendars view is displayed, so that it can be dragged up.

It would be good also in the knob view to inject a boolean representing this calendars view toggled state. In my case the knob renders an arrow inside it, so if the knob is at the bottom of the screen I want to flip that arrow.

I can make an attempt to support that if this is approved. Any hint on how to make this?

[slorber]

It's pretty easy to let the knob visible at the end of the screen visible, and inject the this.state.calendarScrollable boolean prop in the renderKnob method. But it seems the knob does not fire "touchStart" when it's at the end of the screen, any idea why?

[overengineered]

Animated.ScrollView is a small area on the screen (shown below in red). In current implementation it stays fixed and as user interacts with screen it receives scrolling events.

You should to change position of it to the bottom of the agenda view for it to handle touches when knob is on the bottom.

[ahtesham-shah]

Animated.ScrollView is a small area on the screen (shown below in red). In current implementation it stays fixed and as user interacts with screen it receives scrolling events.

You should to change position of it to the bottom of the agenda view for it to handle touches when knob is on the bottom.

@overengineered Sorry but I am not able to do that can you explain in brief.

[ahtesham-shah]

@overengineered please help me

[overengineered]

src/agenda/index.js has Animated.ScrollView component, which is drawn as a red area in animation above. As you can see it stays fixed in place as user drags knob. The place on the screen for this red area is controlled by scrollPadStyle variable. You want to have 2 options for this style:

• when calendars is collapsed, draw it in it's current place
• when calendars is expanded, draw it at the bottom of the agenda

[angeldua]

@overengineered Please could you show this as an example

[overengineered]

It's not an easy implementation, so I chose to try to explain how it works, instead of attempting to implement it. My hope is that the explanation is clear enough so that someone who really needs this can build it.

[angeldua]

Thanks for your reply. What I understood from your comment is the styles should be different for the scrollPad when in expanded and collapsed state. So I am inserting different values for the top in expanded and collapsed state. Could you please confirm if that understanding is correct? const scrollPadStyle = { position: 'absolute', width: 80, height: KNOB_HEIGHT, top: scrollPadPosition, left: (this.viewWidth - 80) / 2 };

…

On Mon, Dec 7, 2020 at 9:17 PM Juozas Kontvainis ***@***.***> wrote: It's not an easy implementation, so I chose to try to explain how it works, instead of attempting to implement it. My hope is that the explanation is clear enough so that someone who really needs this can build it. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#457 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AET2HT2VSGQITM5OCIQ46GTSTT2HTANCNFSM4E3XHF2Q> .