3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-28 05:46:11 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge remote-tracking branch 'origin/staging' into develop

Browse source
This commit is contained in:
Alejandro Alonso 2024-06-18 16:57:51 +02:00
commit 47b455ba87
38 changed files with 1238 additions and 215 deletions
Download patch file Download diff file Expand all files Collapse all files

20
frontend/src/app/main/ui/dashboard/sidebar.cljs
View file

@ -256,11 +256,13 @@
(if (or @focused? (seq search-term))
[:button {:class (stl/css :search-btn :clear-search-btn)
:tab-index "0"
:aria-label "dashboard-clear-search"
:on-click on-clear-click
:on-key-down handle-clear-search}
clear-search-icon]
[:button {:class (stl/css :search-btn)
:aria-label "dashboard-search"
:on-click on-clear-click}
search-icon])]))
@ -504,11 +506,13 @@
:on-key-down handle-members
:className (stl/css :team-options-item)
:id "teams-options-members"
:data-testid "team-members"
:data-test "team-members"}
(tr "labels.members")]
[:> dropdown-menu-item* {:on-click go-invitations
:on-key-down handle-invitations
:className (stl/css :team-options-item)
:data-testid "team-invitations"
:id "teams-options-invitations"
:data-test "team-invitations"}
(tr "labels.invitations")]
@ -524,6 +528,7 @@
:on-key-down handle-settings
:className (stl/css :team-options-item)
:id "teams-options-settings"
:data-testid "team-settings"
:data-test "team-settings"}
(tr "labels.settings")]
@ -533,6 +538,7 @@
:on-key-down handle-rename
:id "teams-options-rename"
:className (stl/css :team-options-item)
:data-testid "rename-team"
:data-test "rename-team"}
(tr "labels.rename")])
@ -550,6 +556,7 @@
:on-key-down handle-leave-as-owner-clicked
:id "teams-options-leave-team"
:className (stl/css :team-options-item)
:data-testid "leave-team"
:data-test "leave-team"}
(tr "dashboard.leave-team")]
@ -654,6 +661,7 @@
(when-not (:is-default team)
[:button {:class (stl/css :switch-options)
:on-click handle-show-opts-click
:aria-label "team-management"
:tab-index "0"
:on-key-down handle-show-opts-keydown}
menu-icon])]
@ -792,6 +800,7 @@
[:li {:class (stl/css-case :current libs?
:sidebar-nav-item true)}
[:& link {:action go-libs
:data-testid "libs-link-sidebar"
:class (stl/css :sidebar-link)
:keyboard-action go-libs-with-key}
[:span {:class (stl/css :element-title)} (tr "labels.shared-libraries")]]]]]
@ -803,6 +812,7 @@
:current fonts?)}
[:& link {:action go-fonts
:class (stl/css :sidebar-link)
:data-testid "fonts-link-sidebar"
:keyboard-action go-fonts-with-key
:data-test "fonts"}
[:span {:class (stl/css :element-title)} (tr "labels.fonts")]]]]]
@ -946,11 +956,11 @@
:on-hide-comments handle-hide-comments}])
[:div {:class (stl/css :profile-section)}
[:div {:class (stl/css :profile)
:tab-index "0"
:on-click handle-click
:on-key-down handle-key-down
:data-test "profile-btn"}
[:button {:class (stl/css :profile)
:tab-index "0"
:on-click handle-click
:on-key-down handle-key-down
:data-test "profile-btn"}
[:img {:src photo
:class (stl/css :profile-img)
:alt (:fullname profile)}]

2
frontend/src/app/main/ui/dashboard/sidebar.scss
View file

@ -331,10 +331,12 @@
}
.profile {
@include buttonStyle;
display: grid;
grid-template-columns: auto 1fr;
gap: $s-8;
cursor: pointer;
text-align: left;
}
.profile-fullname {

3
frontend/src/app/main/ui/dashboard/team.cljs
View file

@ -105,7 +105,8 @@
[:a
{:class (stl/css :btn-secondary :btn-small)
:on-click on-invite-member
:data-test "invite-member"}
:data-test "invite-member"
:data-testid "invite-member"}
(tr "dashboard.invite-profile")]
[:div {:class (stl/css :blank-space)}])]]))

