🎉 Add release notes lightbox.

frontend/src/app/main/ui/onboarding.cljs

@@ -19,10 +19,13 @@
    [app.util.dom :as dom]
    [app.util.router :as rt]
    [app.util.timers :as tm]
+   [app.util.object :as obj]
    [cljs.spec.alpha :as s]
    [rumext.alpha :as mf]))
 
 
+;; --- ONBOARDING LIGHTBOX
+
 (mf/defc navigation-bullets
   [{:keys [slide navigate total]}]
   [:ul.step-dots
@@ -34,7 +37,7 @@
   [{:keys [next] :as props}]
   [:div.modal-container.onboarding
    [:div.modal-left
-    [:img {:src "images/pot.png" :border "0" :alt "Penpot"}]]
+    [:img {:src "images/login-on.jpg" :border "0" :alt "Penpot"}]]
    [:div.modal-right
     [:div.modal-title
      [:h2 "Welcome to Penpot!"]]
@@ -182,22 +185,6 @@
 (s/def ::team-form
   (s/keys :req-un [::name]))
 
-(defn- on-success
-  [form response]
-  (st/emit! (modal/hide)
-            (rt/nav :dashboard-projects {:team-id (:id response)})))
-
-(defn- on-error
-  [form response]
-  (st/emit! (dm/error "Error on creating team.")))
-
-(defn- on-submit
-  [form event]
-  (let [mdata  {:on-success (partial on-success form)
-                :on-error   (partial on-error form)}
-        params {:name (get-in @form [:clean-data :name])}]
-    (st/emit! (dd/create-team (with-meta params mdata)))))
-
 (mf/defc onboarding-team-modal
   {::mf/register modal/components
    ::mf/register-as :onboarding-team}
@@ -205,9 +192,25 @@
   (let [close (mf/use-fn (st/emitf (modal/hide)))
         form  (fm/use-form :spec ::team-form
                            :initial {})
+        on-success
+        (mf/use-callback
+         (fn [form response]
+           (st/emit! (modal/hide)
+                     (rt/nav :dashboard-projects {:team-id (:id response)}))))
+
+        on-error
+        (mf/use-callback
+         (fn [form response]
+           (st/emit! (dm/error "Error on creating team."))))
 
         on-submit
-        (mf/use-callback (partial on-submit form))]
+        (mf/use-callback
+         (fn [form event]
+           (let [mdata  {:on-success (partial on-success form)
+                         :on-error   (partial on-error form)}
+                 params {:name (get-in @form [:clean-data :name])}]
+             (st/emit! (dd/create-team (with-meta params mdata))))))]
+
     [:div.modal-overlay
      [:div.modal-container.onboarding.final.animated.fadeInUp
       [:div.modal-left
@@ -222,6 +225,7 @@
                    :label "Enter new team name"}]
         [:& fm/submit-button
          {:label "Create team"}]]]
+
       [:div.modal-right
        [:img {:src "images/onboarding-start.jpg" :border "0" :alt "Start designing"}]
        [:h2 "Start designing"]
@@ -232,3 +236,163 @@
       [:img.deco {:src "images/deco-left.png" :border "0"}]
       [:img.deco.right {:src "images/deco-right.png" :border "0"}]]]))
 
