3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-24 07:16:11 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Add translations to onboarding

Browse source
This commit is contained in:
alonso.torres 2021-08-31 10:56:35 +02:00 • committed by Andrés Moya
parent 9bea604a46
commit 23e4fa82c8
7 changed files with 618 additions and 439 deletions
Download patch file Download diff file Expand all files Collapse all files

499
frontend/src/app/main/ui/onboarding.cljs
View file

@ -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
View 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
View 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
View 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
View 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
View 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}]]]]]])))