mirror of
https://github.com/penpot/penpot.git
synced 2025-04-13 07:21:40 -05:00
🎉 Add new team hero
This commit is contained in:
Eva
parent
5b5fe8ebbc
commit
0e513a4a25
20 changed files with 162 additions and 71 deletions
|
|
@ -5,6 +5,12 @@
|
|||
### :boom: Breaking changes & Deprecations
|
||||
### :sparkles: New features
|
||||
|
||||
- Add team hero in projects dashboard [Taiga #3863](https://tree.taiga.io/project/penpot/us/3863)
|
||||
- Add zoom style to shared link [Taiga #3874](https://tree.taiga.io/project/penpot/us/3874)
|
||||
- Add dashboard creation button as placeholder [Taiga #3861](https://tree.taiga.io/project/penpot/us/3861)
|
||||
- Improve invitation flow on onboarding [Taiga #3241](https://tree.taiga.io/project/penpot/us/3241)
|
||||
- Add new text to initial modals [Taiga #3458](https://tree.taiga.io/project/penpot/us/3458)
|
||||
- Add new questions to onboarding [Taiga #3462](https://tree.taiga.io/project/penpot/us/3462)
|
||||
- Add cosmetic changes in viewer mode [Taiga #3688](https://tree.taiga.io/project/penpot/us/3688)
|
||||
- Outline highlights on layer hovering [Taiga #2645](https://tree.taiga.io/project/penpot/us/2645) by @andrewzhurov
|
||||
- Add zoom to shape on double click up on its icon [Taiga #3929](https://tree.taiga.io/project/penpot/us/3929) by @andrewzhurov
|
||||
|
|
|
|||
BIN
frontend/resources/images/deco-team-banner.png
Normal file
BIN
frontend/resources/images/deco-team-banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
|
|
@ -1,11 +1,16 @@
|
|||
.dashboard-invite-modal {
|
||||
top: 65px;
|
||||
top: 72px;
|
||||
right: 13px;
|
||||
padding: 14px;
|
||||
padding: 32px;
|
||||
box-shadow: 0px 4px 8px rgba($color-black, 0.25);
|
||||
border-radius: 8px;
|
||||
width: 500px;
|
||||
width: 400px;
|
||||
position: fixed;
|
||||
z-index: 16;
|
||||
&.hero {
|
||||
top: 218px;
|
||||
right: 35px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
|
|
@ -13,13 +18,18 @@
|
|||
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 15px 0px;
|
||||
justify-content: space-between;
|
||||
margin: 4px 0px;
|
||||
.label {
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-input {
|
||||
width: 314px;
|
||||
margin-right: 10px;
|
||||
width: 100%;
|
||||
height: 115px;
|
||||
}
|
||||
|
||||
.custom-select {
|
||||
|
|
@ -33,7 +43,7 @@
|
|||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 16px;
|
||||
input[type="submit"] {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
|
@ -41,6 +51,8 @@
|
|||
|
||||
.title {
|
||||
color: $color-black;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.hint {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,63 @@
|
|||
//
|
||||
// Copyright (c) UXBOX Labs SL
|
||||
|
||||
.team-hero {
|
||||
display: flex;
|
||||
position: relative;
|
||||
border: 2px solid $color-gray-10;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin: 0 1rem 0 21px;
|
||||
height: 154px;
|
||||
|
||||
.text {
|
||||
flex-grow: 1;
|
||||
padding-left: 20px;
|
||||
.title {
|
||||
font-size: $fs24;
|
||||
font-weight: bold;
|
||||
color: $color-black;
|
||||
}
|
||||
.info {
|
||||
span {
|
||||
color: $color-gray-30;
|
||||
display: block;
|
||||
}
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
svg {
|
||||
transform: rotate(45deg);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
.invite {
|
||||
background-color: $color-primary;
|
||||
color: $color-black;
|
||||
width: 180px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
align-self: flex-end;
|
||||
cursor: pointer;
|
||||
}
|
||||
img {
|
||||
width: 274px;
|
||||
margin-bottom: -41px;
|
||||
@media (max-width: 1200px) {
|
||||
display: none;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-container {
|
||||
background-color: $color-dashboard;
|
||||
flex: 1 0 0;
|
||||
|
|
|
|||
|
|
@ -192,7 +192,7 @@
|
|||
(case section
|
||||
:dashboard-projects
|
||||
[:*
|
||||
[:& projects-section {:team team :projects projects}]
|
||||
[:& projects-section {:team team :projects projects :profile profile}]
|
||||
[:& templates-section {:profile profile
|
||||
:project project
|
||||
:default-project-id default-project-id
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@
|
|||
[app.common.math :as mth]
|
||||
[app.main.data.dashboard :as dd]
|
||||
[app.main.data.events :as ev]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.data.users :as du]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.dashboard.grid :refer [line-grid]]
|
||||
|
|
@ -36,6 +38,22 @@
|
|||
[:a.btn-secondary.btn-small {:on-click create :data-test "new-project-button"}
|
||||
(tr "dashboard.new-project")]]))
|
||||
|
||||
(mf/defc team-hero
|
||||
{::mf/wrap [mf/memo]}
|
||||
[{:keys [team close-banner] :as props}]
|
||||
(let [go-members #(st/emit! (dd/go-to-team-members))
|
||||
invite-member #(st/emit! (modal/show {:type :invite-members :team team :origin :hero}))]
|
||||
[:div.team-hero
|
||||
[:img {:src "images/deco-team-banner.png" :border "0"}]
|
||||
[:div.text
|
||||
[:div.title (tr "dasboard.team-hero.title")]
|
||||
[:div.info
|
||||
[:span (tr "dasboard.team-hero.text")]
|
||||
[:a {:on-click go-members} (tr "dasboard.team-hero.management")]]]
|
||||
[:button.invite {:on-click invite-member} (tr "onboarding.choice.team-up.invite-members")]
|
||||
[:button.close {:on-click close-banner}
|
||||
[:span i/close]]]))
|
||||
|
||||
(mf/defc project-item
|
||||
[{:keys [project first? team files] :as props}]
|
||||
(let [locale (mf/deref i18n/locale)
|
||||
|
|
@ -196,11 +214,17 @@
|
|||
(l/derived :dashboard-recent-files st/state))
|
||||
|
||||
(mf/defc projects-section
|
||||
[{:keys [team projects] :as props}]
|
||||
(let [projects (->> (vals projects)
|
||||
(sort-by :modified-at)
|
||||
(reverse))
|
||||
recent-map (mf/deref recent-files-ref)]
|
||||
[{:keys [team projects profile] :as props}]
|
||||
(let [projects (->> (vals projects)
|
||||
(sort-by :modified-at)
|
||||
(reverse))
|
||||
recent-map (mf/deref recent-files-ref)
|
||||
props (some-> profile (get :props {}))
|
||||
team-hero? (:team-hero? props true)
|
||||
|
||||
close-banner (fn []
|
||||
(st/emit!
|
||||
(du/update-profile-props {:team-hero? false})))]
|
||||
|
||||
(mf/use-effect
|
||||
(mf/deps team)
|
||||
|
|
@ -219,6 +243,11 @@
|
|||
(when (seq projects)
|
||||
[:*
|
||||
[:& header]
|
||||
(when (and team-hero? (not (:is-default team)))
|
||||
[:& team-hero
|
||||
{:team team
|
||||
:close-banner close-banner}])
|
||||
|
||||
[:section.dashboard-container.no-bg
|
||||
(for [{:keys [id] :as project} projects]
|
||||
(let [files (when recent-map
|
||||
|
|
|
|||
|
|
@ -34,7 +34,9 @@
|
|||
(let [go-members (mf/use-fn #(st/emit! (dd/go-to-team-members)))
|
||||
go-settings (mf/use-fn #(st/emit! (dd/go-to-team-settings)))
|
||||
go-invitations (mf/use-fn #(st/emit! (dd/go-to-team-invitations)))
|
||||
invite-member (mf/use-fn #(st/emit! (modal/show {:type :invite-members :team team})))
|
||||
invite-member (mf/use-fn
|
||||
(mf/deps team)
|
||||
#(st/emit! (modal/show {:type :invite-members :team team :origin :team})))
|
||||
|
||||
members-section? (= section :dashboard-team-members)
|
||||
settings-section? (= section :dashboard-team-settings)
|
||||
|
|
@ -87,7 +89,7 @@
|
|||
(mf/defc invite-members-modal
|
||||
{::mf/register modal/components
|
||||
::mf/register-as :invite-members}
|
||||
[{:keys [team]}]
|
||||
[{:keys [team origin]}]
|
||||
(let [perms (:permissions team)
|
||||
roles (mf/use-memo (mf/deps perms) #(get-available-roles perms))
|
||||
initial (mf/use-memo (constantly {:role "editor" :team-id (:id team)}))
|
||||
|
|
@ -127,24 +129,29 @@
|
|||
(dd/fetch-team-invitations))))]
|
||||
|
||||
[:div.modal.dashboard-invite-modal.form-container
|
||||
{:class (dom/classnames
|
||||
:hero (= origin :hero))}
|
||||
[:& fm/form {:on-submit on-submit :form form}
|
||||
[:div.title
|
||||
[:span.text (tr "modals.invite-member.title")]]
|
||||
[:span.text (tr "modals.invite-team-member.title")]]
|
||||
|
||||
(when-not (= "" @error-text)
|
||||
[:div.error
|
||||
[:span.icon i/msg-error]
|
||||
[:span.text @error-text]])
|
||||
|
||||
[:div.form-row
|
||||
[:p.label (tr "onboarding.choice.team-up.roles")]
|
||||
[:& fm/select {:name :role :options roles}]]
|
||||
[:div.form-row
|
||||
|
||||
|
||||
[:& fm/multi-input {:type "email"
|
||||
:name :emails
|
||||
:auto-focus? true
|
||||
:trim true
|
||||
:valid-item-fn us/parse-email
|
||||
:label (tr "modals.invite-member.emails")
|
||||
:on-submit on-submit}]
|
||||
[:& fm/select {:name :role :options roles}]]
|
||||
:on-submit on-submit}]]
|
||||
|
||||
[:div.action-buttons
|
||||
[:& fm/submit-button {:label (tr "modals.invite-member-confirm.accept")}]]]]))
|
||||
|
|
|
|||
|
|
@ -1290,10 +1290,6 @@ msgstr "حذف العضو"
|
|||
msgid "modals.invite-member-confirm.accept"
|
||||
msgstr "إرسال دعوة"
|
||||
|
||||
#: src/app/main/ui/dashboard/team.cljs
|
||||
msgid "modals.invite-member.title"
|
||||
msgstr "دعوة للانضمام إلى الفريق"
|
||||
|
||||
msgid "modals.leave-and-reassign.forbiden"
|
||||
msgstr ""
|
||||
"لا يمكنك مغادرة الفريق إذا لم يكن هناك عضو آخر للترقية إلى المالك. قد ترغب "
|
||||
|
|
|
|||
|
|
@ -1613,10 +1613,6 @@ msgstr "Envia una invitació"
|
|||
msgid "modals.invite-member.emails"
|
||||
msgstr "Correus electrònics, separats per una coma"
|
||||
|
||||
#: src/app/main/ui/dashboard/team.cljs
|
||||
msgid "modals.invite-member.title"
|
||||
msgstr "Convida a unir-se a l'equip"
|
||||
|
||||
#: src/app/main/ui/dashboard/sidebar.cljs
|
||||
msgid "modals.leave-and-close-confirm.hint"
|
||||
msgstr ""
|
||||
|
|
|
|||
|
|
@ -1637,10 +1637,6 @@ msgstr "Einladung senden"
|
|||
msgid "modals.invite-member.emails"
|
||||
msgstr "E-Mails, durch Komma getrennt"
|
||||
|
||||
#: src/app/main/ui/dashboard/team.cljs
|
||||
msgid "modals.invite-member.title"
|
||||
msgstr "Einladen, dem Team beizutreten"
|
||||
|
||||
#: src/app/main/ui/dashboard/sidebar.cljs
|
||||
msgid "modals.leave-and-close-confirm.hint"
|
||||
msgstr ""
|
||||
|
|
|
|||
|
|
@ -1115,10 +1115,6 @@ msgstr "Διαγραφή μέλους της ομάδας"
|
|||
msgid "modals.invite-member-confirm.accept"
|
||||
msgstr "Αποστολή πρόσκλησης"
|
||||
|
||||
#: src/app/main/ui/dashboard/team.cljs
|
||||
msgid "modals.invite-member.title"
|
||||
msgstr "Προσκαλέστε να συμμετάσχετε στην ομάδα"
|
||||
|
||||
#: src/app/main/ui/dashboard/sidebar.cljs
|
||||
msgid "modals.leave-and-reassign.hint1"
|
||||
msgstr "Είστε ο ιδιοκτήτης του %s"
|
||||
|
|
|
|||
|
|
@ -464,6 +464,18 @@ msgstr "Move to other team"
|
|||
msgid "dashboard.new-file"
|
||||
msgstr "+ New File"
|
||||
|
||||
#: src/app/main/ui/dashboard/projects.cljs
|
||||
msgid "dasboard.team-hero.title"
|
||||
msgstr "Team up!"
|
||||
|
||||
#: src/app/main/ui/dashboard/projects.cljs
|
||||
msgid "dasboard.team-hero.text"
|
||||
msgstr "Penpot is meant for teams. Invite members to work together on projects and files"
|
||||
|
||||
#: src/app/main/ui/dashboard/projects.cljs
|
||||
msgid "dasboard.team-hero.management"
|
||||
msgstr "Team management"
|
||||
|
||||
#: src/app/main/data/dashboard.cljs
|
||||
msgid "dashboard.new-file-prefix"
|
||||
msgstr "New File"
|
||||
|
|
@ -1702,8 +1714,8 @@ msgid "modals.invite-member.emails"
|
|||
msgstr "Emails, comma separated"
|
||||
|
||||
#: src/app/main/ui/dashboard/team.cljs
|
||||
msgid "modals.invite-member.title"
|
||||
msgstr "Invite to join the team"
|
||||
msgid "modals.invite-team-member.title"
|
||||
msgstr "Invite members to the team"
|
||||
|
||||
#: src/app/main/ui/dashboard/sidebar.cljs
|
||||
msgid "modals.leave-and-close-confirm.hint"
|
||||
|
|
@ -1914,7 +1926,7 @@ msgid "onboarding.choice.team-up.invite-members-info"
|
|||
msgstr "Remember to include everyone. Developers, designers, managers... diversity adds up :)"
|
||||
|
||||
msgid "onboarding.choice.team-up.roles"
|
||||
msgstr "Invite members with the role:"
|
||||
msgstr "Invite with the role:"
|
||||
|
||||
msgid "onboarding.choice.team-up.create-later"
|
||||
msgstr "Create a team later"
|
||||
|
|
|
|||
|
|
@ -484,6 +484,18 @@ msgstr "Nuevo Archivo"
|
|||
msgid "dashboard.new-project"
|
||||
msgstr "+ Nuevo proyecto"
|
||||
|
||||
#: src/app/main/ui/dashboard/projects.cljs
|
||||
msgid "dasboard.team-hero.title"
|
||||
msgstr "¡Forma equipo!"
|
||||
|
||||
#: src/app/main/ui/dashboard/projects.cljs
|
||||
msgid "dasboard.team-hero.text"
|
||||
msgstr " Penpot está dirigido a equipos. Invita a personas para trabajar conjuntamente en proyectos y archivos."
|
||||
|
||||
#: src/app/main/ui/dashboard/projects.cljs
|
||||
msgid "dasboard.team-hero.management"
|
||||
msgstr "Gestión del equipo"
|
||||
|
||||
#: src/app/main/data/dashboard.cljs
|
||||
msgid "dashboard.new-project-prefix"
|
||||
msgstr "Nuevo Proyecto"
|
||||
|
|
@ -1776,8 +1788,8 @@ msgid "modals.invite-member.emails"
|
|||
msgstr "Emails, separados por coma"
|
||||
|
||||
#: src/app/main/ui/dashboard/team.cljs
|
||||
msgid "modals.invite-member.title"
|
||||
msgstr "Invitar a unirse al equipo"
|
||||
msgid "modals.invite-team-member.title"
|
||||
msgstr "Invitar a miembros al equipo"
|
||||
|
||||
#: src/app/main/ui/dashboard/sidebar.cljs
|
||||
msgid "modals.leave-and-close-confirm.hint"
|
||||
|
|
@ -1997,7 +2009,7 @@ msgid "onboarding.choice.team-up.invite-members-info"
|
|||
msgstr "No olvides incluir personas de desarrollo, diseño, gestión… la diversidad suma :)"
|
||||
|
||||
msgid "onboarding.choice.team-up.roles"
|
||||
msgstr "Invitar integrantes con el rol:"
|
||||
msgstr "Invitar con el rol:"
|
||||
|
||||
msgid "onboarding.choice.team-up.create-later"
|
||||
msgstr "Crea un equipo más tarde"
|
||||
|
|
@ -2021,7 +2033,7 @@ msgid "onboarding.team-modal.create-team-feature-4"
|
|||
msgstr "Sin límite de integrantes"
|
||||
|
||||
msgid "onboarding.team-modal.create-team-feature-5"
|
||||
msgstr "¡100 gratis!"
|
||||
msgstr "¡100% gratis!"
|
||||
|
||||
msgid "onboarding.choice.team-up.invite-members-skip"
|
||||
msgstr "Crear equipo e invitar después"
|
||||
|
|
|
|||
|
|
@ -1666,10 +1666,6 @@ msgstr "Envoyer l'invitation"
|
|||
msgid "modals.invite-member.emails"
|
||||
msgstr "Adresse e-mail, séparées par des virgules"
|
||||
|
||||
#: src/app/main/ui/dashboard/team.cljs
|
||||
msgid "modals.invite-member.title"
|
||||
msgstr "Inviter à rejoindre l’équipe"
|
||||
|
||||
#: src/app/main/ui/dashboard/sidebar.cljs
|
||||
msgid "modals.leave-and-close-confirm.hint"
|
||||
msgstr ""
|
||||
|
|
|
|||
|
|
@ -1612,10 +1612,6 @@ msgstr "שליחת הזמנה"
|
|||
msgid "modals.invite-member.emails"
|
||||
msgstr "כתובות דוא״ל, מופרדות בפסיקים"
|
||||
|
||||
#: src/app/main/ui/dashboard/team.cljs
|
||||
msgid "modals.invite-member.title"
|
||||
msgstr "הזמנה להצטרף לצוות"
|
||||
|
||||
#: src/app/main/ui/dashboard/sidebar.cljs
|
||||
msgid "modals.leave-and-close-confirm.hint"
|
||||
msgstr "כיוון שאין עוד חברים בצוות הזה מלבדך, הצוות יימחק על כל המיזמים והקבצים שלו."
|
||||
|
|
|
|||
|
|
@ -1636,10 +1636,6 @@ msgstr "Wyślij zaproszenie"
|
|||
msgid "modals.invite-member.emails"
|
||||
msgstr "Emaile, oddzielone przecinkami"
|
||||
|
||||
#: src/app/main/ui/dashboard/team.cljs
|
||||
msgid "modals.invite-member.title"
|
||||
msgstr "Zaproś do zespołu"
|
||||
|
||||
#: src/app/main/ui/dashboard/sidebar.cljs
|
||||
msgid "modals.leave-and-close-confirm.hint"
|
||||
msgstr ""
|
||||
|
|
|
|||
|
|
@ -1317,10 +1317,6 @@ msgstr "Excluir membro da equipe"
|
|||
msgid "modals.invite-member-confirm.accept"
|
||||
msgstr "Enviar convite"
|
||||
|
||||
#: src/app/main/ui/dashboard/team.cljs
|
||||
msgid "modals.invite-member.title"
|
||||
msgstr "Convidar para se juntar à equipe"
|
||||
|
||||
msgid "modals.leave-and-reassign.forbiden"
|
||||
msgstr ""
|
||||
"Você não pode deixar a equipe se não houver outro membro para promover a "
|
||||
|
|
|
|||
|
|
@ -1230,10 +1230,6 @@ msgstr "Elimină un membru al echipei"
|
|||
msgid "modals.invite-member-confirm.accept"
|
||||
msgstr "Trimite invitație"
|
||||
|
||||
#: src/app/main/ui/dashboard/team.cljs
|
||||
msgid "modals.invite-member.title"
|
||||
msgstr "Invită o persoană în echipă"
|
||||
|
||||
msgid "modals.leave-and-reassign.forbiden"
|
||||
msgstr ""
|
||||
"Nu puteţi părăsi echipa dacă nu există un alt membru care să devină "
|
||||
|
|
|
|||
|
|
@ -1643,10 +1643,6 @@ msgstr "Davet gönder"
|
|||
msgid "modals.invite-member.emails"
|
||||
msgstr "E-posta adresleri, virgülle ayrılmış"
|
||||
|
||||
#: src/app/main/ui/dashboard/team.cljs
|
||||
msgid "modals.invite-member.title"
|
||||
msgstr "Takıma katılma daveti gönder"
|
||||
|
||||
#: src/app/main/ui/dashboard/sidebar.cljs
|
||||
msgid "modals.leave-and-close-confirm.hint"
|
||||
msgstr ""
|
||||
|
|
|
|||
|
|
@ -1554,10 +1554,6 @@ msgstr "发送邀请"
|
|||
msgid "modals.invite-member.emails"
|
||||
msgstr "电子邮件，以逗号分隔"
|
||||
|
||||
#: src/app/main/ui/dashboard/team.cljs
|
||||
msgid "modals.invite-member.title"
|
||||
msgstr "邀请加入团队"
|
||||
|
||||
#: src/app/main/ui/dashboard/sidebar.cljs
|
||||
msgid "modals.leave-and-close-confirm.hint"
|
||||
msgstr "由于你是这个团队的唯一成员，这个团队将连同其项目和文件一起被删除。"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue