metrics-mvp
metrics-mvp copied to clipboard
Add clear stops button
Fixes #438.
Proposed changes
Add a clear stops button.
It will clear the selected stops. However, the URL doesn't change. Ideally, the URL should be updated as well. I guess redux-first-router should be able to handle it somehow. Not sure how to do it though. Look for any feedback and suggestions.
Also, when the screen becomes smaller, it is not well responsive. See the screenshot below. I will need to address this as well.
Screenshot
...
This has been sitting around for a while. @zachzwy , are you OK to finish this?
I'll keep working on this PR. @hathix
The below screenshot is a very react-select native "clear" button (An "X" icon right next to the select content).
It looks good until I revisit the issue #438 we are trying to solve. I believe the goal here to enable user to easily go back to the route overview screen. With this proposal, user needs to click "X" icon twice for from stop and to stop, which I don't think is a good idea.
We might want to think of a different UI to enable this. Or, I actually believe clicking the breadcrumb button is a pretty good way to achieve this goal.
What do you think? @exxonvaldez @hathix
Hmm, there may not be any quick solution here. Seems like the most intuitive thing is to group the stop pickers together into a "fieldset" (in HTML terms) aka outlined inputs (in Material UI terms). Then you can associate a clear button with the entire fieldset.
As for quick fixes, the react-selects with clear buttons look good. If the user clears the "to" picker or the "from" picker, then the UI will be showing the route summary (because trip summary requires both pickers to have selections), so the route summary is just one click away, although it's not obvious.
The breadcrumbs are working to go back to the route summary, but are also not obvious. There are actually two breadcrumb links that can work -- one to go to the route summary with no direction chosen, and one for the route summary in a given direction.
The browser back button also works to go the route summary, if the user didn't follow a direct link with stops preselected.
Finally, there's the new #469 "return to dashboard" button, which could be enhanced to be more like the brower's back button. Especially now that we have a clickable logo which always goes to the dashboard.