diff --git a/CHANGES.md b/CHANGES.md index 8af1f0102..7a50b12b2 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -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 diff --git a/frontend/resources/images/deco-team-banner.png b/frontend/resources/images/deco-team-banner.png new file mode 100644 index 000000000..1b8e3c014 Binary files /dev/null and b/frontend/resources/images/deco-team-banner.png differ diff --git a/frontend/resources/styles/main/partials/dashboard-team.scss b/frontend/resources/styles/main/partials/dashboard-team.scss index acef161a4..2082ec361 100644 --- a/frontend/resources/styles/main/partials/dashboard-team.scss +++ b/frontend/resources/styles/main/partials/dashboard-team.scss @@ -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 { diff --git a/frontend/resources/styles/main/partials/dashboard.scss b/frontend/resources/styles/main/partials/dashboard.scss index 6f5580c2b..e005b27ce 100644 --- a/frontend/resources/styles/main/partials/dashboard.scss +++ b/frontend/resources/styles/main/partials/dashboard.scss @@ -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; diff --git a/frontend/src/app/main/ui/dashboard.cljs b/frontend/src/app/main/ui/dashboard.cljs index 158b753a6..3f631babd 100644 --- a/frontend/src/app/main/ui/dashboard.cljs +++ b/frontend/src/app/main/ui/dashboard.cljs @@ -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 diff --git a/frontend/src/app/main/ui/dashboard/projects.cljs b/frontend/src/app/main/ui/dashboard/projects.cljs index 625e334a0..546c1a30d 100644 --- a/frontend/src/app/main/ui/dashboard/projects.cljs +++ b/frontend/src/app/main/ui/dashboard/projects.cljs @@ -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 diff --git a/frontend/src/app/main/ui/dashboard/team.cljs b/frontend/src/app/main/ui/dashboard/team.cljs index 98c92857f..b5576f9e7 100644 --- a/frontend/src/app/main/ui/dashboard/team.cljs +++ b/frontend/src/app/main/ui/dashboard/team.cljs @@ -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")}]]]])) diff --git a/frontend/translations/ar.po b/frontend/translations/ar.po index 19f2b752d..960e7df7d 100644 --- a/frontend/translations/ar.po +++ b/frontend/translations/ar.po @@ -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 "" "لا يمكنك مغادرة الفريق إذا لم يكن هناك عضو آخر للترقية إلى المالك. قد ترغب " diff --git a/frontend/translations/ca.po b/frontend/translations/ca.po index a7834105c..e98aca710 100644 --- a/frontend/translations/ca.po +++ b/frontend/translations/ca.po @@ -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 "" diff --git a/frontend/translations/de.po b/frontend/translations/de.po index f7f51506d..3a62b62ff 100644 --- a/frontend/translations/de.po +++ b/frontend/translations/de.po @@ -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 "" diff --git a/frontend/translations/el.po b/frontend/translations/el.po index 70ccaf123..182793993 100644 --- a/frontend/translations/el.po +++ b/frontend/translations/el.po @@ -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" diff --git a/frontend/translations/en.po b/frontend/translations/en.po index fd054706d..6643345af 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -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" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 5363c04e2..6f7e89567 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -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" diff --git a/frontend/translations/fr.po b/frontend/translations/fr.po index 21fb5d1a3..e7666eb7c 100644 --- a/frontend/translations/fr.po +++ b/frontend/translations/fr.po @@ -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 "" diff --git a/frontend/translations/he.po b/frontend/translations/he.po index c26ddbd6c..49ddebf3c 100644 --- a/frontend/translations/he.po +++ b/frontend/translations/he.po @@ -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 "כיוון שאין עוד חברים בצוות הזה מלבדך, הצוות יימחק על כל המיזמים והקבצים שלו." diff --git a/frontend/translations/pl.po b/frontend/translations/pl.po index 6b9ebb5e9..d1956d0c5 100644 --- a/frontend/translations/pl.po +++ b/frontend/translations/pl.po @@ -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 "" diff --git a/frontend/translations/pt_BR.po b/frontend/translations/pt_BR.po index d22c1f4dd..9625ec630 100644 --- a/frontend/translations/pt_BR.po +++ b/frontend/translations/pt_BR.po @@ -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 " diff --git a/frontend/translations/ro.po b/frontend/translations/ro.po index 44bfa44b7..90cc810d1 100644 --- a/frontend/translations/ro.po +++ b/frontend/translations/ro.po @@ -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ă " diff --git a/frontend/translations/tr.po b/frontend/translations/tr.po index 67f20ec7c..6000e588f 100644 --- a/frontend/translations/tr.po +++ b/frontend/translations/tr.po @@ -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 "" diff --git a/frontend/translations/zh_CN.po b/frontend/translations/zh_CN.po index 13cd01c1b..ceb612e10 100644 --- a/frontend/translations/zh_CN.po +++ b/frontend/translations/zh_CN.po @@ -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 "由于你是这个团队的唯一成员,这个团队将连同其项目和文件一起被删除。"