Feature: UI Welcome Tour

[shamoon]

Proposed change

This PR adds a 'welcome tour' to the UI that makes front-end features more apparent and also updates the 'welcome widget'. Video below has quick demonstration, the content itself is in the app.component.ts and is easily editable. Would love feedback on the content and in general. Good news is its very easy to update. Some notes:

• Feedback on the items, contents, etc is very much appreciated. Obviously goal is balance, we cant point every single thing out. Again, these are easy to change down the road.
• I debated having the tour actually popup but instead opted for the widget with a start button. Theres also a new button under settings to re-start the tour at any point. I think our users prefer less-intrusive things.
• Uses an actively maintained library https://github.com/hakimio/ngx-ui-tour which actually ultimately uses the Bootstrap popovers that we already use in other places in the UI, making the whole thing feel familiar and keeps this pretty lightweight.
• Obviously this adds a bunch of new strings for translation which can be done after (if 😌) this is merged

(in the video im advancing quickly with the keyboard just for demonstration, items do not automatically advance)

welcometour.mov

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Other (please explain)

Checklist:

• I have read & agree with the contributing guidelines.
• If applicable, I have tested my code for new features & regressions on both mobile & desktop devices, using the latest version of major browsers.
• If applicable, I have checked that all tests pass, see documentation.
• I have run all pre-commit hooks, see documentation.
• I have made corresponding changes to the documentation as needed.
• I have checked my modifications for any breaking changes.

[stumpylog]

This is a great idea. A couple of things I noticed:

• At least in dark mode, I feel like the pointers from the popup to the item are a little too subtle
• Not sure 3/10 was pointing to the right spot? It was kind of floating in the center, instead of pointing at the view styles?
• 9/10 doesn't highlight the admin link (but maybe it can't)

[shamoon]

This is a great idea. A couple of things I noticed:

• At least in dark mode, I feel like the pointers from the popup to the item are a little too subtle
• Not sure 3/10 was pointing to the right spot? It was kind of floating in the center, instead of pointing at the view styles?
• 9/10 doesn't highlight the admin link (but maybe it can't)

Thanks =) Helpful feedback.

• There's a highlighting feature that was a bit finicky but I managed to get it working, I updated the video above, some pros/cons to it but I agree makes the thing we're highlighting much clearer.
• 3/10 points to the list of docs itself, I made that more apparent now, but do we think it should point to the view style buttons?
• Does now!

[stumpylog]

I have no idea about the code portion, but this is great. I think people will like it

[sukisoft]

How is this rendered / displayed when in mobile view? I tend to use the mobile page very often, so maybe do others.

[shamoon]

Certainly more comfortable on desktop but works just fine on mobile 🙂 (screenshot)

[sukisoft]

Looks great, thanks for the Screenshot!

[darkobg79]

Is possible to add translation strings for END, PREV and NEXT?

[shamoon]

Is possible to add translation strings for END, PREV and NEXT?

Great catch, thanks! I'll add this now so we can try to get it into the current beta

[github-actions]

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new discussion or issue for related concerns.