diff --git a/frontend/src/app/main/ui/onboarding.cljs b/frontend/src/app/main/ui/onboarding.cljs index 92c970bd6..627f477ff 100644 --- a/frontend/src/app/main/ui/onboarding.cljs +++ b/frontend/src/app/main/ui/onboarding.cljs @@ -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}]]]]]]))) diff --git a/frontend/src/app/main/ui/releases/common.cljs b/frontend/src/app/main/ui/releases/common.cljs new file mode 100644 index 000000000..ab675091d --- /dev/null +++ b/frontend/src/app/main/ui/releases/common.cljs @@ -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)}])]) diff --git a/frontend/src/app/main/ui/releases/v1_4.cljs b/frontend/src/app/main/ui/releases/v1_4.cljs new file mode 100644 index 000000000..da5bb480b --- /dev/null +++ b/frontend/src/app/main/ui/releases/v1_4.cljs @@ -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}]]]]]]))) + diff --git a/frontend/src/app/main/ui/releases/v1_5.cljs b/frontend/src/app/main/ui/releases/v1_5.cljs new file mode 100644 index 000000000..64f83de77 --- /dev/null +++ b/frontend/src/app/main/ui/releases/v1_5.cljs @@ -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}]]]]]]))) + diff --git a/frontend/src/app/main/ui/releases/v1_6.cljs b/frontend/src/app/main/ui/releases/v1_6.cljs new file mode 100644 index 000000000..6402875d5 --- /dev/null +++ b/frontend/src/app/main/ui/releases/v1_6.cljs @@ -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}]]]]]]))) diff --git a/frontend/src/app/main/ui/releases/v1_7.cljs b/frontend/src/app/main/ui/releases/v1_7.cljs new file mode 100644 index 000000000..4a61adc38 --- /dev/null +++ b/frontend/src/app/main/ui/releases/v1_7.cljs @@ -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}]]]]]]))) diff --git a/frontend/translations/en.po b/frontend/translations/en.po index f3361ab5b..1bb119fff 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -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"