mirror of
https://github.com/penpot/penpot.git
synced 2025-02-01 11:59:17 -05:00
initial edit commit
This commit is contained in:
parent
1a144192a9
commit
273a9530ea
3 changed files with 32 additions and 9 deletions
|
@ -8,6 +8,7 @@
|
||||||
(:require-macros [app.main.style :as stl])
|
(:require-macros [app.main.style :as stl])
|
||||||
(:require
|
(:require
|
||||||
[app.common.data :as d]
|
[app.common.data :as d]
|
||||||
|
[app.main.data.modal :as modal]
|
||||||
[app.common.data.macros :as dm]
|
[app.common.data.macros :as dm]
|
||||||
[app.main.data.events :as ev]
|
[app.main.data.events :as ev]
|
||||||
[app.main.data.shortcuts :as scd]
|
[app.main.data.shortcuts :as scd]
|
||||||
|
@ -27,14 +28,28 @@
|
||||||
(l/derived :token-context-menu refs/workspace-local))
|
(l/derived :token-context-menu refs/workspace-local))
|
||||||
|
|
||||||
(mf/defc token-pill-context-menu
|
(mf/defc token-pill-context-menu
|
||||||
[{:keys [token-id]}]
|
[{:keys [token-id token-type-props]}]
|
||||||
(let [do-delete #(st/emit! (dt/delete-token token-id))
|
(let [{:keys [modal attributes title]} token-type-props
|
||||||
|
do-delete #(st/emit! (dt/delete-token token-id))
|
||||||
do-duplicate #(st/emit! (dt/duplicate-token token-id))
|
do-duplicate #(st/emit! (dt/duplicate-token token-id))
|
||||||
do-edit #(js/console.log "Editing")]
|
do-edit #(println "Editing " modal)
|
||||||
|
edit-token (mf/use-fn
|
||||||
|
(fn [event]
|
||||||
|
(let [{:keys [key fields]} modal
|
||||||
|
token (dt/get-token-data-from-token-id token-id)]
|
||||||
|
(dom/stop-propagation event)
|
||||||
|
(modal/show! key {:x (.-clientX ^js event)
|
||||||
|
:y (.-clientY ^js event)
|
||||||
|
:position :right
|
||||||
|
:fields fields
|
||||||
|
:token-type type
|
||||||
|
:token-name (:name token)
|
||||||
|
:token-value (:value token)
|
||||||
|
:token-description (:description token)}))))]
|
||||||
[:*
|
[:*
|
||||||
[:& menu-entry {:title "Delete Token" :on-click do-delete}]
|
[:& menu-entry {:title "Delete Token" :on-click do-delete}]
|
||||||
[:& menu-entry {:title "Duplicate Token" :on-click do-duplicate}]
|
[:& menu-entry {:title "Duplicate Token" :on-click do-duplicate}]
|
||||||
[:& menu-entry {:title "Edit Token" :on-click do-edit}]]))
|
[:& menu-entry {:title "Edit Token" :on-click edit-token}]]))
|
||||||
|
|
||||||
(mf/defc token-context-menu
|
(mf/defc token-context-menu
|
||||||
[]
|
[]
|
||||||
|
@ -64,4 +79,5 @@
|
||||||
:on-context-menu prevent-default}
|
:on-context-menu prevent-default}
|
||||||
(when (= :token (:type mdata))
|
(when (= :token (:type mdata))
|
||||||
[:ul {:class (stl/css :context-list)}
|
[:ul {:class (stl/css :context-list)}
|
||||||
[:& token-pill-context-menu {:token-id (:token-id mdata)}]])]]))
|
[:& token-pill-context-menu {:token-id (:token-id mdata)
|
||||||
|
:token-type-props (:token-type-props mdata)}]])]]))
|
|
@ -43,18 +43,23 @@
|
||||||
|
|
||||||
(mf/defc tokens-properties-form
|
(mf/defc tokens-properties-form
|
||||||
{::mf/wrap-props false}
|
{::mf/wrap-props false}
|
||||||
[{:keys [token-type x y position fields]}]
|
[{:keys [token-type x y position fields token-name token-value token-description]}]
|
||||||
(let [vport (mf/deref viewport)
|
(let [vport (mf/deref viewport)
|
||||||
style (calculate-position vport position x y)
|
style (calculate-position vport position x y)
|
||||||
|
|
||||||
name (mf/use-var nil)
|
name (mf/use-var (or token-name ""))
|
||||||
on-update-name #(reset! name (dom/get-target-val %))
|
on-update-name #(reset! name (dom/get-target-val %))
|
||||||
name-ref (mf/use-ref)
|
name-ref (mf/use-ref)
|
||||||
|
|
||||||
description (mf/use-var nil)
|
description (mf/use-var token-description)
|
||||||
on-update-description #(reset! description (dom/get-target-val %))
|
on-update-description #(reset! description (dom/get-target-val %))
|
||||||
|
|
||||||
state (mf/use-state fields)
|
initial-state (map (fn [field]
|
||||||
|
(if (= (:key field) :value)
|
||||||
|
(assoc field :value token-value)
|
||||||
|
field))
|
||||||
|
fields)
|
||||||
|
state (mf/use-state initial-state)
|
||||||
on-update-state-field (fn [idx e]
|
on-update-state-field (fn [idx e]
|
||||||
(->> (dom/get-target-val e)
|
(->> (dom/get-target-val e)
|
||||||
(assoc-in @state [idx :value])
|
(assoc-in @state [idx :value])
|
||||||
|
@ -82,6 +87,7 @@
|
||||||
:on-submit on-submit}
|
:on-submit on-submit}
|
||||||
[:div {:class (stl/css :token-rows)}
|
[:div {:class (stl/css :token-rows)}
|
||||||
[:& tokens.common/labeled-input {:label "Name"
|
[:& tokens.common/labeled-input {:label "Name"
|
||||||
|
:value @name
|
||||||
:on-change on-update-name
|
:on-change on-update-name
|
||||||
:input-ref name-ref}]
|
:input-ref name-ref}]
|
||||||
(for [[idx {:keys [type label]}] (d/enumerate @state)]
|
(for [[idx {:keys [type label]}] (d/enumerate @state)]
|
||||||
|
|
|
@ -67,6 +67,7 @@
|
||||||
(dom/stop-propagation event)
|
(dom/stop-propagation event)
|
||||||
(st/emit! (dt/show-token-context-menu {:type :token
|
(st/emit! (dt/show-token-context-menu {:type :token
|
||||||
:position (dom/get-client-position event)
|
:position (dom/get-client-position event)
|
||||||
|
:token-type-props token-type-props
|
||||||
:token-id (:id token)}))))
|
:token-id (:id token)}))))
|
||||||
|
|
||||||
on-toggle-open-click (mf/use-fn
|
on-toggle-open-click (mf/use-fn
|
||||||
|
|
Loading…
Add table
Reference in a new issue