mirror of
https://github.com/penpot/penpot.git
synced 2025-05-05 07:25:55 +02:00
🎉 Add new style and content for onboarding slides
This commit is contained in:
Pablo Alba
parent
e5ebe0a295
commit
b93b8a8966
13 changed files with 272 additions and 137 deletions
1
frontend/resources/images/community.svg
Normal file
1
frontend/resources/images/community.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="48" xmlns="http://www.w3.org/2000/svg" height="48" id="screenshot-4c303e10-f7a4-11ec-a5eb-5b34f1b9a5f8" viewBox="0 0 48 48" style="-webkit-print-color-adjust: exact;" fill="none" version="1.1"><g id="shape-4c303e10-f7a4-11ec-a5eb-5b34f1b9a5f8" rx="0" ry="0"><g id="shape-4c303e11-f7a4-11ec-a5eb-5b34f1b9a5f8"><g id="fills-4c303e11-f7a4-11ec-a5eb-5b34f1b9a5f8"><rect rx="24" ry="24" x="0" y="0" transform="" width="48" height="48" style="fill: rgb(49, 239, 184); fill-opacity: 1;"/></g></g><g id="shape-fd4cc483-02bb-11ed-9a39-e16fc89e0613" rx="0" ry="0"><g id="shape-fd4cc484-02bb-11ed-9a39-e16fc89e0613"><g id="fills-fd4cc484-02bb-11ed-9a39-e16fc89e0613"><path rx="0" ry="0" d="M46,23.509699812659164C46,13.839405665317372,36.37388034188007,6,24.5,6C12.626119658119023,6,3,13.839405665317372,3,23.509699812659164C3,28.169402480873487,5.8043350427342375,34.21014187922765,12.347538461537624,37.128363452956364C10.478324786324265,42.964954748528726,6.739162393161678,44.91050987173867,6.739162393161678,44.91050987173867C16.08670085470112,48.80154604410063,23.565025641025386,41.01947369937625,23.565025641025386,41.01947369937625C38.521675213674825,41.01947369937625,46,32.158142335227694,46,23.509699812659164ZZ" style="fill: rgb(255, 255, 255);"/></g></g><g id="shape-fd4cc485-02bb-11ed-9a39-e16fc89e0613"><g id="fills-fd4cc485-02bb-11ed-9a39-e16fc89e0613"><path fill-rule="evenodd" clip-rule="evenodd" rx="0" ry="0" d="M16.410854700854543,35.29523734014356L15.495726495726558,38.15234631352496C14.940034188033678,39.8859746460289,14.238068376067531,41.348788366345616,13.489059829060352,42.57108374810332C14.859179487179063,42.38700981175589,16.1183076923071,41.95115828601456,17.234837606836663,41.41501053901948C18.48367521367436,40.81501098794752,19.504649572649214,40.108122627962985,20.211025641025117,39.55056748957804C20.56090598290575,39.274049177954566,20.825521367521105,39.04086416724158,20.99384615384588,38.88590132022409C21.077641025640332,38.80864211877133,21.13717948717931,38.75153105039135,21.170256410256115,38.71893848218497C21.18422222222216,38.70501256667876,21.19377777777754,38.69560516631009,21.198188034187297,38.69116072519091C21.198923076923165,38.69041998500461,21.199658119658125,38.68982739285548,21.199658119658125,38.689382948743514L22.16403418803384,37.68612444013661L23.565025641025386,37.68612444013661C37.124358974358984,37.68612444013661,42.69230769230671,29.912426552824854,42.69230769230671,23.50969060270245C42.69230769230671,16.30843673152458,35.24044444444371,9.333330839287555,24.5,9.333330839287555C13.75955555555447,9.333330839287555,6.307692307691468,16.30843673152458,6.307692307691468,23.50969060270245C6.307692307691468,26.957688022861475,8.4346119658112,31.73798074247452,13.686786324786226,34.08020121221398L16.410854700854543,35.29523734014356ZZM10.806888888888352,45.93982196830575C9.50586324786309,45.81619243117757,8.143608547008625,45.49508156032607,6.739162393161678,44.91048940513383C6.739162393161678,44.91048940513383,8.100755555555224,44.20204549075697,9.591128205127461,42.35760242635115C10.570940170940048,41.14552925916769,11.606615384614997,39.4428638664599,12.347538461537624,37.128347079695686C5.8043350427342375,34.210127040927546,3,28.16931674593343,3,23.50969060270245C3,13.839401541855068,12.626119658119023,6,24.5,6C36.37388034188007,6,46,13.839401541855068,46,23.50969060270245C46,32.15812857626224,38.521675213674825,41.019455279424164,23.565025641025386,41.019455279424164C23.565025641025386,41.019455279424164,18.165401709400612,46.63871033427631,10.806888888888352,45.93982196830575ZZ" style="fill: rgb(0, 0, 0);"/></g></g></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 3.6 KiB |
1
frontend/resources/images/contributing.svg
Normal file
1
frontend/resources/images/contributing.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.8 KiB |
1
frontend/resources/images/deco-circle.svg
Normal file
1
frontend/resources/images/deco-circle.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="-webkit-print-color-adjust:exact" viewBox="0 0 24 24"><circle cx="12" cy="12" r="12"/><g class="inner-stroke-shape"><defs><clipPath id="b"><use href="#a"/></clipPath><circle id="a" cx="12" cy="12" r="12" fill="none" stroke="#31efb8" stroke-opacity="1" stroke-width="4"/></defs><use clip-path="url('#b')" href="#a"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 384 B |
1
frontend/resources/images/deco-line1.svg
Normal file
1
frontend/resources/images/deco-line1.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="-webkit-print-color-adjust:exact" viewBox="2877 1278 16 49"><path d="m2893 1278-12 10 8 10-10 8 10 12-12 9"/><path stroke="#31efb8" stroke-width="2" d="m2893 1278-12 10 8 10-10 8 10 12-12 9" class="stroke-shape"/></svg>
|
||||||
|
After Width: | Height: | Size: 278 B |
1
frontend/resources/images/deco-line2.svg
Normal file
1
frontend/resources/images/deco-line2.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="-webkit-print-color-adjust:exact" viewBox="3622 1608 45 42"><path d="M3632 1608v15h12l-1 13h15l-1 14"/><path stroke="#31efb8" stroke-width="2" d="M3632 1608v15h12l-1 13h15l-1 14" class="stroke-shape"/></svg>
|
||||||
|
After Width: | Height: | Size: 266 B |
1
frontend/resources/images/deco-square.svg
Normal file
1
frontend/resources/images/deco-square.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="-webkit-print-color-adjust:exact" viewBox="3492 1152 23 23"><path d="m3492 1159 16-7 7 16-15 7-8-16Z"/><g class="inner-stroke-shape"><defs><clipPath id="b"><use href="#a"/></clipPath><path id="a" fill="none" stroke="#31efb8" stroke-opacity="1" stroke-width="4" d="m3492 1159 16-7 7 16-15 7-8-16Z"/></defs><use clip-path="url('#b')" href="#a"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 412 B |
1
frontend/resources/images/onboarding-people.svg
Normal file
1
frontend/resources/images/onboarding-people.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
1
frontend/resources/images/user-guide.svg
Normal file
1
frontend/resources/images/user-guide.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="-webkit-print-color-adjust:exact" viewBox="0 0 48 48"><rect width="48" height="48" fill="#31efb8" rx="24" ry="24"/><g class="inner-stroke-shape"><defs><clipPath id="a"><use href="#stroke-shape-3fe79320-0e5a-11ed-8ef6-85a75a2eae6b--0"/></clipPath></defs><use clip-path="url('#a')" href="#stroke-shape-3fe79320-0e5a-11ed-8ef6-85a75a2eae6b--0"/></g><path fill="#fff" d="m4 8 2-2 15 4h6l15-4 2 2v28l-1 1-16 5h-6L5 37l-1-1V8Z"/><path fill="#000" fill-rule="evenodd" d="M20 38V13L7 9v26l13 3Zm1 4L5 37l-1-1V8l2-2 15 4h6l15-4 2 2v28l-1 1-16 5h-6Zm2-3h2V13h-2v26Zm5-26v25l13-3V9l-13 4Z" clip-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 665 B |
1
frontend/resources/images/video-tutorials.svg
Normal file
1
frontend/resources/images/video-tutorials.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="-webkit-print-color-adjust:exact" viewBox="0 0 48 48"><rect width="48" height="48" fill="#31efb8" rx="24" ry="24"/><g fill="#000"><rect width="31" height="31" x="9" y="9" fill="none" rx="0" ry="0"/><path fill="#f5f7ff" d="M18 13v22l15-11-15-11Z"/><path d="M17 13v23l1 1 2-1 13-10 2-1-1-1-14-12h-2l-1 1Zm3 3 11 9h-1l-10 8Z"/></g><path fill="#fff" d="m5 9 1-1h36l2 1v30l-2 2H6l-1-2V9Z"/><path fill="#000" d="M21 18c-1-1-2 0-2 1v10c0 1 1 2 2 1l9-5v-2l-9-5Z"/><path fill="#000" fill-rule="evenodd" d="m5 9 1-1h36l2 1v30l-2 2H6l-1-2V9Zm2 29V10h34v28H7Z" clip-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 635 B |
|
|
@ -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 {
|
&.black {
|
||||||
.modal-left {
|
.modal-left {
|
||||||
background-color: $color-black;
|
background-color: $color-black;
|
||||||
|
|
@ -1056,6 +1142,38 @@
|
||||||
top: -18px;
|
top: -18px;
|
||||||
width: 60px;
|
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 {
|
&.top {
|
||||||
width: 183px;
|
width: 183px;
|
||||||
top: -106px;
|
top: -106px;
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,7 @@
|
||||||
(ns app.main.ui.onboarding
|
(ns app.main.ui.onboarding
|
||||||
(:require
|
(:require
|
||||||
[app.config :as cf]
|
[app.config :as cf]
|
||||||
|
[app.main.data.events :as ev]
|
||||||
[app.main.data.modal :as modal]
|
[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.store :as st]
|
||||||
|
|
@ -14,140 +15,94 @@
|
||||||
[app.main.ui.onboarding.questions]
|
[app.main.ui.onboarding.questions]
|
||||||
[app.main.ui.onboarding.team-choice]
|
[app.main.ui.onboarding.team-choice]
|
||||||
[app.main.ui.onboarding.templates]
|
[app.main.ui.onboarding.templates]
|
||||||
[app.main.ui.releases.common :as rc]
|
|
||||||
[app.util.i18n :as i18n :refer [tr]]
|
[app.util.i18n :as i18n :refer [tr]]
|
||||||
[app.util.timers :as tm]
|
[app.util.timers :as tm]
|
||||||
|
[potok.core :as ptk]
|
||||||
[rumext.alpha :as mf]))
|
[rumext.alpha :as mf]))
|
||||||
|
|
||||||
;; --- ONBOARDING LIGHTBOX
|
;; --- 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}]
|
[{:keys [next] :as props}]
|
||||||
[:div.modal-container.onboarding
|
(let [go-next
|
||||||
[:div.modal-left.welcome
|
(fn []
|
||||||
[:img {:src "images/login-on.jpg" :border "0" :alt (tr "onboarding.welcome.alt")}]]
|
(send-event "onboarding-step1-continue")
|
||||||
[:div.modal-right
|
(next))]
|
||||||
[:div.modal-title
|
[:div.modal-container.onboarding.onboarding-v2
|
||||||
[:h2 {:data-test "onboarding-welcome"} (tr "onboarding.welcome.title")]]
|
[:div.modal-left.welcome
|
||||||
[:span.release "Beta version " (:main @cf/version)]
|
[:img {:src "images/onboarding-people.svg" :border "0" :alt (tr "onboarding.welcome.alt")}]]
|
||||||
[:div.modal-content
|
[:div.modal-right
|
||||||
[:p (tr "onboarding.welcome.desc1")]
|
[:div.release-container [:span.release "Beta " (:main @cf/version)]]
|
||||||
[:p (tr "onboarding.welcome.desc2")]
|
[:div.right-content
|
||||||
[:p (tr "onboarding.welcome.desc3")]]
|
[:div.modal-title
|
||||||
[:div.modal-navigation
|
[:h2 {:data-test "onboarding-welcome"} (tr "onboarding-v2.welcome.title")]]
|
||||||
[: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"}]])
|
|
||||||
|
|
||||||
(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}]
|
[{:keys [next] :as props}]
|
||||||
[:div.modal-container.onboarding.black
|
(let [go-next
|
||||||
[:div.modal-left
|
(fn []
|
||||||
[:img {:src "images/open-source.svg" :border "0" :alt (tr "onboarding.contrib.alt")}]]
|
(send-event "onboarding-step2-continue")
|
||||||
[:div.modal-right
|
(next))]
|
||||||
[:div.modal-title
|
[:div.modal-container.onboarding.onboarding-v2
|
||||||
[:h2 (tr "onboarding.contrib.title")]]
|
[:div.modal-left.welcome
|
||||||
[:div.modal-content
|
[:img {:src "images/onboarding-people.svg" :border "0" :alt (tr "onboarding.welcome.alt")}]]
|
||||||
[:p (tr "onboarding.contrib.desc1")]
|
[:div.modal-right
|
||||||
[:p
|
[:div.release-container [:span.release "Beta " (:main @cf/version)]]
|
||||||
(tr "onboarding.contrib.desc2.1")
|
[:div.right-content
|
||||||
"\u00A0"
|
[:div.modal-title
|
||||||
[:a {:href "https://github.com/penpot" :target "_blank"} (tr "onboarding.contrib.link")]
|
[:h2 {:data-test "onboarding-welcome"} (tr "onboarding-v2.before-start.title")]]
|
||||||
"\u00A0"
|
|
||||||
(tr "onboarding.contrib.desc2.2")]]
|
|
||||||
[:div.modal-navigation
|
|
||||||
[:button.btn-secondary {:on-click next :data-test "opsource-next-btn"} (tr "labels.continue")]]]])
|
|
||||||
|
|
||||||
(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
|
[:div.welcome-card
|
||||||
[{:keys [navigate skip slide] :as props}]
|
[:img {:src "images/video-tutorials.svg" :border "0"}]
|
||||||
(mf/html
|
[:div
|
||||||
[:div.modal-container.onboarding.feature
|
[: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.modal-left
|
[:div.description (tr "onboarding-v2.before-start.desc3")]]]]]
|
||||||
[:img {:src "images/on-design.gif" :border "0" :alt (tr "onboarding.slide.0.alt")}]]
|
[:div.modal-navigation
|
||||||
[:div.modal-right
|
[:button.btn-secondary {:on-click go-next :data-test "onboarding-next-btn"} (tr "labels.continue")]]
|
||||||
[:div.modal-title
|
[:img.deco.square {:src "images/deco-square.svg" :border "0"}]
|
||||||
[:h2 {:data-test "slide-0-title"} (tr "onboarding.slide.0.title")]]
|
[:img.deco.circle {:src "images/deco-circle.svg" :border "0"}]
|
||||||
[:div.modal-content
|
[:img.deco.line1 {:src "images/deco-line1.svg" :border "0"}]
|
||||||
[:p (tr "onboarding.slide.0.desc1")]
|
[:img.deco.line2 {:src "images/deco-line2.svg" :border "0"}]]]))
|
||||||
[: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}]]]]))
|
|
||||||
|
|
||||||
(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/defc onboarding-modal
|
||||||
{::mf/register modal/components
|
{::mf/register modal/components
|
||||||
::mf/register-as :onboarding}
|
::mf/register-as :onboarding}
|
||||||
[props]
|
[_]
|
||||||
(let [slide (mf/use-state :start)
|
(let [slide (mf/use-state :start)
|
||||||
klass (mf/use-state "fadeInDown")
|
klass (mf/use-state "fadeInDown")
|
||||||
|
|
||||||
|
|
@ -173,10 +128,5 @@
|
||||||
[:div.modal-overlay
|
[:div.modal-overlay
|
||||||
[:div.animated {:class @klass}
|
[:div.animated {:class @klass}
|
||||||
(case @slide
|
(case @slide
|
||||||
:start [:& onboarding-start {:next #(navigate :opensource)}]
|
:start [:& onboarding-welcome {:next #(navigate :opensource)}]
|
||||||
:opensource [:& onboarding-opensource {:next #(navigate 0)}]
|
:opensource [:& onboarding-before-start {:next skip}])]]))
|
||||||
(render-slide
|
|
||||||
(assoc props
|
|
||||||
:slide @slide
|
|
||||||
:navigate navigate
|
|
||||||
:skip skip)))]]))
|
|
||||||
|
|
|
||||||
|
|
@ -1966,19 +1966,41 @@ msgstr "Start designing"
|
||||||
msgid "onboarding.welcome.alt"
|
msgid "onboarding.welcome.alt"
|
||||||
msgstr "Penpot"
|
msgstr "Penpot"
|
||||||
|
|
||||||
msgid "onboarding.welcome.desc1"
|
msgid "onboarding-v2.welcome.title"
|
||||||
msgstr "Hooray! You are already a Penpot user :)"
|
msgstr "Welcome to Penpot!"
|
||||||
|
|
||||||
msgid "onboarding.welcome.desc2"
|
msgid "onboarding-v2.welcome.desc1"
|
||||||
msgstr ""
|
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:"
|
||||||
"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.welcome.desc3"
|
msgid "onboarding-v2.welcome.desc2.title"
|
||||||
msgstr ""
|
msgstr "Participating in the Community"
|
||||||
"While you enjoy Penpot for what it is we will keep improving it, releasing "
|
|
||||||
"iterations of our hopeful plans."
|
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"
|
msgid "onboarding.welcome.title"
|
||||||
msgstr "Welcome to Penpot"
|
msgstr "Welcome to Penpot"
|
||||||
|
|
|
||||||
|
|
@ -2095,6 +2095,42 @@ msgstr ""
|
||||||
"Mientras disfrutas de Penpot seguiremos haciendo mejoras, lanzando "
|
"Mientras disfrutas de Penpot seguiremos haciendo mejoras, lanzando "
|
||||||
"iteraciones de nuestros esperanzadores planes."
|
"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"
|
msgid "onboarding.welcome.title"
|
||||||
msgstr "Te damos la bienvenida a Penpot"
|
msgstr "Te damos la bienvenida a Penpot"
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue