Customization of tour UI

microsoft / codetour

VS Code extension that allows you to record and play back guided tours of codebases, directly within the editor.

https://aka.ms/codetour

MIT License

4.36k stars 113 forks source link

Customization of tour UI #98

Closed gracegtaylor closed 3 years ago

gracegtaylor commented 3 years ago

We've heard from customers that they would like more intuitive UI for the tours. We received feedback that they were having to teach people how to use CodeTour in addition to the technology itself.

Stage 1:

implement "Next" links to go to the next step, or a specific step
link uses specific markdown syntax

Stage 2:

author can customize look and feel of CodeTour command palette
author can submit stylesheet or rearrange command palette

lostintangent commented 3 years ago

Just published an update of the extension that includes previous, next and finish links. Additionally, the links include the title of the next/previous step, to help provide the end-user with a bit more context.

NotMyself commented 3 years ago

It's like my birthday!

selfie-2 GitHub Selfies

lostintangent commented 3 years ago

VS Code doesn't allow us to inject custom CSS stylesheets, and so the primary customizations we can allow is the wording of the links themselves, and whether we show the previous/next step titles. That said, I think there's a lot of value in having consistency across tours, so that readers would have a familiar experience, regardless where they're learning.

That said, I'm going to close this issue as resolved for now, and we can open new specific issues if we have specific issues/tweaks we need to make. If others disagree, please feel free to re-open this issue and we can discuss next steps further 👍

RandomFractals commented 3 years ago

Jonathan, I like this new next/prev. step links with step titles UI change. While the step arrow links are still there, I think this is more informative as we flip through code tour cards. Also, glad to see you are still refining it.