diff --git a/frontend/resources/images/features/assets-organiz.gif b/frontend/resources/images/features/assets-organiz.gif new file mode 100644 index 0000000000..333b7be7d6 Binary files /dev/null and b/frontend/resources/images/features/assets-organiz.gif differ diff --git a/frontend/resources/images/features/path-tool.gif b/frontend/resources/images/features/path-tool.gif new file mode 100644 index 0000000000..34f280652d Binary files /dev/null and b/frontend/resources/images/features/path-tool.gif differ diff --git a/frontend/resources/images/features/smart-inputs.gif b/frontend/resources/images/features/smart-inputs.gif new file mode 100644 index 0000000000..3f2a8dacaa Binary files /dev/null and b/frontend/resources/images/features/smart-inputs.gif differ diff --git a/frontend/src/app/main/ui.cljs b/frontend/src/app/main/ui.cljs index 5e0d543c31..9098fea1d8 100644 --- a/frontend/src/app/main/ui.cljs +++ b/frontend/src/app/main/ui.cljs @@ -139,7 +139,7 @@ :dashboard-team-settings) [:* #_[:div.modal-wrapper - [:& app.main.ui.onboarding/release-notes-modal {:version "1.4"}]] + [:& app.main.ui.onboarding/release-notes-modal {:version "1.5"}]] [:& dashboard {:route route}]] :viewer diff --git a/frontend/src/app/main/ui/onboarding.cljs b/frontend/src/app/main/ui/onboarding.cljs index 339d42dd51..963e0cae36 100644 --- a/frontend/src/app/main/ui/onboarding.cljs +++ b/frontend/src/app/main/ui/onboarding.cljs @@ -238,9 +238,7 @@ (defmulti render-release-notes :version) -(mf/defc release-notes-modal - {::mf/register modal/components - ::mf/register-as :release-notes} +(mf/defc release-notes [{:keys [version] :as props}] (let [slide (mf/use-state :start) klass (mf/use-state "fadeInDown") @@ -285,16 +283,19 @@ :slide slide :version version}))) -;; This case should never happen; but if happen just hide inmediatelly -;; the modal. -(defmethod render-release-notes :default +(mf/defc release-notes-modal + {::mf/wrap-props false + ::mf/register modal/components + ::mf/register-as :release-notes} [props] - (tm/schedule 0 #(st/emit! (modal/hide))) - (mf/html [:span ""])) + (let [versions (methods render-release-notes) + version (obj/get props "version")] + (when (contains? versions version) + [:> release-notes props]))) (defmethod render-release-notes "0.0" [params] - (render-release-notes (assoc params :version "1.4"))) + (render-release-notes (assoc params :version "1.5"))) (defmethod render-release-notes "1.4" [{:keys [slide klass next finish navigate version]}] @@ -393,3 +394,82 @@ {:slide @slide :navigate navigate :total 4}]]]]]]))) + +(defmethod render-release-notes "1.5" + [{: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.5.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.5.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/path-tool.gif" :border "0" :alt "New path tool"}]] + [:div.modal-right + [:div.modal-title + [:h2 "New features for paths"]] + [:div.modal-content + [:p "Now you can select snap points on edition, add/remove nodes, merge/join/split nodes."] + [:p "The usability and performance of the paths tool has been improved too."]] + [:div.modal-navigation + [:button.btn-secondary {:on-click next} "Continue"] + [:& navigation-bullets + {:slide @slide + :navigate navigate + :total 3}]]]]]] + + 1 + [:div.modal-overlay + [:div.animated {:class @klass} + [:div.modal-container.onboarding.feature + [:div.modal-left + [:img {:src "images/features/assets-organiz.gif" :border "0" :alt "Manage libraries"}]] + [:div.modal-right + [:div.modal-title + [:h2 "New libraries organization"]] + [:div.modal-content + [:p "Penpot now allows to group, multiselect and bulk edition of assets (components and graphics)."] + [:p "It is time to have all the libraries well organized and work more efficiently."]] + [:div.modal-navigation + [:button.btn-secondary {:on-click next} "Continue"] + [:& navigation-bullets + {:slide @slide + :navigate navigate + :total 3}]]]]]] + + 2 + [:div.modal-overlay + [:div.animated {:class @klass} + [:div.modal-container.onboarding.feature + [:div.modal-left + [:img {:src "images/features/smart-inputs.gif" :border "0" :alt "Smart inputs"}]] + [:div.modal-right + [:div.modal-title + [:h2 "Smart inputs"]] + [:div.modal-content + [:p "Now you can have more precision in your designs with basic math operations in inputs."] + [:p "It's easier to specify by how much you want to change a value and work with measures and distances."]] + [:div.modal-navigation + [:button.btn-secondary {:on-click finish} "Start!"] + [:& navigation-bullets + {:slide @slide + :navigate navigate + :total 3}]]]]]])))