From b93b8a89661ff9057a7fb0d24f4422e95db1fab7 Mon Sep 17 00:00:00 2001 From: Pablo Alba Date: Wed, 27 Jul 2022 13:07:02 +0200 Subject: [PATCH] :tada: Add new style and content for onboarding slides --- frontend/resources/images/community.svg | 1 + frontend/resources/images/contributing.svg | 1 + frontend/resources/images/deco-circle.svg | 1 + frontend/resources/images/deco-line1.svg | 1 + frontend/resources/images/deco-line2.svg | 1 + frontend/resources/images/deco-square.svg | 1 + .../resources/images/onboarding-people.svg | 1 + frontend/resources/images/user-guide.svg | 1 + frontend/resources/images/video-tutorials.svg | 1 + .../resources/styles/main/partials/modal.scss | 118 ++++++++++ frontend/src/app/main/ui/onboarding.cljs | 202 +++++++----------- frontend/translations/en.po | 44 +++- frontend/translations/es.po | 36 ++++ 13 files changed, 272 insertions(+), 137 deletions(-) create mode 100644 frontend/resources/images/community.svg create mode 100644 frontend/resources/images/contributing.svg create mode 100644 frontend/resources/images/deco-circle.svg create mode 100644 frontend/resources/images/deco-line1.svg create mode 100644 frontend/resources/images/deco-line2.svg create mode 100644 frontend/resources/images/deco-square.svg create mode 100644 frontend/resources/images/onboarding-people.svg create mode 100644 frontend/resources/images/user-guide.svg create mode 100644 frontend/resources/images/video-tutorials.svg diff --git a/frontend/resources/images/community.svg b/frontend/resources/images/community.svg new file mode 100644 index 000000000..555c4838f --- /dev/null +++ b/frontend/resources/images/community.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/resources/images/contributing.svg b/frontend/resources/images/contributing.svg new file mode 100644 index 000000000..6e77c09ab --- /dev/null +++ b/frontend/resources/images/contributing.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/resources/images/deco-circle.svg b/frontend/resources/images/deco-circle.svg new file mode 100644 index 000000000..c3141e438 --- /dev/null +++ b/frontend/resources/images/deco-circle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/resources/images/deco-line1.svg b/frontend/resources/images/deco-line1.svg new file mode 100644 index 000000000..8009a6014 --- /dev/null +++ b/frontend/resources/images/deco-line1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/resources/images/deco-line2.svg b/frontend/resources/images/deco-line2.svg new file mode 100644 index 000000000..fe70ee9bd --- /dev/null +++ b/frontend/resources/images/deco-line2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/resources/images/deco-square.svg b/frontend/resources/images/deco-square.svg new file mode 100644 index 000000000..31e0d2cfc --- /dev/null +++ b/frontend/resources/images/deco-square.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/resources/images/onboarding-people.svg b/frontend/resources/images/onboarding-people.svg new file mode 100644 index 000000000..e35d57f0f --- /dev/null +++ b/frontend/resources/images/onboarding-people.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/resources/images/user-guide.svg b/frontend/resources/images/user-guide.svg new file mode 100644 index 000000000..50a2d4740 --- /dev/null +++ b/frontend/resources/images/user-guide.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/resources/images/video-tutorials.svg b/frontend/resources/images/video-tutorials.svg new file mode 100644 index 000000000..059fed72b --- /dev/null +++ b/frontend/resources/images/video-tutorials.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/resources/styles/main/partials/modal.scss b/frontend/resources/styles/main/partials/modal.scss index 956d755af..4f0161563 100644 --- a/frontend/resources/styles/main/partials/modal.scss +++ b/frontend/resources/styles/main/partials/modal.scss @@ -868,6 +868,92 @@ } } + &.onboarding-v2 { + min-height: 464px; + min-width: 752px; + .modal-left { + background-color: $color-gray-50; + width: 297px; + } + + .welcome img { + width: 260.9px; + height: 402.96px; + position: absolute; + bottom: -10px; + } + + .modal-right { + padding: 0; + } + + .release-container { + width: 100%; + text-align: right; + position: relative; + height: 2rem; + } + + .release { + background-color: $color-primary; + border-radius: 4px; + color: #1f1f1f; + padding: 4px $size-1; + display: inline-block; + margin-top: 1rem; + margin-right: 1rem; + } + + .right-content { + padding: $size-6; + + .modal-content { + padding: $size-1 0; + p { + margin-top: 0.4rem; + } + } + + .welcome-card { + display: flex; + color: $color-black; + margin-top: $size-5; + width: 90%; + + .title a { + font-weight: bold; + color: $color-black; + text-decoration: none; + &:hover { + color: $color-primary-dark; + } + } + + .description { + font-size: 12px; + text-decoration: none; + text-transform: none; + } + + img { + width: 48px; + height: 48px; + margin-right: 6px; + } + } + } + + .modal-navigation { + width: 100%; + padding: 0 2rem 2rem 0; + + button { + margin-left: auto; + padding: 0 0.5rem; + } + } + } + &.black { .modal-left { background-color: $color-black; @@ -1056,6 +1142,38 @@ top: -18px; width: 60px; + &.square { + top: -18px; + left: 631px; + width: 24px; + height: 24px; + color: $color-primary; + } + + &.circle { + top: -16px; + left: 21px; + width: 24px; + height: 24px; + color: $color-primary; + } + + &.line1 { + top: 110px; + left: -12px; + width: 16px; + height: 49px; + color: $color-primary; + } + + &.line2 { + top: 440px; + left: 733px; + width: 46px; + height: 43px; + color: $color-primary; + } + &.top { width: 183px; top: -106px; diff --git a/frontend/src/app/main/ui/onboarding.cljs b/frontend/src/app/main/ui/onboarding.cljs index 1f904576a..6f1c972e1 100644 --- a/frontend/src/app/main/ui/onboarding.cljs +++ b/frontend/src/app/main/ui/onboarding.cljs @@ -7,147 +7,102 @@ (ns app.main.ui.onboarding (:require [app.config :as cf] + [app.main.data.events :as ev] [app.main.data.modal :as modal] - [app.main.data.users :as du] + [app.main.data.users :as du] [app.main.store :as st] [app.main.ui.onboarding.newsletter] [app.main.ui.onboarding.questions] [app.main.ui.onboarding.team-choice] [app.main.ui.onboarding.templates] - [app.main.ui.releases.common :as rc] [app.util.i18n :as i18n :refer [tr]] [app.util.timers :as tm] + [potok.core :as ptk] [rumext.alpha :as mf])) ;; --- ONBOARDING LIGHTBOX -(mf/defc onboarding-start +(defn send-event + [event-name] + (st/emit! (ptk/event ::ev/event {::ev/name event-name + ::ev/origin "dashboard"}))) + + +(mf/defc onboarding-welcome [{:keys [next] :as props}] - [:div.modal-container.onboarding - [:div.modal-left.welcome - [:img {:src "images/login-on.jpg" :border "0" :alt (tr "onboarding.welcome.alt")}]] - [:div.modal-right - [:div.modal-title - [:h2 {:data-test "onboarding-welcome"} (tr "onboarding.welcome.title")]] - [:span.release "Beta version " (:main @cf/version)] - [:div.modal-content - [:p (tr "onboarding.welcome.desc1")] - [:p (tr "onboarding.welcome.desc2")] - [:p (tr "onboarding.welcome.desc3")]] - [:div.modal-navigation - [:button.btn-secondary {:on-click next :data-test "onboarding-next-btn"} (tr "labels.continue")]]] - [:img.deco {:src "images/deco-left.png" :border "0"}] - [:img.deco.right {:src "images/deco-right.png" :border "0"}]]) + (let [go-next + (fn [] + (send-event "onboarding-step1-continue") + (next))] + [:div.modal-container.onboarding.onboarding-v2 + [:div.modal-left.welcome + [:img {:src "images/onboarding-people.svg" :border "0" :alt (tr "onboarding.welcome.alt")}]] + [:div.modal-right + [:div.release-container [:span.release "Beta " (:main @cf/version)]] + [:div.right-content + [:div.modal-title + [:h2 {:data-test "onboarding-welcome"} (tr "onboarding-v2.welcome.title")]] -(mf/defc onboarding-opensource + [:div.modal-content + [:p (tr "onboarding-v2.welcome.desc1")] + [:div.welcome-card + [:img {:src "images/community.svg" :border "0"}] + [:div + [:div.title [:a {:href "https://community.penpot.app/" :target "_blank" :on-click #(send-event "onboarding-community-link")} (tr "onboarding-v2.welcome.desc2.title")]] + [:div.description (tr "onboarding-v2.welcome.desc2")]]] + + [:div.welcome-card + [:img {:src "images/contributing.svg" :border "0"}] + [:div + [:div.title [:a {:href "https://help.penpot.app/contributing-guide/" :target "_blank" :on-click #(send-event "onboarding-contributing-link")} (tr "onboarding-v2.welcome.desc3.title")]] + [:div.description (tr "onboarding-v2.welcome.desc3")]]]]] + [:div.modal-navigation + [:button.btn-secondary {:on-click go-next :data-test "onboarding-next-btn"} (tr "labels.continue")]] + [:img.deco.square {:src "images/deco-square.svg" :border "0"}] + [:img.deco.circle {:src "images/deco-circle.svg" :border "0"}] + [:img.deco.line1 {:src "images/deco-line1.svg" :border "0"}] + [:img.deco.line2 {:src "images/deco-line2.svg" :border "0"}]]])) + +(mf/defc onboarding-before-start [{:keys [next] :as props}] - [:div.modal-container.onboarding.black - [:div.modal-left - [:img {:src "images/open-source.svg" :border "0" :alt (tr "onboarding.contrib.alt")}]] - [:div.modal-right - [:div.modal-title - [:h2 (tr "onboarding.contrib.title")]] - [:div.modal-content - [: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 :data-test "opsource-next-btn"} (tr "labels.continue")]]]]) + (let [go-next + (fn [] + (send-event "onboarding-step2-continue") + (next))] + [:div.modal-container.onboarding.onboarding-v2 + [:div.modal-left.welcome + [:img {:src "images/onboarding-people.svg" :border "0" :alt (tr "onboarding.welcome.alt")}]] + [:div.modal-right + [:div.release-container [:span.release "Beta " (:main @cf/version)]] + [:div.right-content + [:div.modal-title + [:h2 {:data-test "onboarding-welcome"} (tr "onboarding-v2.before-start.title")]] -(defmulti render-slide :slide) + [:div.modal-content + [:p (tr "onboarding-v2.before-start.desc1")] + [:div.welcome-card + [:img {:src "images/user-guide.svg" :border "0"}] + [:div + [:div.title [:a {:href "https://help.penpot.app/user-guide/" :target "_blank" :on-click #(send-event "onboarding-user-guide-link")} (tr "onboarding-v2.before-start.desc2.title")]] + [:div.description (tr "onboarding-v2.before-start.desc2")]]] -(defmethod render-slide 0 - [{:keys [navigate skip slide] :as props}] - (mf/html - [:div.modal-container.onboarding.feature - [:div.modal-left - [:img {:src "images/on-design.gif" :border "0" :alt (tr "onboarding.slide.0.alt")}]] - [:div.modal-right - [:div.modal-title - [:h2 {:data-test "slide-0-title"} (tr "onboarding.slide.0.title")]] - [:div.modal-content - [:p (tr "onboarding.slide.0.desc1")] - [:p (tr "onboarding.slide.0.desc2")]] - [:div.modal-navigation - [:button.btn-secondary {:on-click #(navigate 1) - :data-test "slide-0-btn"} (tr "labels.continue")] - [:span.skip {:on-click skip :data-test "skip-btn"} (tr "labels.skip")] - [:& rc/navigation-bullets - {:slide slide - :navigate navigate - :total 4}]]]])) + [:div.welcome-card + [:img {:src "images/video-tutorials.svg" :border "0"}] + [:div + [:div.title [:a {:href "https://www.youtube.com/c/Penpot" :target "_blank" :on-click #(send-event "onboarding-video-tutorials-link")} (tr "onboarding-v2.before-start.desc3.title")]] + [:div.description (tr "onboarding-v2.before-start.desc3")]]]]] + [:div.modal-navigation + [:button.btn-secondary {:on-click go-next :data-test "onboarding-next-btn"} (tr "labels.continue")]] + [:img.deco.square {:src "images/deco-square.svg" :border "0"}] + [:img.deco.circle {:src "images/deco-circle.svg" :border "0"}] + [:img.deco.line1 {:src "images/deco-line1.svg" :border "0"}] + [:img.deco.line2 {:src "images/deco-line2.svg" :border "0"}]]])) -(defmethod render-slide 1 - [{:keys [navigate slide skip] :as props}] - (mf/html - [:div.modal-container.onboarding.feature - [:div.modal-left - [:img {:src "images/on-proto.gif" :border "0" :alt (tr "onboarding.slide.1.alt")}]] - [:div.modal-right - [:div.modal-title - [:h2 {:data-test "slide-1-title"} (tr "onboarding.slide.1.title")]] - [:div.modal-content - [:p (tr "onboarding.slide.1.desc1")] - [:p (tr "onboarding.slide.1.desc2")]] - [:div.modal-navigation - [:button.btn-secondary {:on-click #(navigate 2) - :data-test "slide-1-btn"} (tr "labels.continue")] - [:span.skip {:on-click skip :data-test "skip-btn"} (tr "labels.skip")] - [:& rc/navigation-bullets - {:slide slide - :navigate navigate - :total 4}]]]])) - -(defmethod render-slide 2 - [{:keys [navigate slide skip] :as props}] - (mf/html - [:div.modal-container.onboarding.feature - [:div.modal-left - [:img {:src "images/on-feed.gif" :border "0" :alt (tr "onboarding.slide.2.alt")}]] - [:div.modal-right - [:div.modal-title - [:h2 {:data-test "slide-2-title"} (tr "onboarding.slide.2.title")]] - [:div.modal-content - [:p (tr "onboarding.slide.2.desc1")]] - [:div.modal-navigation - [:button.btn-secondary {:on-click #(navigate 3) - :data-test "slide-2-btn"} (tr "labels.continue")] - [:span.skip {:on-click skip :data-test "skip-btn"} (tr "labels.skip")] - [:& rc/navigation-bullets - {:slide slide - :navigate navigate - :total 4}]]]])) - -(defmethod render-slide 3 - [{:keys [navigate slide skip] :as props}] - (mf/html - [:div.modal-container.onboarding.feature - [:div.modal-left - [:img {:src "images/on-handoff.gif" :border "0" :alt (tr "onboarding.slide.3.alt")}]] - [:div.modal-right - [:div.modal-title - [:h2 {:data-test "slide-3-title"} (tr "onboarding.slide.3.title")]] - [:div.modal-content - [:p (tr "onboarding.slide.3.desc1")] - [:p (tr "onboarding.slide.3.desc2")]] - [:div.modal-navigation - [:button.btn-secondary - {:on-click skip - :data-test "slide-3-btn"} - (tr "labels.start")] - [:& rc/navigation-bullets - {:slide slide - :navigate navigate - :total 4}]]]])) (mf/defc onboarding-modal {::mf/register modal/components ::mf/register-as :onboarding} - [props] + [_] (let [slide (mf/use-state :start) klass (mf/use-state "fadeInDown") @@ -173,10 +128,5 @@ [:div.modal-overlay [:div.animated {:class @klass} (case @slide - :start [:& onboarding-start {:next #(navigate :opensource)}] - :opensource [:& onboarding-opensource {:next #(navigate 0)}] - (render-slide - (assoc props - :slide @slide - :navigate navigate - :skip skip)))]])) + :start [:& onboarding-welcome {:next #(navigate :opensource)}] + :opensource [:& onboarding-before-start {:next skip}])]])) diff --git a/frontend/translations/en.po b/frontend/translations/en.po index e9bfc9dd3..172fe1f44 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -1966,19 +1966,41 @@ msgstr "Start designing" msgid "onboarding.welcome.alt" msgstr "Penpot" -msgid "onboarding.welcome.desc1" -msgstr "Hooray! You are already a Penpot user :)" +msgid "onboarding-v2.welcome.title" +msgstr "Welcome to Penpot!" -msgid "onboarding.welcome.desc2" -msgstr "" -"Penpot is in its first beta version thanks to the combination of core " -"features, maturity, stability and the amazing validation from the community " -"as a whole, to which you are more than welcome." +msgid "onboarding-v2.welcome.desc1" +msgstr "Penpot is Open Source and it is made by Kaleidos as well as the community, where lots of people already help each other out. Everyone can collaborate by:" -msgid "onboarding.welcome.desc3" -msgstr "" -"While you enjoy Penpot for what it is we will keep improving it, releasing " -"iterations of our hopeful plans." +msgid "onboarding-v2.welcome.desc2.title" +msgstr "Participating in the Community" + +msgid "onboarding-v2.welcome.desc2" +msgstr "A public space to learn, share and discuss about Penpot, its present and future with the entire Community and the Penpot core team." + +msgid "onboarding-v2.welcome.desc3.title" +msgstr "Contributing guide" + +msgid "onboarding-v2.welcome.desc3" +msgstr "Where you’ll find how to collaborate with translations, feature requests, core contributions, bug hunting…" + +msgid "onboarding-v2.before-start.title" +msgstr "Before you start" + +msgid "onboarding-v2.before-start.desc1" +msgstr "You should know that there are lots of resources available to help you get started with Penpot, like the User Guide and our Youtube channel." + +msgid "onboarding-v2.before-start.desc2.title" +msgstr "User guide" + +msgid "onboarding-v2.before-start.desc2" +msgstr "Detailed info about how to use Penpot. From prototyping to organizing or sharing designs." + +msgid "onboarding-v2.before-start.desc3.title" +msgstr "Video tutorials" + +msgid "onboarding-v2.before-start.desc3" +msgstr "You can watch our tutorials and the tutorials made by our community." msgid "onboarding.welcome.title" msgstr "Welcome to Penpot" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 736e0766a..e000b6145 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -2095,6 +2095,42 @@ msgstr "" "Mientras disfrutas de Penpot seguiremos haciendo mejoras, lanzando " "iteraciones de nuestros esperanzadores planes." +msgid "onboarding-v2.welcome.title" +msgstr "¡Te damos la bienvenida a Penpot!" + +msgid "onboarding-v2.welcome.desc1" +msgstr "Penpot es Código Abierto y está hecho por Kaleidos y la comunidad, donde ya hay mucha gente ayudándose unos a otros. Formas de colaborar:" + +msgid "onboarding-v2.welcome.desc2.title" +msgstr "Participantdo en la Comunidad" + +msgid "onboarding-v2.welcome.desc2" +msgstr "Un espacio público donde aprender, compatir y discutir sobre el presente y futuro de Penpot con toda la Comunidad y el el equipo de Penpot." + +msgid "onboarding-v2.welcome.desc3.title" +msgstr "Guía de contribución" + +msgid "onboarding-v2.welcome.desc3" +msgstr "Aquí encontrarás cómo colaborar con traducciones, solicitar funcionalidades, contribuir en el código, cazar errores…" + +msgid "onboarding-v2.before-start.title" +msgstr "Antes de comenzar" + +msgid "onboarding-v2.before-start.desc1" +msgstr "Hay multitud de recursos disponibles para ayudarte a comenzar con Penpot, como son la Guía de usuario y nuestro canal de Youtube." + +msgid "onboarding-v2.before-start.desc2.title" +msgstr "Guía de usuario" + +msgid "onboarding-v2.before-start.desc2" +msgstr "Información detallada sobre cómo usar Penpot. Desde prototipar a organizar y compartir diseños." + +msgid "onboarding-v2.before-start.desc3.title" +msgstr "Tutoriales de video" + +msgid "onboarding-v2.before-start.desc3" +msgstr "Puedes ver nuestros tutoriales y los hechos por la comunidad." + msgid "onboarding.welcome.title" msgstr "Te damos la bienvenida a Penpot"