fortesinformatica / Sideshow

Sideshow is a powerful javascript library which aims to reduce your user's learning curve by providing a way to create step-by-step interactive tours. Explain the features of your application, control your end-user's interaction with your UI, emphasize what you're explaining in each step by masking it. Just think! The sky is the limit!
http://fortesinformatica.github.io/Sideshow
Apache License 2.0
86 stars 31 forks source link

Place close button on description #15

Closed DanielApt closed 9 years ago

DanielApt commented 9 years ago

Our demographic has very large viewports, and as a result we've noticed the Close button is overlooked.

We'd like to have the option to display the close button on the step itself. This is also common practice with the other guides I've seen. Something similar to the below screenshot:

screen shot 2015-03-23 at 10 43 04

AlbertoMonteiro commented 9 years ago

Where close button will appear in the list of tutorials?

DanielApt commented 9 years ago

Good question, in our current situation we're not using the list of tutorials ourselves.

We should still address this though: Setting it on the same line as Available Tutorials would seem best suited.

DanielApt commented 9 years ago

This is the look I got going for the step right now.

screen shot 2015-03-23 at 14 04 37

AlbertoMonteiro commented 9 years ago

Nicely done!!

DanielApt commented 9 years ago

Thanks. I'm working on it on the close-btn branch, so would love to have some feedback.

Especially the main question I have is what property to use. I'm currently using SS.config.closePosition, with valid values being bottom-right or step.

From past experience we know that items in the bottom-right are most overlooked, esp. on large displays. It might be useful to expand this position property to allow other values like top-left, top-right and bottom-left.

As said though, I'm happy to hear other people's thoughts.

alcidesqueiroz commented 9 years ago

Though here in our company we didn't have this specific issue (to put the close button inside the description box), I consider this enhancement absolutely valid. My only suggestion is to change the acceptable values for this property to "description-box" and "screen-corner", and the property name itself to closeButtonPosition. What do you think?

DanielApt commented 9 years ago

Yeah sounds good, I'll make sure to update that once I have the chance.

DanielApt commented 9 years ago

Just pushed current work to develop.

alcidesqueiroz commented 9 years ago

Great work!

peteallen commented 9 years ago

We are looking for this feature as well. Is this still being worked on, or is it ready to be released?

DanielApt commented 9 years ago

Hi @peteallen,

Sorry I've had to slow down a bit on the dev work, while an internal project has taken prescedence. I hope to get a release out by the end of this month.

We do have a working version, but it's not been thoroughly tested for a release. It currently lives on the develop branch if it's urgent.

alcidesqueiroz commented 9 years ago

@peteallen, as @DanielApt said, this feature is already done, and it will be released in our next official release. Coincidentally, Daniel and I are working on internal projects for the companies that each one of us work for. But, as soon as we can, this will be ready for production. If you really need this urgently, you can get the development version by using directly the distr folder in the develop branch, since we do not pack develop versions.

Cheers.

alcidesqueiroz commented 9 years ago

@DanielApt Now the close button also appears inside the wizard menu when its position is 'description-box'. The feature is complete. I'm closing this issue. =]

DanielApt commented 9 years ago

Great work, I was worried how to place the button, but it actually works fine imho!