Allow ability to specify backdrop padding
Closed this issue · 4 comments
It would be nice to be able to add a little bit of padding when a backdrop is highlighting a tour-step element.
If your element has rounded corners, not having padding makes it look a little funky.
ui-tour-backdropPadding would be nice
Hey @ventralnet, I like this idea, but it might not be a trivial enhancement. The backdrop consists of four divs that need to be perfectly aligned so that the backdrop feels like one contiguous overlay. Adding padding would require the calculations to be made a bit different. This is certainly possible, but if this is a really desirable feature then I would prefer to do it right the first time and make the backdrop a much more configurable part of the system (perhaps even factor it out into its own library).
@benmarch actually that is a pretty good idea to factor it out into its own library.
I did look at how you are creating that back drop and noticed the strategically placed divs. I wonder how the native bootstrap tour library is doing it because it looks like the over layed element 'window' can have rounded corners
I looked into the Bootstrap overlay as well, but their implementation is much simpler: they create a single div that covers the entire screen, and then place elements on top of it. My goal was to create a pass-through window so that the underlying feature would still be exposed to user interaction. Originally, I did use exactly what Bootstrap uses and cloned the target element, then positioned it on top of the original. This didn't work for a few reasons (CSS didn't inherit properly, Angular scopes were cloned). It should be possible to create rounded corners using my approach, but it will require more elements. I'll add this to my list for the 1.x release.
Sounds great @benmarch . If I end up having some spare time I can take look at it.