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

✨ Improved svg options handling

Browse source
This commit is contained in:
alonso.torres 2021-03-05 10:46:36 +01:00 • committed by Andrey Antukh
parent 29f421d867
commit 6f07b4ea80
3 changed files with 52 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

64
frontend/src/app/main/ui/workspace/sidebar/options/svg_attrs.cljs
View file

@ -16,29 +16,46 @@
[app.main.ui.workspace.sidebar.options.rows.input-row :refer [input-row]]
[app.util.dom :as dom]
[app.util.i18n :refer [tr]]
[rumext.alpha :as mf]))
[rumext.alpha :as mf]
[app.main.ui.icons :as i]))
(mf/defc attribute-value [{:keys [attr value on-change] :as props}]
(mf/defc attribute-value [{:keys [attr value on-change on-delete] :as props}]
(let [handle-change
(mf/use-callback
(mf/deps attr on-change)
(fn [event]
(on-change attr (dom/get-target-val event))))
label (->> attr (map name) (str/join "."))]
handle-delete
(mf/use-callback
(mf/deps attr on-delete)
(fn []
(on-delete attr)))
label (->> attr last name)]
[:div.element-set-content
(if (string? value)
[:& input-row {:label label
:type :text
:class "large"
:value (str value)
:on-change handle-change}]
[:div.row-flex.row-flex-removable
[:& input-row {:label label
:type :text
:class "large"
:value (str value)
:on-change handle-change}]
[:div.element-set-actions
[:div.element-set-actions-button {:on-click handle-delete}
i/minus]]]
(for [[key value] value]
[:& attribute-value {:key key
:attr (conj attr key)
:value value
:on-change handle-change}]))]))
[:*
[:div.element-set-title
{:style {:border-bottom "1px solid #444" :margin-bottom "0.5rem"}}
[:span (str (name (last attr)))]]
(for [[key value] value]
[:& attribute-value {:key key
:attr (conj attr key)
:value value
:on-change on-change
:on-delete on-delete}])])]))
(mf/defc svg-attrs-menu [{:keys [ids type values]}]
(let [handle-change
@ -47,8 +64,24 @@
(fn [attr value]
(let [update-fn
(fn [shape] (assoc-in shape (concat [:svg-attrs] attr) value))]
(st/emit! (dwc/update-shapes ids update-fn)))))
(st/emit! (dwc/update-shapes ids update-fn)))))]
handle-delete
(mf/use-callback
(mf/deps ids)
(fn [attr]
(let [update-fn
(fn [shape]
(let [update-path (concat [:svg-attrs] (butlast attr))
shape (update-in shape update-path dissoc (last attr))
shape (cond-> shape
(empty? (get-in shape [:svg-attrs :style]))
(update :svg-attrs dissoc :style))]
shape))]
(st/emit! (dwc/update-shapes ids update-fn)))))
]
(when-not (empty? (:svg-attrs values))
[:div.element-set
@ -59,4 +92,5 @@
[:& attribute-value {:key attr-key
:attr [attr-key]
:value attr-value
:on-change handle-change}])])))
:on-change handle-change
:on-delete handle-delete}])])))