Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-24 07:29:08 -05:00
Code Issues 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
Show stats 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-weight: $fw700;
color: $color-gray-60;
margin-bottom: 6px;
margin-bottom: 8px;
}
.info {
font-size: $fs14;
color: $color-black;
}
form {
margin-top: 60px;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
justify-content: start;
align-items: flex-start;
row-gap: 1.5rem;
.custom-input {
width: 100%;
}
@ -1507,7 +1507,6 @@
text-align: left;
font-size: $fs12;
color: $color-gray-30;
cursor: pointer;
}
}
@ -1540,14 +1539,10 @@
.onboarding-team-members {
.team-left {
padding: 42px 64px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: auto;
form {
margin-top: 5px;
align-items: stretch;
margin-top: 24px;
row-gap: normal;
.invite-row {
.custom-input {
width: 100%;
@ -1584,7 +1579,7 @@
}
}
.buttons {
margin: 12px 0;
margin: 32px 0 16px 0;
button {
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
(:require
[app.common.data :as d]
[app.common.spec :as us]
[app.main.data.dashboard :as dd]
[app.main.data.events :as ev]
@ -20,7 +19,6 @@
[app.util.router :as rt]
[app.util.timers :as tm]
[cljs.spec.alpha :as s]
[cuerdas.core :as str]
[potok.core :as ptk]
[rumext.v2 :as mf]))
@ -80,7 +78,7 @@
[:div.modal-overlay
[:div.modal-container.onboarding-team.animated.fadeIn
[: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")]
[:& fm/form {:form form
:on-submit on-submit}
@ -89,9 +87,13 @@
:label (tr "onboarding.choice.team-up.create-team-placeholder")}]
[:& 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]
[:div.paginator "1/2"]
@ -107,7 +109,7 @@
[{:value "editor" :label (tr "labels.editor")}
{: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 ::invite-form
(s/keys :req-un [::role ::emails]))
@ -124,12 +126,11 @@
:name name}))
form (fm/use-form :spec ::invite-form
:initial initial)
params (:clean-data @form)
emails (:emails params)
roles (mf/use-memo #(get-available-roles))
profile (mf/deref refs/profile)
email (-> profile :email str/lower)
on-success
(mf/use-callback
(fn [_form response]
@ -146,7 +147,7 @@
(st/emit! (dm/error "Error on creating team."))))
;; The SKIP branch only creates the team, without invitations
on-skip
on-invite-later
(mf/use-callback
(fn [_]
(let [mdata {:on-success (partial on-success form)
@ -159,14 +160,13 @@
:step 2})))))
;; The SUBMIT branch creates the team with the invitations
on-submit
on-invite-now
(mf/use-callback
(fn [form _]
(fn [_]
(let [mdata {:on-success (partial on-success form)
:on-error (partial on-error form)}
params (:clean-data @form)
emails (disj (:emails params) email)
params (assoc params :emails emails)]
emails (:emails params)]
(st/emit! (if (> (count emails) 0)
;; If the user is only inviting to itself we don't call to create-team-with-invitations
@ -177,7 +177,16 @@
:invites (count emails)
:role (:role params)
: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-container.onboarding-team-members.animated.fadeIn
@ -210,10 +219,12 @@
:step 2}))}
(tr "labels.back")]
[:& 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
{:on-click on-skip}
[:div.action (tr "onboarding.choice.team-up.invite-members-skip")]]]]
(tr "onboarding.choice.team-up.create-team-and-send-invites-description")]]]
[:& team-modal-right]
[:div.paginator "2/2"]

33
frontend/translations/en.po
View file

@ -2238,18 +2238,33 @@ msgstr "Contributing guide"
msgid "onboarding-v2.welcome.title"
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"
msgstr "After naming your team, you will be able to invite people to join."
msgid "onboarding.choice.team-up.create-team-placeholder"
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"
msgstr "Invite members"
@ -2258,12 +2273,6 @@ msgstr ""
"Remember to include everyone. Developers, designers, managers... diversity "
"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"
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"
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"
msgstr "Tras nombrar tu equipo podrás invitar a personas para que se unan."
msgid "onboarding.choice.team-up.create-team-placeholder"
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"
msgstr "Invitar integrantes"
@ -2327,12 +2342,6 @@ msgstr ""
"No olvides incluir personas de desarrollo, diseño, gestión… la diversidad "
"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"
msgstr "Invitar con el rol:"