github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-09-07 12:40:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

✨ Adjust component title

Browse Source
This commit is contained in:
Luis de Dios 2025-08-19 09:43:35 +02:00
parent 643621a389
commit 7f2af1c355
2 changed files with 77 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1032,6 +1032,9 @@
properties (mf/with-memo [data objects variant-id] properties (mf/with-memo [data objects variant-id]
(cfv/extract-properties-values data objects (:id shape))) (cfv/extract-properties-values data objects (:id shape)))
open* (mf/use-state true)
open? (deref open*)
menu-open* (mf/use-state false) menu-open* (mf/use-state false)
menu-open? (deref menu-open*) menu-open? (deref menu-open*)
@ -1041,6 +1044,10 @@
{:title (tr "workspace.shape.menu.add-variant") {:title (tr "workspace.shape.menu.add-variant")
:action #(st/emit! (dwv/add-new-variant (:id shape)))}] :action #(st/emit! (dwv/add-new-variant (:id shape)))}]
toggle-content
(mf/use-fn
#(swap! open* not))
on-menu-click on-menu-click
(mf/use-fn (mf/use-fn
(mf/deps menu-open* menu-open?) (mf/deps menu-open* menu-open?)
@ -1096,9 +1103,12 @@
[:div {:class (stl/css :element-title)} [:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable false [:& title-bar {:collapsable true
:collapsed (not open?)
:on-collapsed toggle-content
:title (tr "workspace.options.component") :title (tr "workspace.options.component")
:class (stl/css :title-spacing-component)} :class (stl/css :title-spacing-component)
:title-class (stl/css :title-bar-variant)}
[:span {:class (stl/css :copy-text)} [:span {:class (stl/css :copy-text)}
(tr "workspace.options.component.main")] (tr "workspace.options.component.main")]
@ -1109,78 +1119,79 @@
:on-click on-click-variant-title-help :on-click on-click-variant-title-help
:icon "help"}]]]] :icon "help"}]]]]
[:div {:class (stl/css :element-content)} (when open?
[:div {:class (stl/css-case :component-wrapper true [:div {:class (stl/css :element-content)}
:with-actions (not multi?) [:div {:class (stl/css-case :component-wrapper true
:without-actions multi?)} :with-actions (not multi?)
[:button {:class (stl/css-case :component-name-wrapper true :without-actions multi?)}
:with-main true [:button {:class (stl/css-case :component-name-wrapper true
:swappeable false)} :with-main true
:swappeable false)}
[:span {:class (stl/css :component-icon)} i/component] [:span {:class (stl/css :component-icon)} i/component]
[:div {:class (stl/css :name-wrapper)} [:div {:class (stl/css :name-wrapper)}
[:div {:class (stl/css :component-name)} [:div {:class (stl/css :component-name)}
[:span {:class (stl/css :component-name-inside)} [:span {:class (stl/css :component-name-inside)}
(if multi? (if multi?
(tr "settings.multiple") (tr "settings.multiple")
(cfh/last-path shape-name))]]]] (cfh/last-path shape-name))]]]]
(when-not multi? (when-not multi?
[:div {:class (stl/css :component-actions)} [:div {:class (stl/css :component-actions)}
[:button {:class (stl/css-case :menu-btn true [:button {:class (stl/css-case :menu-btn true
:selected menu-open?) :selected menu-open?)
:on-click on-menu-click} :on-click on-menu-click}
i/menu] i/menu]
[:& component-ctx-menu {:show menu-open? [:& component-ctx-menu {:show menu-open?
:on-close on-menu-close :on-close on-menu-close
:menu-entries menu-entries :menu-entries menu-entries
:main-instance true}]])] :main-instance true}]])]
(when-not multi? (when-not multi?
[:div {:class (stl/css :variant-property-list)} [:div {:class (stl/css :variant-property-list)}
(for [[pos property] (map-indexed vector properties)] (for [[pos property] (map-indexed vector properties)]
(let [last-prop? (<= (count properties) 1) (let [last-prop? (<= (count properties) 1)
values (->> (:value property) values (->> (:value property)
(move-empty-items-to-end) (move-empty-items-to-end)
(replace {"" "--"}) (replace {"" "--"})
(str/join ", ")) (str/join ", "))
is-editing (:editing? (meta property))] is-editing (:editing? (meta property))]
[:div {:key (str (:id shape) pos) [:div {:key (str (:id shape) pos)
:class (stl/css :variant-property-row)} :class (stl/css :variant-property-row)}
[:> input-with-meta* {:value (:name property) [:> input-with-meta* {:value (:name property)
:meta values :meta values
:is-editing is-editing :is-editing is-editing
:max-length ctv/property-max-length :max-length ctv/property-max-length
:data-position pos :data-position pos
:on-blur update-property-name}] :on-blur update-property-name}]
[:> icon-button* {:variant "ghost" [:> icon-button* {:variant "ghost"
:aria-label (if last-prop? :aria-label (if last-prop?
(tr "workspace.shape.menu.remove-variant-property.last-property") (tr "workspace.shape.menu.remove-variant-property.last-property")
(tr "workspace.shape.menu.remove-variant-property")) (tr "workspace.shape.menu.remove-variant-property"))
:on-click remove-property :on-click remove-property
:data-position pos :data-position pos
:icon "remove" :icon "remove"
:disabled last-prop?}]]))]) :disabled last-prop?}]]))])
(if malformed? (if malformed?
[:div {:class (stl/css :variant-warning-wrapper)}
[:> icon* {:icon-id "msg-neutral"
:class (stl/css :variant-warning-darken)}]
[:div {:class (stl/css :variant-warning-highlight)}
(tr "workspace.options.component.variant.malformed.group.title")]
[:button {:class (stl/css :variant-warning-button)
:on-click select-shapes-with-malformed}
(tr "workspace.options.component.variant.malformed.group.locate")]]
(when duplicated?
[:div {:class (stl/css :variant-warning-wrapper)} [:div {:class (stl/css :variant-warning-wrapper)}
[:> icon* {:icon-id "msg-neutral" [:> icon* {:icon-id "msg-neutral"
:class (stl/css :variant-warning-darken)}] :class (stl/css :variant-warning-darken)}]
[:div {:class (stl/css :variant-warning-highlight)} [:div {:class (stl/css :variant-warning-highlight)}
(tr "workspace.options.component.variant.duplicated.group.title")] (tr "workspace.options.component.variant.malformed.group.title")]
[:button {:class (stl/css :variant-warning-button) [:button {:class (stl/css :variant-warning-button)
:on-click select-shapes-with-duplicated} :on-click select-shapes-with-malformed}
(tr "workspace.options.component.variant.duplicated.group.locate")]]))]]))) (tr "workspace.options.component.variant.malformed.group.locate")]]
(when duplicated?
[:div {:class (stl/css :variant-warning-wrapper)}
[:> icon* {:icon-id "msg-neutral"
:class (stl/css :variant-warning-darken)}]
[:div {:class (stl/css :variant-warning-highlight)}
(tr "workspace.options.component.variant.duplicated.group.title")]
[:button {:class (stl/css :variant-warning-button)
:on-click select-shapes-with-duplicated}
(tr "workspace.options.component.variant.duplicated.group.locate")]]))])])))

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

@ -34,7 +34,7 @@
.title-spacing-component { .title-spacing-component {
justify-content: flex-start; justify-content: flex-start;
gap: $s-4; gap: $s-8;
margin-bottom: $s-4; margin-bottom: $s-4;
} }