Implement a basic dynamic help mechanism #283
Conversation
|
Looks good. I was wondering if we can extend existing tools with help badge functionality using an Higher Order Component that wraps existing ones, instead of adding help functionality to every component one by one. |
|
Thanks for you review @mbarto. I agree that a high-level wrapper would be good. I also discovered that it is not that good to extend every component and already tried some things to solve that, but no good approach so far. I will have a deeper look on that. |
|
I did some more investigation and added an approach for a high level component, which can be wrapped around an existing element in order to show a help badge. |
| return ( | ||
| <div style={{position: "absolute"}}> | ||
| <HelpBadge | ||
| id={"helpbadge-" + this.props.children.key} |
There was a problem hiding this comment.
We should add some check that one single child exist and has a key,
|
Looks good to me, please proceed with other components. |
|
Hi, It would be nice if the help text appears on mouse hover (on the ?) . |
|
I added some more help badges to the app's components. To add them to the MapToolbar's buttons seems to be a bit more complicated since they are created dynamically and the The hovering behaviour described by @offtherailz shouldn't be that hard to implement once a decision has been made. |
|
I think we can do it passing some property helpMessage to each children and the other properties to the map toolbar directly. When the toolbar creates the buttons, it can wrap the component ( if the helpMessage property is present). This should solve the problem. |
|
Yes, I think it's a good idea. I also think hover is the way to go. |
|
I implemented the hover mechanism (f72225c) as described by @offtherailz:
|
This adds a dynamic help system to highlight 'help-augmented' elements by a badge and show the corresponding help text by clicking the badge. Hereby the basic mechanism is introduced: - Badge class as symbol for 'help-augmented' elements - Panel to display help texts - State object for help (incl. actions and reducers for manipulation) - Toggle-button to activate/deactivate the help mechanism - Exemplary help implementation for ZoomToMaxExtentButton - Adapt existing unit tests for ZoomToMaxExtentButton
This introduces a high-level wrapper to add a HelpBadge element to a component without modifying the component itself.
This adds HelpBadge the following components: - SearchBar - ScaleBox
This ensures that the window with the helptexts appears on the first mouseover-event on a 'HelpBadge' (not on help modus activation). To hide the helptext window the help modus has to be disabled.
|
Hi Christian. Do you think you have still time to add the help badge also to the MapToolbar tools? |
|
Hi Mauro, |
To add help badges to the MapToolbar its button creation is adapted. By passing a property 'helpText' to a child component of the MapToolbar, it is wrapped and extended by a HelpBadge component.
Done... |
Implement a basic dynamic help mechanism
This adds a dynamic help system to highlight 'help-augmented' elements
by a badge and show the corresponding help text by clicking the badge. The highlighting can be activated / deactivated by a button in the toolbar.
To show the mechanism the ZoomToMaxExtentButton is extended by such a "help-badge"
Fixes #155