+
+;;; --- RELEASE NOTES MODAL
+
+(defmulti render-release-notes :version)
+
+(mf/defc release-notes-modal
+  {::mf/register modal/components
+   ::mf/register-as :release-notes}
+  [{:keys [version] :as props}]
+  (let [slide (mf/use-state :start)
+        klass (mf/use-state "fadeInDown")
+
+        navigate
+        (mf/use-callback #(reset! slide %))
+
+        next
+        (mf/use-callback
+         (mf/deps slide)
+         (fn []
+           (if (= @slide :start)
+             (navigate 0)
+             (navigate (inc @slide)))))
+
+        finish
+        (mf/use-callback
+         (st/emitf (modal/hide)
+                   (du/mark-onboarding-as-viewed {:version version})))
+        ]
+
+    (mf/use-effect
+     (mf/deps)
+     (fn []
+       (st/emitf (du/mark-onboarding-as-viewed {:version version}))))
+
+    (mf/use-layout-effect
+     (mf/deps @slide)
+     (fn []
+       (when (not= :start @slide)
+         (reset! klass "fadeIn"))
+       (let [sem (tm/schedule 300 #(reset! klass nil))]
+         (fn []
+           (reset! klass nil)
+           (tm/dispose! sem)))))
+
+    (render-release-notes
+     {:next next
+      :navigate navigate
+      :finish finish
+      :klass klass
+      :slide slide
+      :version version})))
+
+;; This case should never happen; but if happen just hide inmediatelly
+;; the modal.
+(defmethod render-release-notes :default
+  [props]
+  (tm/schedule 0 #(st/emit! (modal/hide)))
+  (mf/html [:span ""]))
+
+(defmethod render-release-notes "0.0"
+  [params]
+  (render-release-notes (assoc params :version "1.4")))
+
+(defmethod render-release-notes "1.4"
+  [{:keys [slide klass next finish navigate version]}]
+  (mf/html
+   (case @slide
+     :start
+     [:div.modal-overlay
+      [:div.animated {:class @klass}
+       [:div.modal-container.onboarding.feature
+        [:div.modal-left
+         [:img {:src "images/login-on.jpg" :border "0" :alt "What's new Alpha release 1.4.0"}]]
+        [:div.modal-right
+         [:div.modal-title
+          [:h2 "What's new?"]]
+         [:span.release "Alpha version " version]
+         [:div.modal-content
+          [:p "Penpot continues growing with new features that improve performance, user experience and visual design."]
+          [:p "We are happy to show you a sneak peak of the most important stuff that the Alpha 1.4.0 version brings."]]
+         [:div.modal-navigation
+          [:button.btn-secondary {:on-click next} "Continue"]]]
+        [:img.deco {:src "images/deco-left.png" :border "0"}]
+        [:img.deco.right {:src "images/deco-right.png" :border "0"}]]]]
+
+     0
+     [:div.modal-overlay
+      [:div.animated {:class @klass}
+       [:div.modal-container.onboarding.feature
+        [:div.modal-left
+         [:img {:src "images/features/select-files.gif" :border "0" :alt "New file selection"}]]
+        [:div.modal-right
+         [:div.modal-title
+          [:h2 "New file selection and open files"]]
+         [:div.modal-content
+          [:p "Now you can select files with left click and make multi-selections holding down the shift + left click."]
+          [:p "To open a file you just have to double click it. You can also open a file in a new tab with right click."]]
+         [:div.modal-navigation
+          [:button.btn-secondary {:on-click next} "Continue"]
+          [:& navigation-bullets
+           {:slide @slide
+            :navigate navigate
+            :total 4}]]]]]]
+
+     1
+     [:div.modal-overlay
+      [:div.animated {:class @klass}
+       [:div.modal-container.onboarding.feature
+        [:div.modal-left
+         [:img {:src "images/features/manage-files.gif" :border "0" :alt "Manage files"}]]
+        [:div.modal-right
+         [:div.modal-title
+          [:h2 "New files/projects management"]]
+         [:div.modal-content
+          [:p "Penpot now allows to duplicate and move files and projects."]
+          [:p "Also, now you have an easy way to manage files and projects between teams."]]
+         [:div.modal-navigation
+          [:button.btn-secondary {:on-click next} "Continue"]
+          [:& navigation-bullets
+           {:slide @slide
+            :navigate navigate
+            :total 4}]]]]]]
+
+     2
+     [:div.modal-overlay
+      [:div.animated {:class @klass}
+       [:div.modal-container.onboarding.feature
+        [:div.modal-left
+         [:img {:src "images/features/rtl.gif" :border "0" :alt "RTL support"}]]
+        [:div.modal-right
+         [:div.modal-title
+          [:h2 "RTL support is now available!"]]
+         [:div.modal-content
+          [:p "Diversity and inclusion is one major Penpot concern and that's why we love to give support to RTL languages, unlike in most of design tools."]
+          [:p "If you write in arabic, hebrew or other RTL language text direction will be automatically detected in text layers."]]
+         [:div.modal-navigation
+          [:button.btn-secondary {:on-click next} "Continue"]
+          [:& navigation-bullets
+           {:slide @slide
+            :navigate navigate
+            :total 4}]]]]]]
+
+     3
+     [:div.modal-overlay
+      [:div.animated {:class @klass}
+       [:div.modal-container.onboarding.feature
+        [:div.modal-left
+         [:img {:src "images/features/blend-modes.gif" :border "0" :alt "Blend modes"}]]
+        [:div.modal-right
+         [:div.modal-title
+          [:h2 "New layer opacity and blend modes"]]
+         [:div.modal-content
+          [:p "Combining elements visually is an important part of the design process."]
+          [:p "This is why the standard blend modes and opacity level are now available for each element."]]
+         [:div.modal-navigation
+          [:button.btn-secondary {:on-click finish} "Start!"]
+          [:& navigation-bullets
+           {:slide @slide
+            :navigate navigate
+            :total 4}]]]]]])))