wip: whiteboard tour

src/main/frontend/components/onboarding/quick_tour.cljs

@@ -209,6 +209,29 @@
     ;(.start jsTour)
     ))
 
+(defn start-whiteboard
+  []
+  (let [^js jsTour (js/Shepherd.Tour.
+                    (bean/->js
+                     {:useModalOverlay    true
+                      :defaultStepOptions {:classes  "cp__onboarding-quick-tour"
+                                           :scrollTo false}}))
+        steps      (create-steps! jsTour)
+        steps      (map-indexed #(assoc %2 :text (str (:text %2) (inject-steps-indicator (inc %1) (count steps)))) steps)
+        [show-skip! hide-skip!] (make-skip-fns jsTour)]
+
+    ;; events
+    (doto jsTour
+      (.on "show" show-skip!)
+      (.on "hide" hide-skip!)
+      (.on "complete" hide-skip!)
+      (.on "cancel" hide-skip!))
+
+    (doseq [step steps]
+      (.addStep jsTour (bean/->js step)))
+
+    (.start jsTour)))
+
 (defn ready
   [callback]
   (p/then

src/main/frontend/components/whiteboard.cljs

@@ -2,6 +2,7 @@
   "Whiteboard related components"
   (:require [cljs.math :as math]
             [frontend.components.content :as content]
+            [frontend.components.onboarding.quick-tour :as quick-tour]
             [frontend.components.page :as page]
             [frontend.components.reference :as reference]
             [frontend.context.i18n :refer [t]]
@@ -304,19 +305,27 @@
 
 (rum/defc onboarding-welcome
   [close-fn]
-  [:div.cp__whiteboards-welcome
-   [:span.head-bg
+  (try
+    [:div.cp__whiteboard-welcome
+     [:span.head-bg
 
-    [:strong (t :on-boarding/closed-feature (name (:whiteboard user-handler/feature-matrix)))]]
+      [:strong (t :on-boarding/closed-feature (name (:whiteboard user-handler/feature-matrix)))]]
 
-   [:h1.text-2xl.font-bold.flex-col.sm:flex-row
-    (t :on-boarding/welcome-whiteboard-modal-title)]
+     [:h1.text-2xl.font-bold.flex-col.sm:flex-row
+      (t :on-boarding/welcome-whiteboard-modal-title)]
 
-   [:p (t :on-boarding/welcome-whiteboard-modal-description)]
+     [:p (t :on-boarding/welcome-whiteboard-modal-description)]
 
-   [:div.pt-6.flex.justify-center.space-x-2.sm:justify-end
-    (ui/button (t :on-boarding/welcome-whiteboard-modal-later) :on-click close-fn :background "gray" :class "opacity-60")
-    (ui/button (t :on-boarding/welcome-whiteboard-modal-start)
-               :on-click (fn []
-                           (config-handler/set-config! :feature/enable-whiteboards? true)
-                           (close-fn)))]])
+     [:div.pt-6.flex.justify-center.space-x-2.sm:justify-end
+      (ui/button (t :on-boarding/welcome-whiteboard-modal-later) :on-click close-fn :background "gray" :class "opacity-60")
+      (ui/button (t :on-boarding/welcome-whiteboard-modal-start)
+                 :on-click (fn []
+                             (config-handler/set-config! :feature/enable-whiteboards? true)
+                             (do (quick-tour/ready
+                                  (fn []
+                                    (quick-tour/start-whiteboard)
+                                    (state/set-state! :feature/enable-whiteboards? true)))
+                                 (throw (js/Error. nil)))
+                             (close-fn)))]]
+    (catch :default e
+      (js/console.warn "[Whiteboard onboarding SKIP] " (name type) e))))

src/main/frontend/components/whiteboard.css

@@ -223,7 +223,7 @@ html:is(.is-ios, is-native-ios, is-native-ipad) [data-page="whiteboard"] * {
   user-select: none;
 }
 
-.cp__whiteboards-welcome {
+.cp__whiteboard-welcome {
   > .head-bg {
     @apply flex m-auto mb-10 w-auto sm:w-[500px];
 
@@ -239,6 +239,7 @@ html:is(.is-ios, is-native-ios, is-native-ipad) [data-page="whiteboard"] * {
       m-auto translate-y-8 uppercase;
 
       background-color: var(--ls-link-text-color);
+      color: var(--ls-primary-background-color);
     }
   }
 
@@ -259,7 +260,7 @@ html:is(.is-ios, is-native-ios, is-native-ipad) [data-page="whiteboard"] * {
 
 
 html[data-theme='light'] {
-  .cp__whiteboards-welcome {
+  .cp__whiteboard-welcome {
     > .head-bg {
       background-image: url("../img/whiteboard-welcome-light.png");
     }