3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-07 14:38:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎉 Improve onboarding team creation and invite workflow

Browse source
This commit is contained in:
Alejandro Alonso 2023-10-20 06:58:28 +02:00
parent 06c8ada6f7
commit 96bbc35042
4 changed files with 79 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

19
frontend/resources/styles/main/partials/modal.scss
View file

@ -1437,19 +1437,19 @@
font-size: $fs26; font-size: $fs26;
font-weight: $fw700; font-weight: $fw700;
color: $color-gray-60; color: $color-gray-60;
margin-bottom: 6px; margin-bottom: 8px;
} }
.info { .info {
font-size: $fs14; font-size: $fs14;
color: $color-black; color: $color-black;
} }
form { form {
margin-top: 60px;
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: start;
align-items: flex-start; align-items: flex-start;
row-gap: 1.5rem;
.custom-input { .custom-input {
width: 100%; width: 100%;
} }
@ -1507,7 +1507,6 @@
text-align: left; text-align: left;
font-size: $fs12; font-size: $fs12;
color: $color-gray-30; color: $color-gray-30;
cursor: pointer;
} }
} }
@ -1540,14 +1539,10 @@
.onboarding-team-members { .onboarding-team-members {
.team-left { .team-left {
padding: 42px 64px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: auto;
form { form {
margin-top: 5px; align-items: stretch;
margin-top: 24px;
row-gap: normal;
.invite-row { .invite-row {
.custom-input { .custom-input {
width: 100%; width: 100%;
@ -1584,7 +1579,7 @@
} }
} }
.buttons { .buttons {
margin: 12px 0; margin: 32px 0 16px 0;
button { button {
height: auto; height: auto;
} }

49
frontend/src/app/main/ui/onboarding/team_choice.cljs
View file

@ -6,7 +6,6 @@
(ns app.main.ui.onboarding.team-choice (ns app.main.ui.onboarding.team-choice
(:require (:require
[app.common.data :as d]
[app.common.spec :as us] [app.common.spec :as us]
[app.main.data.dashboard :as dd] [app.main.data.dashboard :as dd]
[app.main.data.events :as ev] [app.main.data.events :as ev]
@ -20,7 +19,6 @@
[app.util.router :as rt] [app.util.router :as rt]
[app.util.timers :as tm] [app.util.timers :as tm]
[cljs.spec.alpha :as s] [cljs.spec.alpha :as s]
[cuerdas.core :as str]
[potok.core :as ptk] [potok.core :as ptk]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@ -80,7 +78,7 @@
[:div.modal-overlay [:div.modal-overlay
[:div.modal-container.onboarding-team.animated.fadeIn [:div.modal-container.onboarding-team.animated.fadeIn
[:div.team-left [:div.team-left
[:h2.title (tr "onboarding.choice.team-up.create-team")] [:h2.title (tr "onboarding.team-modal.create-team")]
[:p.info (tr "onboarding.choice.team-up.create-team-desc")] [:p.info (tr "onboarding.choice.team-up.create-team-desc")]
[:& fm/form {:form form [:& fm/form {:form form
:on-submit on-submit} :on-submit on-submit}
@ -89,9 +87,13 @@
:label (tr "onboarding.choice.team-up.create-team-placeholder")}] :label (tr "onboarding.choice.team-up.create-team-placeholder")}]
[:& fm/submit-button [:& fm/submit-button
{:label (tr "labels.continue")}]] {:label (tr "onboarding.choice.team-up.continue-creating-team")}]]
[:button.skip-action {:on-click on-skip} (tr "onboarding.choice.team-up.create-later")]] [:h2.title (tr "onboarding.choice.team-up.start-without-a-team")]
[:p.info (tr "onboarding.choice.team-up.start-without-a-team-description")]
[:div
[:button.btn-primary.btn-large {:on-click on-skip} (tr "onboarding.choice.team-up.continue-without-a-team")]]]
[:& team-modal-right] [:& team-modal-right]
[:div.paginator "1/2"] [:div.paginator "1/2"]
@ -107,7 +109,7 @@
[{:value "editor" :label (tr "labels.editor")} [{:value "editor" :label (tr "labels.editor")}
{:value "admin" :label (tr "labels.admin")}]) {:value "admin" :label (tr "labels.admin")}])
(s/def ::emails (s/and ::us/set-of-valid-emails d/not-empty?)) (s/def ::emails (s/and ::us/set-of-valid-emails))
(s/def ::role ::us/keyword) (s/def ::role ::us/keyword)
(s/def ::invite-form (s/def ::invite-form
(s/keys :req-un [::role ::emails])) (s/keys :req-un [::role ::emails]))
@ -124,12 +126,11 @@
:name name})) :name name}))
form (fm/use-form :spec ::invite-form form (fm/use-form :spec ::invite-form
:initial initial) :initial initial)
params (:clean-data @form)
emails (:emails params)
roles (mf/use-memo #(get-available-roles)) roles (mf/use-memo #(get-available-roles))
profile (mf/deref refs/profile)
email (-> profile :email str/lower)
on-success on-success
(mf/use-callback (mf/use-callback
(fn [_form response] (fn [_form response]
@ -146,7 +147,7 @@
(st/emit! (dm/error "Error on creating team.")))) (st/emit! (dm/error "Error on creating team."))))
;; The SKIP branch only creates the team, without invitations ;; The SKIP branch only creates the team, without invitations
on-skip on-invite-later
(mf/use-callback (mf/use-callback
(fn [_] (fn [_]
(let [mdata {:on-success (partial on-success form) (let [mdata {:on-success (partial on-success form)
@ -159,14 +160,13 @@
:step 2}))))) :step 2})))))
;; The SUBMIT branch creates the team with the invitations ;; The SUBMIT branch creates the team with the invitations
on-submit on-invite-now
(mf/use-callback (mf/use-callback
(fn [form _] (fn [_]
(let [mdata {:on-success (partial on-success form) (let [mdata {:on-success (partial on-success form)
:on-error (partial on-error form)} :on-error (partial on-error form)}
params (:clean-data @form) params (:clean-data @form)
emails (disj (:emails params) email) emails (:emails params)]
params (assoc params :emails emails)]
(st/emit! (if (> (count emails) 0) (st/emit! (if (> (count emails) 0)
;; If the user is only inviting to itself we don't call to create-team-with-invitations ;; If the user is only inviting to itself we don't call to create-team-with-invitations
@ -177,7 +177,16 @@
:invites (count emails) :invites (count emails)
:role (:role params) :role (:role params)
:name name :name name
:step 2})))))] :step 2})))))
on-submit
(mf/use-callback
(fn [_]
(let [params (:clean-data @form)
emails (:emails params)]
(if (> (count emails) 0)
(on-invite-now form)
(on-invite-later form)))))]
[:div.modal-overlay [:div.modal-overlay
[:div.modal-container.onboarding-team-members.animated.fadeIn [:div.modal-container.onboarding-team-members.animated.fadeIn
@ -210,10 +219,12 @@
:step 2}))} :step 2}))}
(tr "labels.back")] (tr "labels.back")]
[:& fm/submit-button [:& fm/submit-button
{:label (tr "onboarding.choice.team-up.invite-members-submit")}]] {:label
(if (> (count emails) 0)
(tr "onboarding.choice.team-up.create-team-and-send-invites")
(tr "onboarding.choice.team-up.create-team-without-inviting"))}]]
[:div.skip-action [:div.skip-action
{:on-click on-skip} (tr "onboarding.choice.team-up.create-team-and-send-invites-description")]]]
[:div.action (tr "onboarding.choice.team-up.invite-members-skip")]]]]
[:& team-modal-right] [:& team-modal-right]
[:div.paginator "2/2"] [:div.paginator "2/2"]

33
frontend/translations/en.po
View file

@ -2238,18 +2238,33 @@ msgstr "Contributing guide"
msgid "onboarding-v2.welcome.title" msgid "onboarding-v2.welcome.title"
msgstr "Welcome to Penpot!" msgstr "Welcome to Penpot!"
msgid "onboarding.choice.team-up.create-later"
msgstr "Create a team later"
msgid "onboarding.choice.team-up.create-team"
msgstr "Your team name"
msgid "onboarding.choice.team-up.create-team-desc" msgid "onboarding.choice.team-up.create-team-desc"
msgstr "After naming your team, you will be able to invite people to join." msgstr "After naming your team, you will be able to invite people to join."
msgid "onboarding.choice.team-up.create-team-placeholder" msgid "onboarding.choice.team-up.create-team-placeholder"
msgstr "Enter the name of the team" msgstr "Enter the name of the team"
msgid "onboarding.choice.team-up.continue-creating-team"
msgstr "Continue creating team"
msgid "onboarding.choice.team-up.start-without-a-team"
msgstr "Start without a team"
msgid "onboarding.choice.team-up.start-without-a-team-description"
msgstr "You will be able to create a team later."
msgid "onboarding.choice.team-up.continue-without-a-team"
msgstr "Continue without team"
msgid "onboarding.choice.team-up.create-team-and-send-invites"
msgstr "Create team and send invites"
msgid "onboarding.choice.team-up.create-team-without-inviting"
msgstr "Create team without inviting"
msgid "onboarding.choice.team-up.create-team-and-send-invites-description"
msgstr "You'll be able to invite later"
msgid "onboarding.choice.team-up.invite-members" msgid "onboarding.choice.team-up.invite-members"
msgstr "Invite members" msgstr "Invite members"
@ -2258,12 +2273,6 @@ msgstr ""
"Remember to include everyone. Developers, designers, managers... diversity " "Remember to include everyone. Developers, designers, managers... diversity "
"adds up :)" "adds up :)"
msgid "onboarding.choice.team-up.invite-members-skip"
msgstr "Create team and invite later"
msgid "onboarding.choice.team-up.invite-members-submit"
msgstr "Create team and send invites"
msgid "onboarding.choice.team-up.roles" msgid "onboarding.choice.team-up.roles"
msgstr "Invite with the role:" msgstr "Invite with the role:"

