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

✨ Add shortcut for creating variant to the shortcuts panel (#7319) 

* ✨ Add shortcut for creating variant to the shortcuts panel

* ♻️ Update components to new rumext syntax

* 🐛 Fix unique "key" prop error for each child in a list

* ♻️ Remove deprecated icons and CSS cleanup

* 📎 PR changes
This commit is contained in:
Luis de Dios 2025-09-16 14:06:47 +02:00 committed by GitHub
parent 18d5b84b00
commit ef376fbb7b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 98 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/app/main/data/workspace/shortcuts.cljs
View File

@ -173,10 +173,10 @@
:subsections [:modify-layers]
:fn #(emit-when-no-readonly (dw/unmask-group))}
:create-component {:tooltip (ds/meta "K")
:command (ds/c-mod "k")
:subsections [:modify-layers]
:fn #(emit-when-no-readonly (dwv/add-component-or-variant))}
:create-component-variant {:tooltip (ds/meta "K")
:command (ds/c-mod "k")
:subsections [:modify-layers]
:fn #(emit-when-no-readonly (dwv/add-component-or-variant))}
:detach-component {:tooltip (ds/meta-shift "K")
:command (ds/c-mod "shift+k")

1
frontend/src/app/main/ui/components/search_bar.cljs
View File

@ -46,6 +46,7 @@
:size "s"
:class (stl/css :icon)}])
[:input {:id id
:class (stl/css :search-input)
:on-change handle-change
:value value
:auto-focus auto-focus

40
frontend/src/app/main/ui/components/search_bar.scss
View File

@ -18,6 +18,7 @@
.icon {
margin-left: $s-8;
flex: 0 0 $s-16;
color: var(--color-foreground-primary);
}
.search-input-wrapper {
@ -27,46 +28,47 @@
border: $s-1 solid var(--search-bar-input-border-color);
border-radius: $br-8;
background-color: var(--search-bar-input-background-color);
input {
width: 100%;
height: 100%;
margin: 0 $s-8 0 $s-4;
border: 0;
background-color: var(--input-background-color);
font-size: $fs-12;
color: var(--input-foreground-color);
border-radius: $br-8;
&:focus {
outline: none;
}
}
&:hover {
border: $s-1 solid var(--input-border-color-hover);
background-color: var(--input-background-color-hover);
input {
.search-input {
background-color: var(--input-background-color-hover);
}
}
&:focus-within {
background-color: var(--input-background-color-active);
color: var(--input-foreground-color-active);
border: $s-1 solid var(--input-border-color-focus);
input {
.search-input {
background-color: var(--input-background-color-active);
}
}
}
.search-input {
width: 100%;
height: 100%;
margin: 0 $s-8 0 $s-4;
border: 0;
background-color: var(--input-background-color);
font-size: $fs-12;
color: var(--input-foreground-color);
border-radius: $br-8;
&:focus {
outline: none;
}
}
.clear-icon {
@extend .button-tag;
flex: 0 0 $s-32;
height: 100%;
svg {
stroke: var(--icon-foreground);
}
color: var(--color-icon-default);
}
.search-box.has-children .search-input-wrapper {
border-radius: $br-2 $br-8 $br-8 $br-2;
border-radius: 0 $br-8 $br-8 0;
margin-left: 0;
}

4
frontend/src/app/main/ui/workspace/context_menu.cljs
View File

@ -588,7 +588,7 @@
[:> menu-separator* {}]
[:> menu-entry* {:title (tr "workspace.shape.menu.create-component")
:shortcut (sc/get-tooltip :create-component)
:shortcut (sc/get-tooltip :create-component-variant)
:on-click do-add-component}]
(when (not single?)
[:> menu-entry* {:title (tr "workspace.shape.menu.create-multiple-components")
@ -608,7 +608,7 @@
[:*
[:> menu-separator*]
[:> menu-entry* {:title (tr "workspace.shape.menu.add-variant")
:shortcut (sc/get-tooltip :create-component)
:shortcut (sc/get-tooltip :create-component-variant)
:on-click do-add-variant}]])
(when (and (not single?) all-main? (not any-variant?))

2
frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
View File

@ -514,7 +514,7 @@
:action do-update-component})
(when (and (or (not multi) same-variant?) main-instance?)
{:title (tr "workspace.shape.menu.add-variant")
:shortcut :create-component
:shortcut :create-component-variant
:action do-add-variant})
(when (and same-variant? main-instance? variant-id for-design-tab?)
{:title (tr "workspace.shape.menu.add-variant-property")

119
frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs
View File

@ -18,17 +18,18 @@
[app.main.data.workspace.shortcuts]
[app.main.store :as st]
[app.main.ui.components.search-bar :refer [search-bar*]]
[app.main.ui.ds.foundations.assets.icon :as i]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]]
[app.util.dom :as dom]
[app.util.i18n :refer [tr]]
[app.util.strings :refer [matches-search]]
[clojure.set :as set]
[clojure.string]
[cuerdas.core :as str]
[rumext.v2 :as mf]))
(mf/defc converted-chars
[{:keys [char command] :as props}]
(mf/defc converted-chars*
[{:keys [char command]}]
(let [modified-keys {:up ds/up-arrow
:down ds/down-arrow
:left ds/left-arrow
@ -93,7 +94,7 @@
(tr "shortcuts.clear-undo")
(tr "shortcuts.copy")
(tr "shortcuts.copy-link")
(tr "shortcuts.create-component")
(tr "shortcuts.create-component-variant")
(tr "shortcuts.create-new-project")
(tr "shortcuts.cut")
(tr "shortcuts.decrease-zoom")
@ -238,8 +239,8 @@
(assoc acc subsection {:children shortcuts-by-subsection})))]
(reduce reduce-sc {} subsections)))
(mf/defc shortcuts-keys
[{:keys [content command] :as props}]
(mf/defc shortcuts-keys*
[{:keys [content command]}]
(let [managed-list (if (coll? content)
content
(conj () content))
@ -251,26 +252,26 @@
penultimate (last short-char-list)]
[:span {:class (stl/css :keys)}
(for [chars short-char-list]
[:*
[:* {:key (str/join chars)}
(for [char chars]
[:& converted-chars {:key (dm/str char "-" (name command))
:char char
:command command}])
[:> converted-chars* {:key (dm/str char "-" (name command))
:char char
:command command}])
(when (not= chars penultimate) [:span {:class (stl/css :space)} ","])])
(when (not= last-element penultimate)
[:*
[:span {:class (stl/css :space)} (tr "shortcuts.or")]
(for [char last-element]
[:& converted-chars {:key (dm/str char "-" (name command))
:char char
:command command}])])]))
[:> converted-chars* {:key (dm/str char "-" (name command))
:char char
:command command}])])]))
(mf/defc shortcut-row
[{:keys [elements filter-term match-section? match-subsection?] :as props}]
(mf/defc shortcut-row*
[{:keys [elements filter-term is-match-section is-match-subsection]}]
(let [shortcut-name (keys elements)
shortcut-translations (map #(translation-keyname :sc %) shortcut-name)
match-shortcut? (some #(matches-search % @filter-term) shortcut-translations)
filtered (if (and (or match-section? match-subsection?) (not match-shortcut?))
filtered (if (and (or is-match-section is-match-subsection) (not match-shortcut?))
shortcut-translations
(filter #(matches-search % @filter-term) shortcut-translations))
sorted-filtered (sort filtered)]
@ -284,22 +285,22 @@
:key command-translate}
[:span {:class (stl/css :command-name)}
command-translate]
[:& shortcuts-keys {:content content
:command command}]]))]))
[:> shortcuts-keys* {:content content
:command command}]]))]))
(mf/defc section-title
[{:keys [is-visible? name is-sub?] :as props}]
[:div {:class (if is-sub?
(mf/defc section-title*
[{:keys [name is-visible is-sub]}]
[:div {:class (if is-sub
(stl/css :subsection-title)
(stl/css :section-title))}
[:span {:class (stl/css-case :open is-visible?
:collapsed-shortcuts true)} deprecated-icon/arrow]
[:span {:class (if is-sub?
[:> icon* {:icon-id (if is-visible i/arrow-down i/arrow-right)
:size "s"}]
[:span {:class (if is-sub
(stl/css :subsection-name)
(stl/css :section-name))} name]])
(mf/defc shortcut-subsection
[{:keys [subsections manage-sections filter-term match-section? open-sections] :as props}]
(mf/defc shortcut-subsection*
[{:keys [subsections manage-sections filter-term is-match-section open-sections]}]
(let [subsections-names (keys subsections)
subsection-translations (if (= :none (first subsections-names))
(map #(translation-keyname :sc %) subsections-names)
@ -308,10 +309,10 @@
;; Basics section is treated different because it has no sub sections
(if (= :none (first subsections-names))
(let [basic-shortcuts (:none subsections)]
[:& shortcut-row {:elements (:children basic-shortcuts)
:filter-term filter-term
:match-section? match-section?
:match-subsection? true}])
[:> shortcut-row* {:elements (:children basic-shortcuts)
:filter-term filter-term
:is-match-section is-match-section
:is-match-subsection true}])
[:ul {:class (stl/css :subsection-menu)}
(for [sub-translated sorted-translations]
@ -321,21 +322,21 @@
match-subsection? (matches-search (translation-keyname :sub-sec sub-name) @filter-term)
shortcut-names (map #(translation-keyname :sc %) (keys (:children sub-info)))
match-shortcuts? (some #(matches-search % @filter-term) shortcut-names)]
(when (or match-subsection? match-shortcuts? match-section?)
(when (or match-subsection? match-shortcuts? is-match-section)
[:li {:key sub-translated
:on-click (manage-sections (:id sub-info))}
[:& section-title {:name sub-translated
:is-sub? true
:is-visible? visible?}]
[:> section-title* {:name sub-translated
:is-visible visible?
:is-sub true}]
[:div {:style {:display (if visible? "initial" "none")}}
[:& shortcut-row {:elements (:children sub-info)
:filter-term filter-term
:match-section? match-section?
:match-subsection? match-subsection?}]]])))])))
[:> shortcut-row* {:elements (:children sub-info)
:filter-term filter-term
:is-match-section is-match-section
:is-match-subsection match-subsection?}]]])))])))
(mf/defc shortcut-section
[{:keys [section manage-sections open-sections filter-term] :as props}]
(mf/defc shortcut-section*
[{:keys [section manage-sections open-sections filter-term]}]
(let [[section-key section-info] section
section-id (:id section-info)
section-translation (translation-keyname :sec section-key)
@ -354,16 +355,16 @@
(when (or match-section? match-subsection? match-shortcut?)
[:div {:class (stl/css :section)
:on-click (manage-sections section-id)}
[:& section-title {:is-visible? visible?
:is-sub? false
:name section-translation}]
[:> section-title* {:name section-translation
:is-visible visible?
:is-sub false}]
[:div {:style {:display (if visible? "initial" "none")}}
[:& shortcut-subsection {:subsections subsections
:open-sections open-sections
:manage-sections manage-sections
:match-section? match-section?
:filter-term filter-term}]]])))
[:> shortcut-subsection* {:subsections subsections
:open-sections open-sections
:manage-sections manage-sections
:is-match-section match-section?
:filter-term filter-term}]]])))
(mf/defc shortcuts-container*
[{:keys [class]}]
@ -496,11 +497,13 @@
[:div {:class (dm/str class " " (stl/css :shortcuts))}
[:div {:class (stl/css :shortcuts-header)}
[:div {:class (stl/css :shortcuts-title)} (tr "shortcuts.title")]
[:div {:class (stl/css :shortcuts-close-button)
:on-click close-fn}
deprecated-icon/close]]
[:div {:class (stl/css :search-field)}
[:> icon-button* {:variant "ghost"
:icon i/close
:class (stl/css :shortcuts-close-button)
:on-click close-fn
:aria-label (tr "labels.close")}]]
[:div {:class (stl/css :search-field)}
[:> search-bar* {:on-change on-search-term-change-2
:on-clear on-search-clear-click
:value @filter-term
@ -510,9 +513,9 @@
(if match-any?
[:div {:class (stl/css :shortcuts-list)}
(for [section all-shortcuts]
[:& shortcut-section
{:section section
:manage-sections manage-sections
:open-sections open-sections
:filter-term filter-term}])]
[:> shortcut-section* {:key (->> section second :id first)
:section section
:manage-sections manage-sections
:open-sections open-sections
:filter-term filter-term}])]
[:div {:class (stl/css :not-found)} (tr "shortcuts.not-found")])]))

88
frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss
View File

@ -15,64 +15,7 @@
}
.search-field {
display: flex;
align-items: center;
height: $s-32;
margin: $s-16 $s-12 $s-4 $s-12;
border-radius: $br-8;
font-family: "worksans", "vazirmatn", sans-serif;
background-color: var(--color-background-tertiary);
.search-box {
align-items: center;
display: flex;
width: 100%;
.icon-wrapper {
display: flex;
svg {
@extend .button-icon-small;
stroke: var(--icon-foreground);
}
}
.input-text {
@include removeInputStyle;
height: $s-32;
width: 100%;
margin: 0;
padding: $s-4;
border: 0;
font-size: $fs-12;
color: var(--color-foreground-primary);
&::placeholder {
color: var(--color-foreground-secondary);
}
&:focus-visible {
border-color: var(--color-accent-primary-muted);
}
}
.clear-btn {
@include buttonStyle;
@include flexCenter;
height: $s-16;
width: $s-16;
.clear-icon {
@include flexCenter;
svg {
@extend .button-icon-small;
stroke: var(--icon-foreground);
}
}
}
}
.search-icon {
@include flexCenter;
width: $s-28;
svg {
@extend .button-icon-small;
stroke: var(--icon-foreground);
}
}
}
.shortcuts-header {
@ -92,18 +35,9 @@
}
.shortcuts-close-button {
@extend .button-tertiary;
position: absolute;
right: $s-2;
top: $s-2;
height: $s-28;
width: $s-28;
border-radius: $br-5;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
right: 0;
top: 0;
}
}
@ -122,7 +56,7 @@
flex-direction: column;
height: 100%;
padding: $s-12;
overflow-y: scroll;
overflow-y: auto;
font-size: $fs-12;
color: var(--title-foreground-color);
@ -135,27 +69,13 @@
padding: $s-8 0;
cursor: pointer;
.collapsed-shortcuts {
@include flexCenter;
svg {
@extend .button-icon-small;
stroke: var(--icon-foreground);
}
&.open {
transform: rotate(90deg);
}
}
.subsection-name,
.section-name {
padding-left: $s-4;
}
&:hover {
color: var(--title-foreground-color-hover);
.collapsed-shortcuts {
svg {
stroke: var(--title-foreground-color-hover);
}
}
}
}

4
frontend/translations/en.po
View File

@ -3903,8 +3903,8 @@ msgid "shortcuts.copy-props"
msgstr "Copy properties"
#: src/app/main/ui/workspace/sidebar/shortcuts.cljs:95
msgid "shortcuts.create-component"
msgstr "Create component"
msgid "shortcuts.create-component-variant"
msgstr "Create component / variant"
#: src/app/main/ui/workspace/sidebar/shortcuts.cljs:96
msgid "shortcuts.create-new-project"

4
frontend/translations/es.po
View File

@ -3902,8 +3902,8 @@ msgid "shortcuts.copy-props"
msgstr "Copiar propiedades"
#: src/app/main/ui/workspace/sidebar/shortcuts.cljs:95
msgid "shortcuts.create-component"
msgstr "Crear componente"
msgid "shortcuts.create-component-variant"
msgstr "Crear componente / variante"
#: src/app/main/ui/workspace/sidebar/shortcuts.cljs:96
msgid "shortcuts.create-new-project"