mirror of
https://github.com/penpot/penpot.git
synced 2025-05-07 19:55:53 +02:00
574 lines
21 KiB
Clojure
574 lines
21 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/.
|
|
;;
|
|
;; Copyright (c) UXBOX Labs SL
|
|
|
|
(ns app.main.ui.onboarding
|
|
(:require
|
|
[app.config :as cf]
|
|
[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.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
|
|
(for [i (range total)]
|
|
[:li {:class (dom/classnames :current (= slide i))
|
|
:on-click #(navigate i)}])])
|
|
|
|
(mf/defc onboarding-start
|
|
[{:keys [next] :as props}]
|
|
[:div.modal-container.onboarding
|
|
[:div.modal-left.welcome
|
|
[:img {:src "images/login-on.jpg" :border "0" :alt "Penpot"}]]
|
|
[:div.modal-right
|
|
[:div.modal-title
|
|
[:h2 "Welcome to Penpot!"]]
|
|
[:span.release "Alpha version " (:main @cf/version)]
|
|
[:div.modal-content
|
|
[:p "We are very happy to introduce you to the very first Alpha 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 next} "Continue"]]]
|
|
[:img.deco {:src "images/deco-left.png" :border "0"}]
|
|
[:img.deco.right {:src "images/deco-right.png" :border "0"}]])
|
|
|
|
(mf/defc onboarding-opensource
|
|
[{:keys [next] :as props}]
|
|
[: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 next} "Continue"]]]])
|
|
|
|
(defmulti render-slide :slide)
|
|
|
|
(defmethod render-slide 0
|
|
[{:keys [navigate skip slide] :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 1)} "Continue"]
|
|
[:span.skip {:on-click skip} "Skip"]
|
|
[:& navigation-bullets
|
|
{:slide slide
|
|
:navigate navigate
|
|
:total 4}]]]]))
|
|
|
|
(defmethod render-slide 1
|
|
[{:keys [navigate slide 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 2)} "Continue"]
|
|
[:span.skip {:on-click skip} "Skip"]
|
|
[:& navigation-bullets
|
|
{:slide slide
|
|
:navigate navigate
|
|
:total 4}]]]]))
|
|
|
|
(defmethod render-slide 2
|
|
[{:keys [navigate slide 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 3)} "Continue"]
|
|
[:span.skip {:on-click skip} "Skip"]
|
|
[:& navigation-bullets
|
|
{:slide slide
|
|
:navigate navigate
|
|
:total 4}]]]]))
|
|
|
|
(defmethod render-slide 3
|
|
[{:keys [navigate slide 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} "Start"]
|
|
[:& navigation-bullets
|
|
{:slide slide
|
|
:navigate navigate
|
|
:total 4}]]]]))
|
|
|
|
(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}
|
|
(case @slide
|
|
:start [:& onboarding-start {:next #(navigate :opensource)}]
|
|
:opensource [:& onboarding-opensource {:next #(navigate 0)}]
|
|
(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]))
|
|
|
|
(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-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
|
|
(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
|
|
[: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"}]]]))
|
|
|
|
|
|
;;; --- RELEASE NOTES MODAL
|
|
|
|
(defmulti render-release-notes :version)
|
|
|
|
(mf/defc 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})))
|
|
|
|
(mf/defc release-notes-modal
|
|
{::mf/wrap-props false
|
|
::mf/register modal/components
|
|
::mf/register-as :release-notes}
|
|
[props]
|
|
(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.6")))
|
|
|
|
(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}]]]]]])))
|
|
|
|
(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}]]]]]])))
|
|
|
|
(defmethod render-release-notes "1.6"
|
|
[{: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.6.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.6.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/custom-fonts.gif" :border "0" :alt "Upload/use custom fonts"}]]
|
|
[:div.modal-right
|
|
[:div.modal-title
|
|
[:h2 "Upload/use custom fonts"]]
|
|
[:div.modal-content
|
|
[:p "From now on you can upload fonts to a Penpot team and use them across its files. This is one of the most requested features since our first release (we listen!)"]
|
|
[:p "We hope you enjoy having more typography options and our brand new font selector."]]
|
|
[: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/scale-text.gif" :border "0" :alt "Interactively scale text"}]]
|
|
[:div.modal-right
|
|
[:div.modal-title
|
|
[:h2 "Scale text layers at resizing"]]
|
|
[:div.modal-content
|
|
[:p "New main menu option “Scale text (K)” to enable scale text mode."]
|
|
[:p "Disabled by default, this tool is disabled back after being used."]]
|
|
[: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/performance.gif" :border "0" :alt "Performance improvements"}]]
|
|
[:div.modal-right
|
|
[:div.modal-title
|
|
[:h2 "Performance improvements"]]
|
|
[:div.modal-content
|
|
[:p "Penpot brings important improvements handling large files. The performance in managing files in the dashboard has also been improved."]
|
|
[:p "You should have the feeling that files and layers show up a bit faster :)"]]
|
|
[: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/shapes-to-path.gif" :border "0" :alt "Shapes to path"}]]
|
|
[:div.modal-right
|
|
[:div.modal-title
|
|
[:h2 "Shapes to path"]]
|
|
[:div.modal-content
|
|
[:p "Now you can edit basic shapes like rectangles, circles and image containers by double clicking."]
|
|
[:p "An easy way to increase speed by working with vectors!"]]
|
|
[:div.modal-navigation
|
|
[:button.btn-secondary {:on-click finish} "Start!"]
|
|
[:& navigation-bullets
|
|
{:slide @slide
|
|
:navigate navigate
|
|
:total 4}]]]]]])))
|