33
frontend/translations/es.po
View file

@ -2307,18 +2307,33 @@ msgstr "Guía de contribución"
msgid "onboarding-v2.welcome.title" msgid "onboarding-v2.welcome.title"
msgstr "¡Te damos la bienvenida a Penpot!" msgstr "¡Te damos la bienvenida a Penpot!"
msgid "onboarding.choice.team-up.create-later"
msgstr "Crea un equipo más tarde"
msgid "onboarding.choice.team-up.create-team"
msgstr "El nombre de tu equipo"
msgid "onboarding.choice.team-up.create-team-desc" msgid "onboarding.choice.team-up.create-team-desc"
msgstr "Tras nombrar tu equipo podrás invitar a personas para que se unan." msgstr "Tras nombrar tu equipo podrás invitar a personas para que se unan."
msgid "onboarding.choice.team-up.create-team-placeholder" msgid "onboarding.choice.team-up.create-team-placeholder"
msgstr "Introduce el nombre del equipo" msgstr "Introduce el nombre del equipo"
msgid "onboarding.choice.team-up.continue-creating-team"
msgstr "Continuar creando equipo"
msgid "onboarding.choice.team-up.start-without-a-team"
msgstr "Comenzar sin equipo"
msgid "onboarding.choice.team-up.start-without-a-team-description"
msgstr "Podrás crear un equipo después."
msgid "onboarding.choice.team-up.continue-without-a-team"
msgstr "Seguir sin equipo"
msgid "onboarding.choice.team-up.create-team-and-send-invites"
msgstr "Crear equipo y enviar invitaciones"
msgid "onboarding.choice.team-up.create-team-without-inviting"
msgstr "Crear equipo sin invitar"
msgid "onboarding.choice.team-up.create-team-and-send-invites-description"
msgstr "Podrás enviar invitaciones después"
msgid "onboarding.choice.team-up.invite-members" msgid "onboarding.choice.team-up.invite-members"
msgstr "Invitar integrantes" msgstr "Invitar integrantes"
@ -2327,12 +2342,6 @@ msgstr ""
"No olvides incluir personas de desarrollo, diseño, gestión… la diversidad " "No olvides incluir personas de desarrollo, diseño, gestión… la diversidad "
"suma :)" "suma :)"
msgid "onboarding.choice.team-up.invite-members-skip"
msgstr "Crear equipo e invitar después"
msgid "onboarding.choice.team-up.invite-members-submit"
msgstr "Crear equipo y enviar invitaciones"
msgid "onboarding.choice.team-up.roles" msgid "onboarding.choice.team-up.roles"
msgstr "Invitar con el rol:" msgstr "Invitar con el rol:"