Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-21 22:22:43 -05:00
Code Issues Activity

Add ability to edit existing token attributes

Browse source
This commit is contained in:
Akshay Gupta 2024-05-24 00:14:17 +05:30
parent 273a9530ea
commit 7a8722de1b
2 changed files with 28 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
frontend/src/app/main/ui/workspace/tokens/context_menu.cljs
View file

@ -8,9 +8,9 @@
(: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.modal :as modal]
[app.main.data.shortcuts :as scd] [app.main.data.shortcuts :as scd]
[app.main.data.tokens :as dt] [app.main.data.tokens :as dt]
[app.main.data.workspace :as dw] [app.main.data.workspace :as dw]
@ -32,24 +32,20 @@
(let [{:keys [modal attributes title]} token-type-props (let [{:keys [modal attributes title]} token-type-props
do-delete #(st/emit! (dt/delete-token token-id)) 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 #(println "Editing " modal) do-edit (fn [event]
edit-token (mf/use-fn (let [{:keys [key fields]} modal
(fn [event] token (dt/get-token-data-from-token-id token-id)]
(let [{:keys [key fields]} modal (st/emit! dt/hide-token-context-menu)
token (dt/get-token-data-from-token-id token-id)] (dom/stop-propagation event)
(dom/stop-propagation event) (modal/show! key {:x (.-clientX ^js event)
(modal/show! key {:x (.-clientX ^js event) :y (.-clientY ^js event)
:y (.-clientY ^js event) :position :right
:position :right :fields fields
:fields fields :token token})))]
: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 edit-token}]])) [:& menu-entry {:title "Edit Token" :on-click do-edit}]]))
(mf/defc token-context-menu (mf/defc token-context-menu
[] []

28
frontend/src/app/main/ui/workspace/tokens/modal.cljs
View file

@ -43,23 +43,24 @@
(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 token-name token-value token-description]}] [{:keys [token-type x y position fields token]}]
(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 (or token-name "")) name (mf/use-var (or (:name token) ""))
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 token-description) token-value (mf/use-var (or (:value token) ""))
description (mf/use-var (or (:description token) ""))
on-update-description #(reset! description (dom/get-target-val %)) on-update-description #(reset! description (dom/get-target-val %))
initial-state (map (fn [field] initial-fields (mapv (fn [field]
(if (= (:key field) :value) (assoc field :value (or (:value token) "")))
(assoc field :value token-value) fields)
field)) state (mf/use-state initial-fields)
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])
@ -71,9 +72,10 @@
(first) (first)
(val)) (val))
token (cond-> {:name @name token (cond-> {:name @name
:type token-type :type (or (:type token) token-type)
:value token-value} :value token-value}
@description (assoc :description @description))] @description (assoc :description @description)
(:id token) (assoc :id (:id token)))]
(st/emit! (dt/add-token token)) (st/emit! (dt/add-token token))
(modal/hide!)))] (modal/hide!)))]
@ -87,7 +89,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 :default-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)]
@ -95,8 +97,10 @@
(case type (case type
:box-shadow [:p "TODO BOX SHADOW"] :box-shadow [:p "TODO BOX SHADOW"]
[:& tokens.common/labeled-input {:label label [:& tokens.common/labeled-input {:label label
:default-value @token-value
:on-change #(on-update-state-field idx %)}])]) :on-change #(on-update-state-field idx %)}])])
[:& tokens.common/labeled-input {:label "Description" [:& tokens.common/labeled-input {:label "Description"
:default-value @description
:on-change #(on-update-description %)}] :on-change #(on-update-description %)}]
[:div {:class (stl/css :button-row)} [:div {:class (stl/css :button-row)}
[:button {:class (stl/css :button) [:button {:class (stl/css :button)