mirror of
https://github.com/penpot/penpot.git
synced 2025-05-31 00:46:11 +02:00
230 lines
8 KiB
Clojure
230 lines
8 KiB
Clojure
;; This Source Code Form is subject to the terms of the Mozilla Public
|
|
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
;;
|
|
;; This Source Code Form is "Incompatible With Secondary Licenses", as
|
|
;; defined by the Mozilla Public License, v. 2.0.
|
|
;;
|
|
;; Copyright (c) 2020 UXBOX Labs SL
|
|
|
|
(ns app.main.ui.onboarding
|
|
(:require
|
|
[app.common.spec :as us]
|
|
[app.main.data.dashboard :as dd]
|
|
[app.main.data.messages :as dm]
|
|
[app.main.data.modal :as modal]
|
|
[app.main.data.users :as du]
|
|
[app.main.store :as st]
|
|
[app.main.ui.components.forms :as fm :refer [input submit-button form]]
|
|
[app.util.router :as rt]
|
|
[app.util.timers :as tm]
|
|
[cljs.spec.alpha :as s]
|
|
[rumext.alpha :as mf]))
|
|
|
|
(defmulti render-slide :slide)
|
|
|
|
(defmethod render-slide :start
|
|
[{:keys [navigate] :as props}]
|
|
(mf/html
|
|
[:div.modal-container.onboarding
|
|
[:div.modal-left
|
|
[:img {:src "images/pot.png" :border "0" :alt "Penpot"}]]
|
|
[:div.modal-right
|
|
[:div.modal-title
|
|
[:h2 "Welcome to Penpot!"]]
|
|
[:span.release "Alpha version 1.0"]
|
|
[:div.modal-content
|
|
[:p "We are very happy to introduce you to the very first Alpha 1.0 release."]
|
|
[:p "Penpot is still at development stage and there will be constant updates. We hope you enjoy the first stable version."]]
|
|
[:div.modal-navigation
|
|
[:button.btn-secondary {:on-click #(navigate :opensource)} "Continue"]]]
|
|
[:img.deco {:src "images/deco-left.png" :border "0"}]
|
|
[:img.deco.right {:src "images/deco-right.png" :border "0"}]]))
|
|
|
|
|
|
(defmethod render-slide :opensource
|
|
[{:keys [navigate] :as props}]
|
|
(mf/html
|
|
[:div.modal-container.onboarding.black
|
|
[:div.modal-left
|
|
[:img {:src "images/open-source.svg" :border "0" :alt "Open Source"}]]
|
|
[:div.modal-right
|
|
[:div.modal-title
|
|
[:h2 "Open Source Contributor?"]]
|
|
[:div.modal-content
|
|
[:p "Penpot is Open Source, made by and for the community. If you want to collaborate, you are more than welcome!"]
|
|
[:p "You can access the " [:a {:href "https://github.com/penpot" :target "_blank"} "project on github"] " and follow the contribution instructions :)"]]
|
|
[:div.modal-navigation
|
|
[:button.btn-secondary {:on-click #(navigate :feature1)} "Continue"]]]]))
|
|
|
|
(defmethod render-slide :feature1
|
|
[{:keys [navigate skip] :as props}]
|
|
(mf/html
|
|
[:div.modal-container.onboarding.feature
|
|
[:div.modal-left
|
|
[:img {:src "images/on-design.gif" :border "0" :alt "Create designs"}]]
|
|
[:div.modal-right
|
|
[:div.modal-title
|
|
[:h2 "Design libraries, styles and components"]]
|
|
[:div.modal-content
|
|
[:p "Create beautiful user interfaces in collaboration with all team members."]
|
|
[:p "Maintain consistency at scale with components, libraries and design systems."]]
|
|
[:div.modal-navigation
|
|
[:button.btn-secondary {:on-click #(navigate :feature2)} "Continue"]
|
|
[:span.skip {:on-click skip} "Skip"]
|
|
[:ul.step-dots
|
|
[:li.current]
|
|
[:li]
|
|
[:li]
|
|
[:li]]]]]))
|
|
|
|
(defmethod render-slide :feature2
|
|
[{:keys [navigate skip] :as props}]
|
|
(mf/html
|
|
[:div.modal-container.onboarding.feature
|
|
[:div.modal-left
|
|
[:img {:src "images/on-proto.gif" :border "0" :alt "Interactive prototypes"}]]
|
|
[:div.modal-right
|
|
[:div.modal-title
|
|
[:h2 "Bring your designs to life with interactions"]]
|
|
[:div.modal-content
|
|
[:p "Create rich interactions to mimic the product behaviour."]
|
|
[:p "Share to stakeholders, present proposals to your team and start user testing with your designs, all in one place."]]
|
|
[:div.modal-navigation
|
|
[:button.btn-secondary {:on-click #(navigate :feature3)} "Continue"]
|
|
[:span.skip {:on-click skip} "Skip"]
|
|
[:ul.step-dots
|
|
[:li]
|
|
[:li.current]
|
|
[:li]
|
|
[:li]]]]]))
|
|
|
|
(defmethod render-slide :feature3
|
|
[{:keys [navigate skip] :as props}]
|
|
(mf/html
|
|
[:div.modal-container.onboarding.feature
|
|
[:div.modal-left
|
|
[:img {:src "images/on-feed.gif" :border "0" :alt "Get feedback"}]]
|
|
[:div.modal-right
|
|
[:div.modal-title
|
|
[:h2 "Get feedback, present and share your work"]]
|
|
[:div.modal-content
|
|
[:p "All team members working simultaneously with real time design multiplayer and centralised comments, ideas and feedback right over the designs."]]
|
|
[:div.modal-navigation
|
|
[:button.btn-secondary {:on-click #(navigate :feature4)} "Continue"]
|
|
[:span.skip {:on-click skip} "Skip"]
|
|
[:ul.step-dots
|
|
[:li]
|
|
[:li]
|
|
[:li.current]
|
|
[:li]]]]]))
|
|
|
|
(defmethod render-slide :feature4
|
|
[{:keys [navigate skip] :as props}]
|
|
(mf/html
|
|
[:div.modal-container.onboarding.feature
|
|
[:div.modal-left
|
|
[:img {:src "images/on-handoff.gif" :border "0" :alt "Handoff and lowcode"}]]
|
|
[:div.modal-right
|
|
[:div.modal-title
|
|
[:h2 "One shared source of truth"]]
|
|
[:div.modal-content
|
|
[:p "Sync the design and code of all your components and styles and get code snippets."]
|
|
[:p "Get and provide code specifications like markup (SVG, HTML) or styles (CSS, Less, Stylus…)."]]
|
|
[:div.modal-navigation
|
|
[:button.btn-secondary {:on-click skip} "Continue"]
|
|
[:span.skip {:on-click skip} "Skip"]
|
|
[:ul.step-dots
|
|
[:li]
|
|
[:li]
|
|
[:li]
|
|
[:li.current]]]]]))
|
|
|
|
(mf/defc onboarding-modal
|
|
{::mf/register modal/components
|
|
::mf/register-as :onboarding}
|
|
[props]
|
|
(let [slide (mf/use-state :start)
|
|
klass (mf/use-state "fadeInDown")
|
|
|
|
navigate
|
|
(mf/use-callback #(reset! slide %))
|
|
|
|
skip
|
|
(mf/use-callback
|
|
(st/emitf (modal/hide)
|
|
(modal/show {:type :onboarding-team})
|
|
(du/mark-onboarding-as-viewed)))]
|
|
|
|
(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)))))
|
|
|
|
[:div.modal-overlay
|
|
[:div.animated {:class @klass}
|
|
(render-slide
|
|
(assoc props
|
|
:slide @slide
|
|
:navigate navigate
|
|
:skip skip))]]))
|
|
|
|
(s/def ::name ::us/not-empty-string)
|
|
(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}
|
|
[props]
|
|
(let [close (mf/use-fn (st/emitf (modal/hide)))
|
|
form (fm/use-form :spec ::team-form
|
|
:initial {})
|
|
|
|
on-submit
|
|
(mf/use-callback (partial on-submit form))]
|
|
[:div.modal-overlay
|
|
[:div.modal-container.onboarding.final.animated.fadeInUp
|
|
[:div.modal-left
|
|
[:img {:src "images/onboarding-team.jpg" :border "0" :alt "Create a team"}]
|
|
[:h2 "Create a team"]
|
|
[:p "Are you working with someone? Create a team to work together on projects and share design assets."]
|
|
|
|
[:& fm/form {:form form
|
|
:on-submit on-submit}
|
|
[:& fm/input {:type "text"
|
|
:name :name
|
|
: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"]
|
|
[:p "Jump right away into Penpot and start designing by your own. You will still have the chance to create teams later."]
|
|
[:button.btn-primary.btn-large {:on-click close} "Start right away"]]
|
|
|
|
|
|
[:img.deco {:src "images/deco-left.png" :border "0"}]
|
|
[:img.deco.right {:src "images/deco-right.png" :border "0"}]]]))
|
|
|