mirrors/bookwyrm
1
0
Fork 1
mirror of https://github.com/bookwyrm-social/bookwyrm.git synced 2024-09-27 05:50:05 +00:00
Code Issues Projects Releases Wiki Activity

guided tour for user groups

Browse source 
Includes adding creating a new group.
This commit is contained in:
Hugh Rundle 2022-06-18 10:48:14 +10:00
parent 00df3c94df
commit d36dd9ce96
3 changed files with 139 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
bookwyrm/templates/groups/group.html
View file

@ -22,7 +22,7 @@
</p>
</div>
{% if request.user.is_authenticated and group|is_member:request.user %}
<div class="column is-narrow is-flex">
<div class="column is-narrow is-flex" id="create_group_list_button">
{% trans "Create List" as button_text %}
{% include 'snippets/toggle/open_button.html' with controls_text="create_list" icon_with_text="plus" text=button_text focus="create_list_header" %}
</div>
@ -80,3 +80,9 @@
</div>
{% endblock %}
{% block scripts %}
{% if user.show_guided_tour %}
{% include 'guided_tour/group.html' %}
{% endif %}
{% endblock %}

2
bookwyrm/templates/groups/members.html
View file

@ -10,7 +10,7 @@
<div class="control">
<input type="text" name="user_query" value="{{ request.GET.user_query }}" class="input" placeholder="{% trans 'Search to add a user' %}" aria-label="{% trans 'Search to add a user' %}">
</div>
<div class="control">
<div class="control" id="group_member_search_button">
<button class="button" type="submit">
<span class="icon icon-search" title="{% trans 'Search' %}">
<span class="is-sr-only">{% trans "Search" %}</span>

131
bookwyrm/templates/guided_tour/group.html Normal file
View file

@ -0,0 +1,131 @@
{% load i18n %}
{% csrf_token %}
<script>
// TODO: put this with the token back in general layout so it can be called from any tour
// TODO: account for smaller screen view in all tours
const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
function disableTour() {
fetch('/guided-tour/False', {
headers: {
'X-CSRFToken': csrftoken,
},
method: 'POST',
redirect: 'follow',
mode: 'same-origin',
})
.then( resp => {console.log(resp.statusText) })
}
const tour = new Shepherd.Tour({
exitOnEsc: true,
});
tour.addSteps([
{
text: "{% trans 'This is the home page of your new group! This is where you can add and remove users, create user-curated lists, and edit the group details.' %}",
title: "{% trans 'Your group' %}",
buttons: [
{
action() {
disableTour();
return this.complete();
},
secondary: true,
text: "{% trans 'End Tour' %}",
classes: "is-danger",
},
{
action() {
return this.next();
},
text: "{% trans 'Next' %}",
},
],
},
{
text: "{% trans 'Use this search box to find users to join your group. Currently users must be invited by the group owner.' %}",
title: "{% trans 'Find users' %}",
attachTo: {
element: "#group_member_search_button",
on: "right",
},
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "{% trans 'Back' %}",
},
{
action() {
return this.next();
},
text: "{% trans 'Next' %}",
},
],
},
{
text: "{% trans 'Your group members will appear here. The group owner is marked with a star symbol.' %}",
title: "{% trans 'Group members' %}",
attachTo: {
element: '[title="Manager"]',
on: "right",
},
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "{% trans 'Back' %}",
},
{
action() {
return this.next();
},
text: "{% trans 'Next' %}",
},
],
},
{
text: "{% trans 'Groups can have group-curated lists. We haven\'t discussed lists yet, so now let\s fix that.' %}\
<br><br>\
{% trans 'Click on the button to create a list.' %}",
title: "{% trans 'Group lists' %}",
attachTo: {
element: "#create_group_list_button",
on: "right",
},
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "{% trans 'Back' %}",
},
{
action() {
return this.next();
},
text: "{% trans 'Next' %}",
},
],
},
{
text: "{% trans 'todo' %}",
title: "{% trans 'TODO' %}",
buttons: [
{
action() {
return this.complete();
},
text: "{% trans 'Ok' %}",
},
],
},
])
tour.start()
</script>