Add guided tour / walkthrough

bookwyrm/migrations/0154_user_show_guided_tour.py

@@ -0,0 +1,25 @@
+# Generated by Django 3.2.14 on 2022-07-09 23:33
+
+from django.db import migrations, models
+
+
+def existing_users_default(apps, schema_editor):
+    db_alias = schema_editor.connection.alias
+    user_model = apps.get_model("bookwyrm", "User")
+    user_model.objects.using(db_alias).filter(local=True).update(show_guided_tour=False)
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("bookwyrm", "0153_merge_20220706_2141"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="user",
+            name="show_guided_tour",
+            field=models.BooleanField(default=True),
+        ),
+        migrations.RunPython(existing_users_default, migrations.RunPython.noop),
+    ]

bookwyrm/models/user.py

@@ -143,6 +143,7 @@ class User(OrderedCollectionPageMixin, AbstractUser):
     show_goal = models.BooleanField(default=True)
     show_suggested_users = models.BooleanField(default=True)
     discoverable = fields.BooleanField(default=False)
+    show_guided_tour = models.BooleanField(default=True)
 
     # feed options
     feed_status_types = ArrayField(

bookwyrm/static/css/themes/bookwyrm-dark.scss

@@ -94,3 +94,4 @@ $family-secondary: $family-sans-serif;
 
 @import "../bookwyrm.scss";
 @import "../vendor/icons.css";
+@import "../vendor/shepherd.scss";

bookwyrm/static/css/themes/bookwyrm-light.scss

@@ -67,3 +67,4 @@ $family-secondary: $family-sans-serif;
 
 @import "../bookwyrm.scss";
 @import "../vendor/icons.css";
+@import "../vendor/shepherd.scss";

bookwyrm/static/css/vendor/shepherd.scss

@@ -0,0 +1,48 @@
+/*
+    Shepherd styles for guided tour.
+    Based on Shepherd v 10.0.0 styles.
+*/
+
+@use 'bulma/bulma.sass';
+
+.shepherd-button {
+    @extend .button.mr-2;
+}
+
+.shepherd-button.shepherd-button-secondary {
+    @extend .button.is-light;
+}
+
+.shepherd-footer {
+    @extend .message-body;
+    @extend .is-info.is-light;
+    border-color: $info-light;
+    border-radius: 0 0 4px 4px;
+}
+
+.shepherd-cancel-icon{background:transparent;border:none;color:hsla(0,0%,50%,.75);cursor:pointer;font-size:2em;font-weight:400;margin:0;padding:0;transition:color .5s ease}.shepherd-cancel-icon:hover{color:rgba(0,0,0,.75)}.shepherd-has-title .shepherd-content .shepherd-cancel-icon{color:hsla(0,0%,50%,.75)}.shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover{color:rgba(0,0,0,.75)}
+
+.shepherd-header {
+    @extend .message-header;
+    @extend .is-info;
+}
+
+.shepherd-text {
+    @extend .message-body;
+    @extend .is-info.is-light;
+    border-radius: 0;
+}
+
+.shepherd-content {
+    @extend .message;
+}
+
+.shepherd-element{background:$info-light;border-radius:5px;box-shadow:4px 4px 6px rgba(0,0,0,.2);max-width:400px;opacity:0;outline:none;transition:opacity .3s,visibility .3s;visibility:hidden;width:100%;z-index:9999}.shepherd-enabled.shepherd-element{opacity:1;visibility:visible}.shepherd-element[data-popper-reference-hidden]:not(.shepherd-centered){opacity:0;pointer-events:none;visibility:hidden}.shepherd-element,.shepherd-element *,.shepherd-element :after,.shepherd-element :before{box-sizing:border-box}.shepherd-arrow,.shepherd-arrow:before{height:16px;position:absolute;width:16px;z-index:-1}.shepherd-arrow:before{background:$info-light;box-shadow:0 2px 4px rgba(0,0,0,.2);content:"";transform:rotate(45deg)}.shepherd-element[data-popper-placement^=top]>.shepherd-arrow{bottom:-8px}.shepherd-element[data-popper-placement^=bottom]>.shepherd-arrow{top:-8px}.shepherd-element[data-popper-placement^=left]>.shepherd-arrow{right:-8px}.shepherd-element[data-popper-placement^=right]>.shepherd-arrow{left:-8px}.shepherd-element.shepherd-centered>.shepherd-arrow{opacity:0}.shepherd-element.shepherd-has-title[data-popper-placement^=bottom]>.shepherd-arrow:before{background-color:$info}.shepherd-target-click-disabled.shepherd-enabled.shepherd-target,.shepherd-target-click-disabled.shepherd-enabled.shepherd-target *{pointer-events:none}
+
+.shepherd-modal-overlay-container{height:0;left:0;opacity:0;overflow:hidden;pointer-events:none;position:fixed;top:0;transition:all .3s ease-out,height 0ms .3s,opacity .3s 0ms;width:100vw;z-index:9997}.shepherd-modal-overlay-container.shepherd-modal-is-visible{height:100vh;opacity:.5;transform:translateZ(0);transition:all .3s ease-out,height 0s 0s,opacity .3s 0s}.shepherd-modal-overlay-container.shepherd-modal-is-visible path{pointer-events:all}
+
+.tour-element-highlight {
+    border: 5px solid $info;
+    border-radius: 5px;
+    box-shadow:4px 4px 6px rgba(0,0,0,.2);
+}

bookwyrm/static/js/guided_tour.js

@@ -0,0 +1,18 @@
+/**
+ * Set guided tour user value to False
+ * @param  {csrf_token} string
+ * @return {undefined}
+ */
+
+/* eslint-disable no-unused-vars */
+function disableGuidedTour(csrf_token) {
+    "use strict";
+    fetch("/guided-tour/False", {
+        headers: {
+            "X-CSRFToken": csrf_token,
+        },
+        method: "POST",
+        redirect: "follow",
+        mode: "same-origin",
+    });
+}