9
frontend/src/app/main/ui/onboarding/newsletter.cljs
View file

@ -7,7 +7,6 @@
(ns app.main.ui.onboarding.newsletter
(:require-macros [app.main.style :as stl])
(:require
[app.config :as cf]
[app.main.data.events :as-alias ev]
[app.main.data.messages :as msg]
[app.main.data.users :as du]
@ -45,14 +44,10 @@
(assoc :label "newsletter:subscriptions")
(assoc :step 6))]
(st/emit! (ptk/data-event ::ev/event params)
(du/update-profile-props state)))))
onboarding-a-b-test?
(cf/external-feature-flag "signup-background" "test")]
(du/update-profile-props state)))))]
[:div {:class (stl/css-case
:modal-overlay true
:onboarding-a-b-test onboarding-a-b-test?)}
:modal-overlay true)}
[:div.animated.fadeInDown {:class (stl/css :modal-container)}
[:div {:class (stl/css :modal-left)}

9
frontend/src/app/main/ui/onboarding/questions.cljs
View file

@ -10,7 +10,6 @@
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.config :as cf]
[app.main.data.events :as-alias ev]
[app.main.data.users :as du]
[app.main.store :as st]
@ -497,14 +496,10 @@
(fn [form]
(let [data (merge @clean-data (:clean-data @form))]
(reset! clean-data data)
(st/emit! (du/mark-questions-as-answered data)))))
onboarding-a-b-test?
(cf/external-feature-flag "signup-background" "test")]
(st/emit! (du/mark-questions-as-answered data)))))]
[:div {:class (stl/css-case
:modal-overlay true
:onboarding-a-b-test onboarding-a-b-test?)}
:modal-overlay true)}
[:div {:class (stl/css :modal-container)
:ref container}

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

@ -9,7 +9,6 @@
(:require
[app.common.data.macros :as dm]
[app.common.spec :as us]
[app.config :as cf]
[app.main.data.dashboard :as dd]
[app.main.data.events :as ev]
[app.main.data.messages :as msg]
@ -260,14 +259,10 @@
on-back
(mf/use-fn
(fn []
(swap! name* (constantly nil))))
onboarding-a-b-test?
(cf/external-feature-flag "signup-background" "test")]
(swap! name* (constantly nil))))]
[:div {:class (stl/css-case
:modal-overlay true
:onboarding-a-b-test onboarding-a-b-test?)}
:modal-overlay true)}
[:div.animated.fadeIn {:class (stl/css :modal-container)}
[:& left-sidebar]

321
frontend/src/app/main/ui/releases/v2_0.cljs
View file

@ -8,203 +8,196 @@
(:require-macros [app.main.style :as stl])
(:require
[app.common.data.macros :as dm]
[app.config :as cf]
[app.main.ui.releases.common :as c]
[rumext.v2 :as mf]))
;; TODO: Review all copies and alt text
(defmethod c/render-release-notes "2.0"
[{:keys [slide klass next finish navigate version]}]
(let [onboarding-a-b-test? (cf/external-feature-flag "signup-background" "test")]
(mf/html
(case slide
:start
[:div {:class (stl/css-case :modal-overlay true
:onboarding-a-b-test onboarding-a-b-test?)}
[:div.animated {:class klass}
[:div {:class (stl/css :modal-container)}
[:img {:src "images/features/2.0-intro-image.png"
:class (stl/css :start-image)
:border "0"
:alt "A graphic illustration with Penpot style"}]
(mf/html
(case slide
:start
[:div {:class (stl/css-case :modal-overlay true)}
[:div.animated {:class klass}
[:div {:class (stl/css :modal-container)}
[:img {:src "images/features/2.0-intro-image.png"
:class (stl/css :start-image)
:border "0"
:alt "A graphic illustration with Penpot style"}]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :modal-header)}
[:h1 {:class (stl/css :modal-title)}
"Welcome to Penpot 2.0! "]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :modal-header)}
[:h1 {:class (stl/css :modal-title)}
"Welcome to Penpot 2.0! "]
[:div {:class (stl/css :version-tag)}
(dm/str "Version " version)]]
[:div {:class (stl/css :version-tag)}
(dm/str "Version " version)]]
[:div {:class (stl/css :features-block)}
[:p {:class (stl/css :feature-content)}
[:spam {:class (stl/css :feature-title)}
"CSS Grid Layout: "]
"Bring your designs to life, knowing that what you create is what developers code."]
[:div {:class (stl/css :features-block)}
[:p {:class (stl/css :feature-content)}
[:spam {:class (stl/css :feature-title)}
"CSS Grid Layout: "]
"Bring your designs to life, knowing that what you create is what developers code."]
[:p {:class (stl/css :feature-content)}
[:spam {:class (stl/css :feature-title)}
"Sleeker UI: "]
"We’ve polished Penpot to make your experience smoother and more enjoyable."]
[:p {:class (stl/css :feature-content)}
[:spam {:class (stl/css :feature-title)}
"Sleeker UI: "]
"We’ve polished Penpot to make your experience smoother and more enjoyable."]
[:p {:class (stl/css :feature-content)}
[:spam {:class (stl/css :feature-title)}
"New Components System: "]
"Managing and using your design components got a whole lot better."]
[:p {:class (stl/css :feature-content)}
[:spam {:class (stl/css :feature-title)}
"New Components System: "]
"Managing and using your design components got a whole lot better."]
[:p {:class (stl/css :feature-content)}
"And that’s not all - we’ve fined tuned performance and "
"accessibility to give you a better and more fluid design experience."]
[:p {:class (stl/css :feature-content)}
"And that’s not all - we’ve fined tuned performance and "
"accessibility to give you a better and more fluid design experience."]
[:p {:class (stl/css :feature-content)}
" Ready to dive in? Let 's get started!"]]
[:p {:class (stl/css :feature-content)}
" Ready to dive in? Let 's get started!"]]
[:div {:class (stl/css :navigation)}
[:button {:class (stl/css :next-btn)
:on-click next} "Continue"]]]]]]
[:div {:class (stl/css :navigation)}
[:button {:class (stl/css :next-btn)
:on-click next} "Continue"]]]]]]
0
[:div {:class (stl/css-case :modal-overlay true
:onboarding-a-b-test onboarding-a-b-test?)}
[:div.animated {:class klass}
[:div {:class (stl/css :modal-container)}
[:img {:src "images/features/2.0-css-grid.gif"
:class (stl/css :start-image)
:border "0"
:alt "Penpot's CSS Grid Layout"}]
0
[:div {:class (stl/css-case :modal-overlay true)}
[:div.animated {:class klass}
[:div {:class (stl/css :modal-container)}
[:img {:src "images/features/2.0-css-grid.gif"
:class (stl/css :start-image)
:border "0"
:alt "Penpot's CSS Grid Layout"}]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :modal-header)}
[:h1 {:class (stl/css :modal-title)}
"CSS Grid Layout - Design Meets Development"]]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :modal-header)}
[:h1 {:class (stl/css :modal-title)}
"CSS Grid Layout - Design Meets Development"]]
[:div {:class (stl/css :feature)}
[:p {:class (stl/css :feature-content)}
"The much-awaited Grid Layout introduces 2-dimensional"
" layout capabilities to Penpot, allowing for the creation"
" of adaptive layouts by leveraging the power of CSS properties."]
[:div {:class (stl/css :feature)}
[:p {:class (stl/css :feature-content)}
"The much-awaited Grid Layout introduces 2-dimensional"
" layout capabilities to Penpot, allowing for the creation"
" of adaptive layouts by leveraging the power of CSS properties."]
[:p {:class (stl/css :feature-content)}
"It’s a host of new features, including columns and"
" rows management, flexible units such as FR (fractions),"
" the ability to create and name areas, and tons of new "
"and unique possibilities within a design tool."]
[:p {:class (stl/css :feature-content)}
"It’s a host of new features, including columns and"
" rows management, flexible units such as FR (fractions),"
" the ability to create and name areas, and tons of new "
"and unique possibilities within a design tool."]
[:p {:class (stl/css :feature-content)}
"Designers will learn CSS basics while working, "
"and as always with Penpot, developers can pick"
" up the design as code to take it from there."]]
[:p {:class (stl/css :feature-content)}
"Designers will learn CSS basics while working, "
"and as always with Penpot, developers can pick"
" up the design as code to take it from there."]]
[:div {:class (stl/css :navigation)}
[:& c/navigation-bullets
{:slide slide
:navigate navigate
:total 4}]
[:div {:class (stl/css :navigation)}
[:& c/navigation-bullets
{:slide slide
:navigate navigate
:total 4}]
[:button {:on-click next
:class (stl/css :next-btn)} "Continue"]]]]]]
[:button {:on-click next
:class (stl/css :next-btn)} "Continue"]]]]]]
1
[:div {:class (stl/css-case :modal-overlay true
:onboarding-a-b-test onboarding-a-b-test?)}
[:div.animated {:class klass}
[:div {:class (stl/css :modal-container)}
[:img {:src "images/features/2.0-new-ui.gif"
:class (stl/css :start-image)
:border "0"
:alt "Penpot's UI Makeover"}]
1
[:div {:class (stl/css-case :modal-overlay true)}
[:div.animated {:class klass}
[:div {:class (stl/css :modal-container)}
[:img {:src "images/features/2.0-new-ui.gif"
:class (stl/css :start-image)
:border "0"
:alt "Penpot's UI Makeover"}]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :modal-header)}
[:h1 {:class (stl/css :modal-title)}
"UI Makeover - Smoother, Sharper, and Simply More Fun"]]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :modal-header)}
[:h1 {:class (stl/css :modal-title)}
"UI Makeover - Smoother, Sharper, and Simply More Fun"]]
[:div {:class (stl/css :feature)}
[:p {:class (stl/css :feature-content)}
"We've completely overhauled Penpot's user interface. "
"The improvements in consistency, the introduction of "
"new microinteractions, and attention to countless details"
" will significantly enhance the productivity and enjoyment of using Penpot."]
[:p {:class (stl/css :feature-content)}
"Furthermore, we’ve made several accessibility improvements, "
"with better color contrast, keyboard navigation,"
" and adherence to other best practices."]]
[:div {:class (stl/css :feature)}
[:p {:class (stl/css :feature-content)}
"We've completely overhauled Penpot's user interface. "
"The improvements in consistency, the introduction of "
"new microinteractions, and attention to countless details"
" will significantly enhance the productivity and enjoyment of using Penpot."]
[:p {:class (stl/css :feature-content)}
"Furthermore, we’ve made several accessibility improvements, "
"with better color contrast, keyboard navigation,"
" and adherence to other best practices."]]
[:div {:class (stl/css :navigation)}
[:& c/navigation-bullets
{:slide slide
:navigate navigate
:total 4}]
[:div {:class (stl/css :navigation)}
[:& c/navigation-bullets
{:slide slide
:navigate navigate
:total 4}]
[:button {:on-click next
:class (stl/css :next-btn)} "Continue"]]]]]]
[:button {:on-click next
:class (stl/css :next-btn)} "Continue"]]]]]]
2
[:div {:class (stl/css-case :modal-overlay true
:onboarding-a-b-test onboarding-a-b-test?)}
[:div.animated {:class klass}
[:div {:class (stl/css :modal-container)}
[:img {:src "images/features/2.0-components.gif"
:class (stl/css :start-image)
:border "0"
:alt "Penpot's new components system"}]
2
[:div {:class (stl/css-case :modal-overlay true)}
[:div.animated {:class klass}
[:div {:class (stl/css :modal-container)}
[:img {:src "images/features/2.0-components.gif"
:class (stl/css :start-image)
:border "0"
:alt "Penpot's new components system"}]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :modal-header)}
[:h1 {:class (stl/css :modal-title)}
"New Components System"]]
[:div {:class (stl/css :feature)}
[:p {:class (stl/css :feature-content)}
"The new Penpot components system improves"
" control over instances, including their "
"inheritances and properties overrides. "
"Main components are now accessible as design"
" elements, allowing a better updating "
"workflow through instant changes synchronization."]
[:p {:class (stl/css :feature-content)}
"And that’s not all, there are new capabilities "
"such as component swapping and annotations "
"that will help you to better manage your design systems."]]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :modal-header)}
[:h1 {:class (stl/css :modal-title)}
"New Components System"]]
[:div {:class (stl/css :feature)}
[:p {:class (stl/css :feature-content)}
"The new Penpot components system improves"
" control over instances, including their "
"inheritances and properties overrides. "
"Main components are now accessible as design"
" elements, allowing a better updating "
"workflow through instant changes synchronization."]
[:p {:class (stl/css :feature-content)}
"And that’s not all, there are new capabilities "
"such as component swapping and annotations "
"that will help you to better manage your design systems."]]
[:div {:class (stl/css :navigation)}
[:& c/navigation-bullets
{:slide slide
:navigate navigate
:total 4}]
[:div {:class (stl/css :navigation)}
[:& c/navigation-bullets
{:slide slide
:navigate navigate
:total 4}]
[:button {:on-click next
:class (stl/css :next-btn)} "Continue"]]]]]]
[:button {:on-click next
:class (stl/css :next-btn)} "Continue"]]]]]]
3
[:div {:class (stl/css-case :modal-overlay true
:onboarding-a-b-test onboarding-a-b-test?)}
[:div.animated {:class klass}
[:div {:class (stl/css :modal-container)}
[:img {:src "images/features/2.0-html.gif"
:class (stl/css :start-image)
:border "0"
:alt " Penpot's HTML code generator"}]
3
[:div {:class (stl/css-case :modal-overlay true)}
[:div.animated {:class klass}
[:div {:class (stl/css :modal-container)}
[:img {:src "images/features/2.0-html.gif"
:class (stl/css :start-image)
:border "0"
:alt " Penpot's HTML code generator"}]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :modal-header)}
[:h1 {:class (stl/css :modal-title)}
"And much more"]]
[:div {:class (stl/css :feature)}
[:p {:class (stl/css :feature-content)}
"In addition to all of this, we’ve included several other requested improvements:"]
[:ul {:class (stl/css :feature-list)}
[:li "Access HTML markup code directly in inspect mode"]
[:li "Images are now treated as element fills, maintaining their aspect ratio on resize, ideal for flexible designs"]
[:li "Enjoy new color themes with options for both dark and light modes"]
[:li "Feel the speed boost! Enjoy a smoother experience with a bunch of performance improvements"]]]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :modal-header)}
[:h1 {:class (stl/css :modal-title)}
"And much more"]]
[:div {:class (stl/css :feature)}
[:p {:class (stl/css :feature-content)}
"In addition to all of this, we’ve included several other requested improvements:"]
[:ul {:class (stl/css :feature-list)}
[:li "Access HTML markup code directly in inspect mode"]
[:li "Images are now treated as element fills, maintaining their aspect ratio on resize, ideal for flexible designs"]
[:li "Enjoy new color themes with options for both dark and light modes"]
[:li "Feel the speed boost! Enjoy a smoother experience with a bunch of performance improvements"]]]
[:div {:class (stl/css :navigation)}
[:div {:class (stl/css :navigation)}
[:& c/navigation-bullets
{:slide slide
:navigate navigate
:total 4}]
[:& c/navigation-bullets
{:slide slide
:navigate navigate
:total 4}]
[:button {:on-click finish
:class (stl/css :next-btn)} "Let's go"]]]]]]))))
[:button {:on-click finish
:class (stl/css :next-btn)} "Let's go"]]]]]])))

1
frontend/src/app/main/ui/settings/sidebar.cljs
View file

@ -89,6 +89,7 @@
[:li {:class (stl/css-case :current options?
:settings-item true)
:on-click go-settings-options
:data-testid "settings-profile"
:data-test "settings-profile"}
[:span {:class (stl/css :element-title)} (tr "labels.settings")]]