From 273a9530ea275117135e004c42017233fbdc6bb4 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Thu, 23 May 2024 13:14:28 +0530 Subject: [PATCH 1/2] initial edit commit --- .../ui/workspace/tokens/context_menu.cljs | 26 +++++++++++++++---- .../app/main/ui/workspace/tokens/modal.cljs | 14 +++++++--- .../app/main/ui/workspace/tokens/sidebar.cljs | 1 + 3 files changed, 32 insertions(+), 9 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs index c6825f621d..94c5811940 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs @@ -8,6 +8,7 @@ (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] + [app.main.data.modal :as modal] [app.common.data.macros :as dm] [app.main.data.events :as ev] [app.main.data.shortcuts :as scd] @@ -27,14 +28,28 @@ (l/derived :token-context-menu refs/workspace-local)) (mf/defc token-pill-context-menu - [{:keys [token-id]}] - (let [do-delete #(st/emit! (dt/delete-token token-id)) + [{:keys [token-id token-type-props]}] + (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-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 "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 [] @@ -64,4 +79,5 @@ :on-context-menu prevent-default} (when (= :token (:type mdata)) [:ul {:class (stl/css :context-list)} - [:& token-pill-context-menu {:token-id (:token-id mdata)}]])]])) \ No newline at end of file + [:& token-pill-context-menu {:token-id (:token-id mdata) + :token-type-props (:token-type-props mdata)}]])]])) \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/tokens/modal.cljs b/frontend/src/app/main/ui/workspace/tokens/modal.cljs index 5420fc9b50..3c0cfc5e1b 100644 --- a/frontend/src/app/main/ui/workspace/tokens/modal.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/modal.cljs @@ -43,18 +43,23 @@ (mf/defc tokens-properties-form {::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) 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 %)) 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 %)) - 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] (->> (dom/get-target-val e) (assoc-in @state [idx :value]) @@ -82,6 +87,7 @@ :on-submit on-submit} [:div {:class (stl/css :token-rows)} [:& tokens.common/labeled-input {:label "Name" + :value @name :on-change on-update-name :input-ref name-ref}] (for [[idx {:keys [type label]}] (d/enumerate @state)] diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index edca4db0cd..64800f9621 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -67,6 +67,7 @@ (dom/stop-propagation event) (st/emit! (dt/show-token-context-menu {:type :token :position (dom/get-client-position event) + :token-type-props token-type-props :token-id (:id token)})))) on-toggle-open-click (mf/use-fn From 7a8722de1bfea834d760c02121d66ff6e61e53cd Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Fri, 24 May 2024 00:14:17 +0530 Subject: [PATCH 2/2] Add ability to edit existing token attributes --- .../ui/workspace/tokens/context_menu.cljs | 28 ++++++++----------- .../app/main/ui/workspace/tokens/modal.cljs | 28 +++++++++++-------- 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs index 94c5811940..5a69b066bd 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs @@ -8,9 +8,9 @@ (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] - [app.main.data.modal :as modal] [app.common.data.macros :as dm] [app.main.data.events :as ev] + [app.main.data.modal :as modal] [app.main.data.shortcuts :as scd] [app.main.data.tokens :as dt] [app.main.data.workspace :as dw] @@ -32,24 +32,20 @@ (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-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)}))))] + do-edit (fn [event] + (let [{:keys [key fields]} modal + token (dt/get-token-data-from-token-id token-id)] + (st/emit! dt/hide-token-context-menu) + (dom/stop-propagation event) + (modal/show! key {:x (.-clientX ^js event) + :y (.-clientY ^js event) + :position :right + :fields fields + :token token})))] [:* [:& menu-entry {:title "Delete Token" :on-click do-delete}] [:& 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 [] diff --git a/frontend/src/app/main/ui/workspace/tokens/modal.cljs b/frontend/src/app/main/ui/workspace/tokens/modal.cljs index 3c0cfc5e1b..5529d328aa 100644 --- a/frontend/src/app/main/ui/workspace/tokens/modal.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/modal.cljs @@ -43,23 +43,24 @@ (mf/defc tokens-properties-form {::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) 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 %)) 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 %)) - initial-state (map (fn [field] - (if (= (:key field) :value) - (assoc field :value token-value) - field)) - fields) - state (mf/use-state initial-state) + initial-fields (mapv (fn [field] + (assoc field :value (or (:value token) ""))) + fields) + state (mf/use-state initial-fields) + on-update-state-field (fn [idx e] (->> (dom/get-target-val e) (assoc-in @state [idx :value]) @@ -71,9 +72,10 @@ (first) (val)) token (cond-> {:name @name - :type token-type + :type (or (:type token) token-type) :value token-value} - @description (assoc :description @description))] + @description (assoc :description @description) + (:id token) (assoc :id (:id token)))] (st/emit! (dt/add-token token)) (modal/hide!)))] @@ -87,7 +89,7 @@ :on-submit on-submit} [:div {:class (stl/css :token-rows)} [:& tokens.common/labeled-input {:label "Name" - :value @name + :default-value @name :on-change on-update-name :input-ref name-ref}] (for [[idx {:keys [type label]}] (d/enumerate @state)] @@ -95,8 +97,10 @@ (case type :box-shadow [:p "TODO BOX SHADOW"] [:& tokens.common/labeled-input {:label label + :default-value @token-value :on-change #(on-update-state-field idx %)}])]) [:& tokens.common/labeled-input {:label "Description" + :default-value @description :on-change #(on-update-description %)}] [:div {:class (stl/css :button-row)} [:button {:class (stl/css :button)