mirror
/
penpot
mirror of https://github.com/penpot/penpot.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

🐛 Apply design review fixes for variant connection help (#11186) (#7016)

This commit is contained in:
Juanfran 2025-07-31 12:26:04 +02:00 committed by GitHub
parent b46e9ee065
commit 6def5e285b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 49 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/resources/images/help-variant-connection.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 80 KiB

10
frontend/src/app/main/ui/components/title_bar.cljs
View File

@ -18,13 +18,13 @@
{::mf/props :obj}
[{:keys [class collapsable collapsed title children
btn-children all-clickable add-icon-gap
on-collapsed on-btn-click]}]
title-class on-collapsed on-btn-click]}]
(let [klass (stl/css-case :title-bar true
:all-clickable all-clickable)
klass (dm/str klass " " class)]
[:div {:class klass}
(if ^boolean collapsable
[:div {:class (stl/css :title-wrapper)}
[:div {:class [(stl/css :title-wrapper) title-class]}
(if ^boolean all-clickable
[:button {:class (stl/css :toggle-btn)
:on-click on-collapsed}
@ -41,9 +41,9 @@
chevron-icon]
[:div {:class (stl/css :title)}
title]])]
[:div {:class (stl/css-case
:title-only true
:title-only-icon-gap add-icon-gap)}
[:div {:class [(stl/css-case
:title-only true
:title-only-icon-gap add-icon-gap) title-class]}
title])
children
(when (some? on-btn-click)

18
frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
View File

@ -812,6 +812,12 @@
(mf/use-fn
#(swap! state* assoc :menu-open false))
on-click-variant-title-help
(mf/use-fn
(fn []
(modal/show! {:type :variants-help-modal})
(modal/allow-click-outside!)))
on-component-back
(mf/use-fn
#(st/emit! ::dwsp/interrupt))
@ -852,13 +858,21 @@
:collapsed (not open?)
:on-collapsed toggle-content
:title (tr "workspace.options.component")
:class (stl/css :title-spacing-component)}
:class (stl/css :title-spacing-component)
:title-class (stl/css-case :title-bar-variant is-variant?)}
[:span {:class (stl/css :copy-text)}
(if main-instance?
(if is-variant?
(tr "workspace.options.component.variant")
(tr "workspace.options.component.main"))
(tr "workspace.options.component.copy"))]])]
(tr "workspace.options.component.copy"))]
(when is-variant?
[:div {:class (stl/css :variants-help-modal-button)}
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.options.component.variants-help-modal.title")
:on-click on-click-variant-title-help
:icon "help"}]])])]
(when open?
[:div {:class (stl/css :element-content)}

5
frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
View File

@ -35,6 +35,11 @@
.title-spacing-component {
justify-content: flex-start;
gap: $s-4;
margin-bottom: $s-4;
}
.title-bar-variant {
flex-grow: 0;
}
.variants-help-modal-button {

6
frontend/src/app/main/ui/workspace/sidebar/options/menus/variants_help_modal.cljs
View File

@ -57,7 +57,7 @@
[:li {:class (stl/css :rule-item)}
[:div {:class (stl/css :rule-item-icon)}
[:> icon* {:icon-id i/text-mixed
:size "s"
:size "m"
:aria-hidden true}]]
[:div {:class (stl/css :rule-item-text)}
@ -68,7 +68,7 @@
[:li {:class (stl/css :rule-item)}
[:div {:class (stl/css :rule-item-icon)}
[:> icon* {:icon-id i/img
:size "s"
:size "m"
:aria-hidden true}]]
[:> text* {:typography t/body-large
@ -79,7 +79,7 @@
[:li {:class (stl/css :rule-item)}
[:div {:class (stl/css :rule-item-icon)}
[:> icon* {:icon-id i/folder
:size "s"
:size "m"
:aria-hidden true}]]
[:> text* {:class (stl/css :rule-item-text)

18
frontend/src/app/main/ui/workspace/sidebar/options/menus/variants_help_modal.scss
View File

@ -13,7 +13,7 @@
.modal-dialog {
@extend .modal-container-base;
max-width: $s-800;
max-width: $s-888;
width: 100%;
max-height: unset;
}
@ -27,6 +27,7 @@
display: flex;
color: var(--color-foreground-secondary);
padding-block-end: $s-32;
gap: $s-32;
}
.modal-close-btn {
@ -72,13 +73,20 @@
.button-row {
display: flex;
justify-content: end;
padding-block-start: $s-8;
}
.help-text {
inline-size: 100%;
flex: 0 1 50%;
:last-child {
margin-block-end: 0;
}
}
.help-image img {
inline-size: 374px;
.help-image {
flex: 0 1 50%;
img {
border-radius: $br-8;
}
}

14
frontend/translations/en.po
View File

@ -5521,25 +5521,25 @@ msgid "workspace.options.component.variants-help-modal.title"
msgstr "How variants stay connected"
msgid "workspace.options.component.variants-help-modal.intro"
msgstr "To keep changes when switching between variants, Penpot connects layers using these rules:"
msgstr "To keep changes when switching between variants, Penpot connects layers that:"
msgid "workspace.options.component.variants-help-modal.rule1"
msgstr "Same name"
msgstr "Share the same name."
msgid "workspace.options.component.variants-help-modal.rule2"
msgstr "Same type"
msgstr "Are the same type"
msgid "workspace.options.component.variants-help-modal.rule2.detail"
msgstr "Rectangle, ellipsis, paths and boolean operations count as same type"
msgstr "Rectangle, ellipsis, paths and boolean operations count as same type."
msgid "workspace.options.component.variants-help-modal.rule3"
msgstr "Same hierachy level"
msgstr "Have the same hierachy level"
msgid "workspace.options.component.variants-help-modal.rule3.detail"
msgstr "Goups, boards and layouts are considered equivalent"
msgstr "Goups, boards and layouts are considered equivalent."
msgid "workspace.options.component.variants-help-modal.outro"
msgstr "Changing any of these (e.g., renaming or moving a layer) breaks the connection, but reverting the change will restore it."
msgstr "Changing any of these (e.g., renaming or grouping a layer) breaks the connection, but reverting the change will restore it."
#: src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs:163
msgid "workspace.options.constraints"