search

Teleopti / styleguide

Teleopti styleguide
http://teleopti.github.io/styleguide/
MIT License
5 stars 24 forks source link

Calendar picker improvement and bugs fix #419

Closed Halomaple closed 6 years ago

TheRockman commented 6 years ago

tab animated content

feels a bit strange to me, but i am aware that there are VERY different preferences on how to pick date ranges 😀

Halomaple commented 6 years ago

Maybe the focus style is not so clear that doesn't make user aware of what date (From or To) is selecting. I will make a commit and add a transition between them to make it clearer.

Halomaple commented 6 years ago

Now with clearer selection: calendar-picker

In previous design, we are guessing what the selected date should be. We set it to start date if it is nearer to start date and we set it to end date if it is nearer to end date and in some case we have the start-end loop.

For example, in the following gif, I selected 8th - 14th April and then I want change it to 15th - 21th April. But I didn't succeed cause the date picker automatically set selected 15th to be an end date instead of a start date and it does same thing when I click 21th. (In this step we are guessing the intention of third click and adjust the range in a way we think it should - it is an end date. But in some cases it is not, user thinks it is an start date).

previous_picker1

I successfully changed the range to 15th - 21th by clicking twice on 15th (In this step we have start-end loop) and make another click on 21th.

Then I want to change the range to 15th - 17th. Now the highlighting date is 21th which is an end date making me think that it is currently selecting end date. So I change the end date to 17th in order to get a range 15th - 17th. But it doesn't work, it will set it to start date and I got 17th to 21th. At this state, I don't know what date I am selecting. Sometimes it is a start and sometimes it is an end (It is very hard and very unfriendly for user to calculate and compare the distance between pick date and start date or pick date and end date to let user be aware of what date he/she is selecting. What if the range is large?). Finally I need to click 17th twice and then click 15th to get 15th - 17th. previous_picker2

In all these logics, I think we are kind of over-designed to determine what the picked date should be which will not work in some cases and user is hard to be aware of that and will get very confused. Always looping start->end->start->end... or letting user to choose start or end will make it much clearer and simpler.