mirror of
https://github.com/penpot/penpot.git
synced 2025-03-12 07:41:43 -05:00
✨ Add translations to onboarding
This commit is contained in:
alonso.torres
Andrés Moya
parent
9bea604a46
commit
23e4fa82c8
7 changed files with 618 additions and 439 deletions
|
|
@ -14,37 +14,34 @@
|
|||
[app.main.data.users :as du]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.forms :as fm]
|
||||
[app.util.dom :as dom]
|
||||
[app.main.ui.releases.common :as rc]
|
||||
[app.main.ui.releases.v1-4]
|
||||
[app.main.ui.releases.v1-5]
|
||||
[app.main.ui.releases.v1-6]
|
||||
[app.main.ui.releases.v1-7]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[app.util.object :as obj]
|
||||
[app.util.router :as rt]
|
||||
[app.util.timers :as tm]
|
||||
[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"}]]
|
||||
[:img {:src "images/login-on.jpg" :border "0" :alt (tr "onboarding.welcome.alt")}]]
|
||||
[:div.modal-right
|
||||
[:div.modal-title
|
||||
[:h2 "Welcome to Penpot!"]]
|
||||
[:h2 (tr "onboarding.welcome.title")]]
|
||||
[: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."]]
|
||||
[:p (tr "onboarding.welcome.desc1")]
|
||||
[:p (tr "onboarding.welcome.desc2")]]
|
||||
[:div.modal-navigation
|
||||
[:button.btn-secondary {:on-click next} "Continue"]]]
|
||||
[:button.btn-secondary {:on-click next} (tr "labels.continue")]]]
|
||||
[:img.deco {:src "images/deco-left.png" :border "0"}]
|
||||
[:img.deco.right {:src "images/deco-right.png" :border "0"}]])
|
||||
|
||||
|
|
@ -52,15 +49,20 @@
|
|||
[{:keys [next] :as props}]
|
||||
[:div.modal-container.onboarding.black
|
||||
[:div.modal-left
|
||||
[:img {:src "images/open-source.svg" :border "0" :alt "Open Source"}]]
|
||||
[:img {:src "images/open-source.svg" :border "0" :alt (tr "onboarding.contrib.alt")}]]
|
||||
[:div.modal-right
|
||||
[:div.modal-title
|
||||
[:h2 "Open Source Contributor?"]]
|
||||
[:h2 (tr "onboarding.contrib.title")]]
|
||||
[: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 :)"]]
|
||||
[:p (tr "onboarding.contrib.desc1")]
|
||||
[:p
|
||||
(tr "onboarding.contrib.desc2.1")
|
||||
"\u00A0"
|
||||
[:a {:href "https://github.com/penpot" :target "_blank"} (tr "onboarding.contrib.link")]
|
||||
"\u00A0"
|
||||
(tr "onboarding.contrib.desc2.2")]]
|
||||
[:div.modal-navigation
|
||||
[:button.btn-secondary {:on-click next} "Continue"]]]])
|
||||
[:button.btn-secondary {:on-click next} (tr "labels.continue")]]]])
|
||||
|
||||
(defmulti render-slide :slide)
|
||||
|
||||
|
|
@ -69,17 +71,17 @@
|
|||
(mf/html
|
||||
[:div.modal-container.onboarding.feature
|
||||
[:div.modal-left
|
||||
[:img {:src "images/on-design.gif" :border "0" :alt "Create designs"}]]
|
||||
[:img {:src "images/on-design.gif" :border "0" :alt (tr "onboarding.slide.0.alt")}]]
|
||||
[:div.modal-right
|
||||
[:div.modal-title
|
||||
[:h2 "Design libraries, styles and components"]]
|
||||
[:h2 (tr "onboarding.slide.0.title")]]
|
||||
[: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."]]
|
||||
[:p (tr "onboarding.slide.0.desc1")]
|
||||
[:p (tr "onboarding.slide.0.desc2")]]
|
||||
[:div.modal-navigation
|
||||
[:button.btn-secondary {:on-click #(navigate 1)} "Continue"]
|
||||
[:span.skip {:on-click skip} "Skip"]
|
||||
[:& navigation-bullets
|
||||
[:button.btn-secondary {:on-click #(navigate 1)} (tr "labels.continue")]
|
||||
[:span.skip {:on-click skip} (tr "labels.skip")]
|
||||
[:& rc/navigation-bullets
|
||||
{:slide slide
|
||||
:navigate navigate
|
||||
:total 4}]]]]))
|
||||
|
|
@ -89,17 +91,17 @@
|
|||
(mf/html
|
||||
[:div.modal-container.onboarding.feature
|
||||
[:div.modal-left
|
||||
[:img {:src "images/on-proto.gif" :border "0" :alt "Interactive prototypes"}]]
|
||||
[:img {:src "images/on-proto.gif" :border "0" :alt (tr "onboarding.slide.1.alt")}]]
|
||||
[:div.modal-right
|
||||
[:div.modal-title
|
||||
[:h2 "Bring your designs to life with interactions"]]
|
||||
[:h2 (tr "onboarding.slide.1.title")]]
|
||||
[: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."]]
|
||||
[:p (tr "onboarding.slide.1.desc1")]
|
||||
[:p (tr "onboarding.slide.1.desc2")]]
|
||||
[:div.modal-navigation
|
||||
[:button.btn-secondary {:on-click #(navigate 2)} "Continue"]
|
||||
[:span.skip {:on-click skip} "Skip"]
|
||||
[:& navigation-bullets
|
||||
[:button.btn-secondary {:on-click #(navigate 2)} (tr "labels.continue")]
|
||||
[:span.skip {:on-click skip} (tr "labels.skip")]
|
||||
[:& rc/navigation-bullets
|
||||
{:slide slide
|
||||
:navigate navigate
|
||||
:total 4}]]]]))
|
||||
|
|
@ -109,16 +111,16 @@
|
|||
(mf/html
|
||||
[:div.modal-container.onboarding.feature
|
||||
[:div.modal-left
|
||||
[:img {:src "images/on-feed.gif" :border "0" :alt "Get feedback"}]]
|
||||
[:img {:src "images/on-feed.gif" :border "0" :alt (tr "onboarding.slide.2.alt")}]]
|
||||
[:div.modal-right
|
||||
[:div.modal-title
|
||||
[:h2 "Get feedback, present and share your work"]]
|
||||
[:h2 (tr "onboarding.slide.2.title")]]
|
||||
[:div.modal-content
|
||||
[:p "All team members working simultaneously with real time design multiplayer and centralised comments, ideas and feedback right over the designs."]]
|
||||
[:p (tr "onboarding.slide.2.desc1")]]
|
||||
[:div.modal-navigation
|
||||
[:button.btn-secondary {:on-click #(navigate 3)} "Continue"]
|
||||
[:span.skip {:on-click skip} "Skip"]
|
||||
[:& navigation-bullets
|
||||
[:button.btn-secondary {:on-click #(navigate 3)} (tr "labels.continue")]
|
||||
[:span.skip {:on-click skip} (tr "labels.skip")]
|
||||
[:& rc/navigation-bullets
|
||||
{:slide slide
|
||||
:navigate navigate
|
||||
:total 4}]]]]))
|
||||
|
|
@ -128,16 +130,16 @@
|
|||
(mf/html
|
||||
[:div.modal-container.onboarding.feature
|
||||
[:div.modal-left
|
||||
[:img {:src "images/on-handoff.gif" :border "0" :alt "Handoff and lowcode"}]]
|
||||
[:img {:src "images/on-handoff.gif" :border "0" :alt (tr "onboarding.slide.3.alt")}]]
|
||||
[:div.modal-right
|
||||
[:div.modal-title
|
||||
[:h2 "One shared source of truth"]]
|
||||
[:h2 (tr "onboarding.slide.3.title")]]
|
||||
[: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…)."]]
|
||||
[:p (tr "onboarding.slide.3.desc1")]
|
||||
[:p (tr "onboarding.slide.3.desc2")]]
|
||||
[:div.modal-navigation
|
||||
[:button.btn-secondary {:on-click skip} "Start"]
|
||||
[:& navigation-bullets
|
||||
[:button.btn-secondary {:on-click skip} (tr "labels.start")]
|
||||
[:& rc/navigation-bullets
|
||||
{:slide slide
|
||||
:navigate navigate
|
||||
:total 4}]]]]))
|
||||
|
|
@ -212,23 +214,23 @@
|
|||
[: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."]
|
||||
[:img {:src "images/onboarding-team.jpg" :border "0" :alt (tr "onboarding.team.create.title")}]
|
||||
[:h2 (tr "onboarding.team.create.title")]
|
||||
[:p (tr "onboarding.team.create.desc1")]
|
||||
|
||||
[:& fm/form {:form form
|
||||
:on-submit on-submit}
|
||||
[:& fm/input {:type "text"
|
||||
:name :name
|
||||
:label "Enter new team name"}]
|
||||
:label (tr "onboarding.team.create.input-placeholder")}]
|
||||
[:& fm/submit-button
|
||||
{:label "Create team"}]]]
|
||||
{:label (tr "onboarding.team.create.button")}]]]
|
||||
|
||||
[: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 {:src "images/onboarding-start.jpg" :border "0" :alt (tr "onboarding.team.start.title")}]
|
||||
[:h2 (tr "onboarding.team.start.title")]
|
||||
[:p (tr "onboarding.team.start.desc1")]
|
||||
[:button.btn-primary.btn-large {:on-click close} (tr "onboarding.team.start.button")]]
|
||||
|
||||
|
||||
[:img.deco {:src "images/deco-left.png" :border "0"}]
|
||||
|
|
@ -237,8 +239,6 @@
|
|||
|
||||
;;; --- RELEASE NOTES MODAL
|
||||
|
||||
(defmulti render-release-notes :version)
|
||||
|
||||
(mf/defc release-notes
|
||||
[{:keys [version] :as props}]
|
||||
(let [slide (mf/use-state :start)
|
||||
|
|
@ -276,7 +276,7 @@
|
|||
(reset! klass nil)
|
||||
(tm/dispose! sem)))))
|
||||
|
||||
(render-release-notes
|
||||
(rc/render-release-notes
|
||||
{:next next
|
||||
:navigate navigate
|
||||
:finish finish
|
||||
|
|
@ -289,392 +289,13 @@
|
|||
::mf/register modal/components
|
||||
::mf/register-as :release-notes}
|
||||
[props]
|
||||
(let [versions (methods render-release-notes)
|
||||
(let [versions (methods rc/render-release-notes)
|
||||
version (obj/get props "version")]
|
||||
(when (contains? versions version)
|
||||
[:div.relnotes
|
||||
[:> release-notes props]])))
|
||||
|
||||
(defmethod render-release-notes "0.0"
|
||||
(defmethod rc/render-release-notes "0.0"
|
||||
[params]
|
||||
(render-release-notes (assoc params :version "1.6")))
|
||||
(rc/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}]]]]]])))
|
||||
|
||||
|
||||
(defmethod render-release-notes "1.7"
|
||||
[{: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.7"}]]
|
||||
[: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.7 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/export.gif" :border "0" :alt "Export & Import"}]]
|
||||
[:div.modal-right
|
||||
[:div.modal-title
|
||||
[:h2 "Export and import Penpot files"]]
|
||||
[:div.modal-content
|
||||
[:p [:strong "Export files from the dashboard to your computer and import them from your computer to your projects."]
|
||||
" This means that Penpot users can freely save and share Penpot files."]
|
||||
[:p "Exported files linked to shared libraries provide
|
||||
different ways to export their assets. Choose the one that
|
||||
suits you better!"]]
|
||||
[: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/constraints.gif" :border "0" :alt "Resizing constraints"}]]
|
||||
[:div.modal-right
|
||||
[:div.modal-title
|
||||
[:h2 "Resizing constraints"]]
|
||||
[:div.modal-content
|
||||
[:p "Constraints allow you to " [:strong "decide how layers will behave when resizing its container"] " being a group or an artboard."]
|
||||
[:p "You can manually set horizontal and vertical
|
||||
constraints for every layer. This is especially useful to
|
||||
control how your designs look when working with responsive
|
||||
components."]]
|
||||
[: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/group-components.gif" :border "0" :alt "Library assets management improvements"}]]
|
||||
[:div.modal-right
|
||||
[:div.modal-title
|
||||
[:h2 "Library assets management"]]
|
||||
[:div.modal-content
|
||||
[:p [:strong "Collapse/expand groups"] " at any nesting level, so you don’t have to manage their visibility individually."]
|
||||
[:p "Penpot " [:strong "remembers the last library state"] ", so you don’t have to collapse a group you want hidden every time."]
|
||||
[:p "Easily " [:strong "rename and ungroup"] " asset groups."]]
|
||||
[: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/copy-paste.gif" :border "0" :alt "Paste components from file to file"}]]
|
||||
[:div.modal-right
|
||||
[:div.modal-title
|
||||
[:h2 "Paste components from file to file"]]
|
||||
[:div.modal-content
|
||||
[:p "Do you sometimes copy and paste component copies that belong to a library already shared by the original and destination files? From now on, those component copies are aware of this and will retain their linkage to the library."]]
|
||||
[:div.modal-navigation
|
||||
[:button.btn-secondary {:on-click finish} "Start!"]
|
||||
[:& navigation-bullets
|
||||
{:slide @slide
|
||||
:navigate navigate
|
||||
:total 4}]]]]]])))
|
||||
|
|
|
|||
19
frontend/src/app/main/ui/releases/common.cljs
Normal file
19
frontend/src/app/main/ui/releases/common.cljs
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
;; 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.releases.common
|
||||
(:require
|
||||
[app.util.dom :as dom]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(defmulti render-release-notes :version)
|
||||
|
||||
(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)}])])
|
||||
109
frontend/src/app/main/ui/releases/v1_4.cljs
Normal file
109
frontend/src/app/main/ui/releases/v1_4.cljs
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
;; 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.releases.v1-4
|
||||
(:require
|
||||
[app.main.ui.releases.common :as c]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(defmethod c/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"]
|
||||
[:& c/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"]
|
||||
[:& c/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"]
|
||||
[:& c/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!"]
|
||||
[:& c/navigation-bullets
|
||||
{:slide @slide
|
||||
:navigate navigate
|
||||
:total 4}]]]]]])))
|
||||
|
||||
90
frontend/src/app/main/ui/releases/v1_5.cljs
Normal file
90
frontend/src/app/main/ui/releases/v1_5.cljs
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
;; 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.releases.v1-5
|
||||
(:require
|
||||
[app.main.ui.releases.common :as c]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(defmethod c/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"]
|
||||
[:& c/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"]
|
||||
[:& c/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!"]
|
||||
[:& c/navigation-bullets
|
||||
{:slide @slide
|
||||
:navigate navigate
|
||||
:total 3}]]]]]])))
|
||||
|
||||
108
frontend/src/app/main/ui/releases/v1_6.cljs
Normal file
108
frontend/src/app/main/ui/releases/v1_6.cljs
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
;; 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.releases.v1-6
|
||||
(:require
|
||||
[app.main.ui.releases.common :as c]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(defmethod c/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"]
|
||||
[:& c/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"]
|
||||
[:& c/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"]
|
||||
[:& c/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!"]
|
||||
[:& c/navigation-bullets
|
||||
{:slide @slide
|
||||
:navigate navigate
|
||||
:total 4}]]]]]])))
|
||||
114
frontend/src/app/main/ui/releases/v1_7.cljs
Normal file
114
frontend/src/app/main/ui/releases/v1_7.cljs
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
;; 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.releases.v1-7
|
||||
(:require
|
||||
[app.main.ui.releases.common :as c]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(defmethod c/render-release-notes "1.7"
|
||||
[{: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.7"}]]
|
||||
[: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.7 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/export.gif" :border "0" :alt "Export & Import"}]]
|
||||
[:div.modal-right
|
||||
[:div.modal-title
|
||||
[:h2 "Export and import Penpot files"]]
|
||||
[:div.modal-content
|
||||
[:p [:strong "Export files from the dashboard to your computer and import them from your computer to your projects."]
|
||||
" This means that Penpot users can freely save and share Penpot files."]
|
||||
[:p "Exported files linked to shared libraries provide
|
||||
different ways to export their assets. Choose the one that
|
||||
suits you better!"]]
|
||||
[:div.modal-navigation
|
||||
[:button.btn-secondary {:on-click next} "Continue"]
|
||||
[:& c/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/constraints.gif" :border "0" :alt "Resizing constraints"}]]
|
||||
[:div.modal-right
|
||||
[:div.modal-title
|
||||
[:h2 "Resizing constraints"]]
|
||||
[:div.modal-content
|
||||
[:p "Constraints allow you to " [:strong "decide how layers will behave when resizing its container"] " being a group or an artboard."]
|
||||
[:p "You can manually set horizontal and vertical
|
||||
constraints for every layer. This is especially useful to
|
||||
control how your designs look when working with responsive
|
||||
components."]]
|
||||
[:div.modal-navigation
|
||||
[:button.btn-secondary {:on-click next} "Continue"]
|
||||
[:& c/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/group-components.gif" :border "0" :alt "Library assets management improvements"}]]
|
||||
[:div.modal-right
|
||||
[:div.modal-title
|
||||
[:h2 "Library assets management"]]
|
||||
[:div.modal-content
|
||||
[:p [:strong "Collapse/expand groups"] " at any nesting level, so you don’t have to manage their visibility individually."]
|
||||
[:p "Penpot " [:strong "remembers the last library state"] ", so you don’t have to collapse a group you want hidden every time."]
|
||||
[:p "Easily " [:strong "rename and ungroup"] " asset groups."]]
|
||||
[:div.modal-navigation
|
||||
[:button.btn-secondary {:on-click next} "Continue"]
|
||||
[:& c/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/copy-paste.gif" :border "0" :alt "Paste components from file to file"}]]
|
||||
[:div.modal-right
|
||||
[:div.modal-title
|
||||
[:h2 "Paste components from file to file"]]
|
||||
[:div.modal-content
|
||||
[:p "Do you sometimes copy and paste component copies that belong to a library already shared by the original and destination files? From now on, those component copies are aware of this and will retain their linkage to the library."]]
|
||||
[:div.modal-navigation
|
||||
[:button.btn-secondary {:on-click finish} "Start!"]
|
||||
[:& c/navigation-bullets
|
||||
{:slide @slide
|
||||
:navigate navigate
|
||||
:total 4}]]]]]])))
|
||||
|
|
@ -1160,6 +1160,12 @@ msgstr "Show only yours comments"
|
|||
msgid "labels.sign-out"
|
||||
msgstr "Sign out"
|
||||
|
||||
msgid "labels.skip"
|
||||
msgstr "Skip"
|
||||
|
||||
msgid "labels.start"
|
||||
msgstr "Start"
|
||||
|
||||
#: src/app/main/ui/settings/profile.cljs
|
||||
msgid "labels.update"
|
||||
msgstr "Update"
|
||||
|
|
@ -1444,6 +1450,118 @@ msgstr "Profile saved successfully!"
|
|||
msgid "notifications.validation-email-sent"
|
||||
msgstr "Verification email sent to %s. Check your email!"
|
||||
|
||||
msgid "onboarding.contrib.alt"
|
||||
msgstr "Open Source"
|
||||
|
||||
msgid "onboarding.contrib.desc1"
|
||||
msgstr ""
|
||||
"Penpot is Open Source, made by and for the community. If you want to "
|
||||
"collaborate, you are more than welcome!"
|
||||
|
||||
msgid "onboarding.contrib.desc2.1"
|
||||
msgstr "You can access the"
|
||||
|
||||
msgid "onboarding.contrib.desc2.2"
|
||||
msgstr "and follow the contribution instructions :)"
|
||||
|
||||
msgid "onboarding.contrib.link"
|
||||
msgstr "project on github"
|
||||
|
||||
msgid "onboarding.contrib.title"
|
||||
msgstr "Open Source Contributor?"
|
||||
|
||||
msgid "onboarding.slide.0.alt"
|
||||
msgstr "Create designs"
|
||||
|
||||
msgid "onboarding.slide.0.desc1"
|
||||
msgstr "Create beautiful user interfaces in collaboration with all team members."
|
||||
|
||||
msgid "onboarding.slide.0.desc2"
|
||||
msgstr "Maintain consistency at scale with components, libraries and design systems."
|
||||
|
||||
msgid "onboarding.slide.0.title"
|
||||
msgstr "Design libraries, styles and components"
|
||||
|
||||
msgid "onboarding.slide.1.alt"
|
||||
msgstr "Interactive prototypes"
|
||||
|
||||
msgid "onboarding.slide.1.desc1"
|
||||
msgstr "Create rich interactions to mimic the product behaviour."
|
||||
|
||||
msgid "onboarding.slide.1.desc2"
|
||||
msgstr ""
|
||||
"Share to stakeholders, present proposals to your team and start user "
|
||||
"testing with your designs, all in one place."
|
||||
|
||||
msgid "onboarding.slide.1.title"
|
||||
msgstr "Bring your designs to life with interactions"
|
||||
|
||||
msgid "onboarding.slide.2.alt"
|
||||
msgstr "Get feedback"
|
||||
|
||||
msgid "onboarding.slide.2.desc1"
|
||||
msgstr ""
|
||||
"All team members working simultaneously with real time design multiplayer "
|
||||
"and centralised comments, ideas and feedback right over the designs."
|
||||
|
||||
msgid "onboarding.slide.2.title"
|
||||
msgstr "Get feedback, present and share your work"
|
||||
|
||||
msgid "onboarding.slide.3.alt"
|
||||
msgstr "Handoff and lowcode"
|
||||
|
||||
msgid "onboarding.slide.3.desc1"
|
||||
msgstr ""
|
||||
"Sync the design and code of all your components and styles and get code "
|
||||
"snippets."
|
||||
|
||||
msgid "onboarding.slide.3.desc2"
|
||||
msgstr ""
|
||||
"Get and provide code specifications like markup (SVG, HTML) or styles (CSS, "
|
||||
"Less, Stylus…)."
|
||||
|
||||
msgid "onboarding.slide.3.title"
|
||||
msgstr "One shared source of truth"
|
||||
|
||||
msgid "onboarding.team.create.button"
|
||||
msgstr "Create a team"
|
||||
|
||||
msgid "onboarding.team.create.desc1"
|
||||
msgstr ""
|
||||
"Are you working with someone? Create a team to work together on projects "
|
||||
"and share design assets."
|
||||
|
||||
msgid "onboarding.team.create.input-placeholder"
|
||||
msgstr "Enter new team name"
|
||||
|
||||
msgid "onboarding.team.create.title"
|
||||
msgstr "Create team"
|
||||
|
||||
msgid "onboarding.team.start.button"
|
||||
msgstr "Start right away"
|
||||
|
||||
msgid "onboarding.team.start.desc1"
|
||||
msgstr ""
|
||||
"Jump right away into Penpot and start designing by your own. You will still "
|
||||
"have the chance to create teams later."
|
||||
|
||||
msgid "onboarding.team.start.title"
|
||||
msgstr "Start designing"
|
||||
|
||||
msgid "onboarding.welcome.alt"
|
||||
msgstr "Penpot"
|
||||
|
||||
msgid "onboarding.welcome.desc1"
|
||||
msgstr "We are very happy to introduce you to the very first Alpha release."
|
||||
|
||||
msgid "onboarding.welcome.desc2"
|
||||
msgstr ""
|
||||
"Penpot is still at development stage and there will be constant updates. We "
|
||||
"hope you enjoy the first stable version."
|
||||
|
||||
msgid "onboarding.welcome.title"
|
||||
msgstr "Welcome to Penpot!"
|
||||
|
||||
#: src/app/main/ui/auth/recovery.cljs
|
||||
msgid "profile.recovery.go-to-login"
|
||||
msgstr "Go to login"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue