add DM tour

- rearrange script includes on feed pages
- add DM tour to close
This commit is contained in:
Hugh Rundle 2022-07-09 19:27:42 +10:00
parent 791847d75e
commit 2f2ab5c24a
5 changed files with 101 additions and 10 deletions

View file

@ -13,7 +13,7 @@
{% if partner %}<p class="subtitle"><a href="{% url 'direct-messages' %}"><span class="icon icon-arrow-left" aria-hidden="true"></span> {% trans "All messages" %}</a></p>{% endif %}
</header>
<div class="box">
<div class="box" id="tour-dm-box">
{% include 'snippets/create_status/status.html' with type="direct" uuid=1 mention=partner no_script=True %}
</div>
@ -30,3 +30,11 @@
</section>
{% endblock %}
{% block scripts %}
{% if request.user.show_guided_tour %}
{% include 'guided_tour/direct_messages.html' %}
{% endif %}
{% endblock %}

View file

@ -1,5 +1,6 @@
{% extends 'feed/layout.html' %}
{% load i18n %}
{% load static %}
{% block panel %}
@ -73,3 +74,12 @@
{% endfor %}
{% endblock %}
{% block scripts %}
<script src="{% static "js/tabs.js" %}?v={{ js_cache }}"></script>
{% if request.user.show_guided_tour %}
{% include 'guided_tour/home.html' %}
{% endif %}
{% endblock %}

View file

@ -1,6 +1,5 @@
{% extends 'layout.html' %}
{% load i18n %}
{% load static %}
{% block title %}{% trans "Updates" %}{% endblock %}
@ -30,11 +29,4 @@
</div>
{% endblock %}
{% block scripts %}
<script src="{% static "js/tabs.js" %}?v={{ js_cache }}"></script>
{% if request.user.show_guided_tour %}
{% include 'guided_tour/home.html' %}
{% endif %}
{% endblock %}

View file

@ -0,0 +1,81 @@
{% load i18n %}
<script>
const tour = new Shepherd.Tour({
exitOnEsc: true,
});
tour.addSteps([
{
text: "{% trans 'You can send a Message to other Bookwyrm users. To send a message, use the <strong>@</strong> symbol with their username(s), followed by your message.<br><br>For example: <strong>@mouse Hi Mouse, I love reading books too!</strong>' %}",
title: "{% trans 'Direct Messages' %}",
attachTo: {
element: "#tour-dm-box",
on: "left"
},
highlightClass: 'tour-element-highlight',
buttons: [
{
action() {
disableGuidedTour(csrf_token);
return this.complete();
},
secondary: true,
text: "{% trans 'End Tour' %}",
classes: "is-danger",
},
{
action() {
return this.next();
},
text: "{% trans 'Next' %}",
},
],
},
{
text: "{% trans 'If your message is about a book you\'re reading, click here to put a spoiler alert on your message. This will hide your message behind the warning until the recipient wants to see it.' %}",
title: "{% trans 'Spoilers' %}",
attachTo: {
element: "#tour-spoiler-alert",
on: "left"
},
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "{% trans 'Back' %}",
},
{
action() {
return this.next();
},
text: "{% trans 'Next' %}",
},
],
},
{
text: "{% trans 'Thanks for taking the tour. There\'s lots more to explore, but now you are familiar with the basics needed to enjoy Bookwyrm. Happy reading!' %}",
title: "{% trans 'You\'re ready!' %}",
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "{% trans 'Back' %}",
},
{
action() {
disableGuidedTour(csrf_token);
return this.complete();
},
text: "{% trans 'Finish tour' %}",
},
],
},
])
tour.start()
</script>

View file

@ -1,5 +1,5 @@
{% load i18n %}
<div class="field is-relative">
<div class="field is-relative" id="tour-spoiler-alert">
<details
{% if reply_parent.content_warning or draft.content_warning %}open{% endif %}
>