From 84d96a1004cef29dda54521c69bc5ffa661a3e2d Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Wed, 29 May 2024 18:47:17 +0530 Subject: [PATCH 1/3] Add initial spacing context menu entries --- .../ui/workspace/tokens/context_menu.cljs | 29 ++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) 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 1acf6657f..6f53ef28d 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs @@ -20,6 +20,7 @@ [app.main.store :as st] [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.icons :as i] + [app.main.data.workspace.shape-layout :as dwsl] [app.main.ui.workspace.context-menu :refer [menu-entry prevent-default]] [app.main.ui.workspace.tokens.core :as wtc] [app.util.dom :as dom] @@ -50,6 +51,22 @@ :token-type-props updated-token-type-props :selected-shapes selected-shapes}))) +(defn update-layout-spacing [value shape-ids attribute] + (st/emit! (dwsl/update-layout shape-ids {:layout-padding {:p1 value}}))) + + +(defn apply-spacing-token [token-id token-type-props attribute selected-shapes] + (let [token (dt/get-token-data-from-token-id token-id) + updated-token-type-props (if (#{:padding-p1} attribute) + (assoc token-type-props + :on-update-shape update-layout-spacing + :attributes #{attribute}) + token-type-props)] + (wtc/on-apply-token {:token token + :token-type-props updated-token-type-props + :selected-shapes selected-shapes}))) + + (defn additional-actions [{:keys [token-id token-type-props token-type selected-shapes] :as context-data}] (case token-type :border-radius [{:title "All" :action #(apply-border-radius-token token-id token-type-props :all selected-shapes)} @@ -57,6 +74,16 @@ {:title "Top Right" :action #(apply-border-radius-token token-id token-type-props :r2 selected-shapes)} {:title "Bottom Right" :action #(apply-border-radius-token token-id token-type-props :r3 selected-shapes)} {:title "Bottom Left" :action #(apply-border-radius-token token-id token-type-props :r4 selected-shapes)}] + :spacing [{:title "All" :action #(js/console.log "All spacing")} + {:title "Gap" :action #(js/console.log "Gap")} + {:title "Vertical padding" :action #(js/console.log "Vertical Padding")} + {:title "Horizontal padding" :action #(js/console.log "Horizontal Padding")} + {:title "Row Gap" :action #(js/console.log "Row Gap")} + {:title "Top" :action #(js/console.log "Top")} + {:title "Right" :action #(js/console.log "Right")} + {:title "Bottom" :action #(js/console.log "Bottom")} + {:title "Left" :action #(apply-spacing-token token-id token-type-props :padding-p1 selected-shapes)} + ] [])) (defn generate-menu-entries [{:keys [token-id token-type-props token-type selected-shapes] :as context-data}] @@ -74,7 +101,7 @@ :fields fields :token token})))}] specific-actions (additional-actions context-data) - all-actions (concat default-actions specific-actions)] + all-actions (concat specific-actions default-actions)] all-actions)) (mf/defc token-pill-context-menu From 76347228fe254ac779bf3fa24360266bd72b8678 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Thu, 30 May 2024 22:25:21 +0530 Subject: [PATCH 2/3] Add all spacing token context menu functionalities --- common/src/app/common/types/token.cljc | 13 +++--- .../ui/workspace/tokens/context_menu.cljs | 45 +++++++++++-------- 2 files changed, 32 insertions(+), 26 deletions(-) diff --git a/common/src/app/common/types/token.cljc b/common/src/app/common/types/token.cljc index 942864743..336e92eb1 100644 --- a/common/src/app/common/types/token.cljc +++ b/common/src/app/common/types/token.cljc @@ -92,13 +92,12 @@ (sm/def! ::spacing [:map - [:spacing-column {:optional true} ::sm/uuid] - [:spacing-row {:optional true} ::sm/uuid] - [:padding-p1 {:optional true} ::sm/uuid] - [:padding-p2 {:optional true} ::sm/uuid] - [:padding-p3 {:optional true} ::sm/uuid] - [:padding-p4 {:optional true} ::sm/uuid] - [:padding-all {:optional true} ::sm/uuid] + [:row-gap {:optional true} ::sm/uuid] + [:column-gap {:optional true} ::sm/uuid] + [:p1 {:optional true} ::sm/uuid] + [:p2 {:optional true} ::sm/uuid] + [:p3 {:optional true} ::sm/uuid] + [:p4 {:optional true} ::sm/uuid] [:position-x {:optional true} ::sm/uuid] [:position-y {:optional true} ::sm/uuid]]) 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 6f53ef28d..fef658247 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs @@ -16,15 +16,16 @@ [app.main.data.tokens :as dt] [app.main.data.workspace :as dw] [app.main.data.workspace.changes :as dch] + [app.main.data.workspace.shape-layout :as dwsl] [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.icons :as i] - [app.main.data.workspace.shape-layout :as dwsl] [app.main.ui.workspace.context-menu :refer [menu-entry prevent-default]] [app.main.ui.workspace.tokens.core :as wtc] [app.util.dom :as dom] [app.util.timers :as timers] + [cuerdas.core :as str] [okulary.core :as l] [rumext.v2 :as mf])) @@ -52,20 +53,27 @@ :selected-shapes selected-shapes}))) (defn update-layout-spacing [value shape-ids attribute] - (st/emit! (dwsl/update-layout shape-ids {:layout-padding {:p1 value}}))) + (let [layout-padding (into {} (map #(vector % value) attribute)) + layout-gap (if (= (first attribute) :row-gap) + {:row-gap value} + (if (= (first attribute) :column-gap) + {:column-gap value} + {}))] + (if (not-empty layout-gap) + (st/emit! (dwsl/update-layout shape-ids {:layout-gap layout-gap})) + (st/emit! (dwsl/update-layout shape-ids {:layout-padding layout-padding}))))) (defn apply-spacing-token [token-id token-type-props attribute selected-shapes] - (let [token (dt/get-token-data-from-token-id token-id) - updated-token-type-props (if (#{:padding-p1} attribute) - (assoc token-type-props - :on-update-shape update-layout-spacing - :attributes #{attribute}) - token-type-props)] + (let [token (dt/get-token-data-from-token-id token-id) + attribute (set attribute) + updated-token-type-props (assoc token-type-props + :on-update-shape update-layout-spacing + :attributes attribute)] (wtc/on-apply-token {:token token :token-type-props updated-token-type-props :selected-shapes selected-shapes}))) - + (defn additional-actions [{:keys [token-id token-type-props token-type selected-shapes] :as context-data}] (case token-type @@ -74,16 +82,15 @@ {:title "Top Right" :action #(apply-border-radius-token token-id token-type-props :r2 selected-shapes)} {:title "Bottom Right" :action #(apply-border-radius-token token-id token-type-props :r3 selected-shapes)} {:title "Bottom Left" :action #(apply-border-radius-token token-id token-type-props :r4 selected-shapes)}] - :spacing [{:title "All" :action #(js/console.log "All spacing")} - {:title "Gap" :action #(js/console.log "Gap")} - {:title "Vertical padding" :action #(js/console.log "Vertical Padding")} - {:title "Horizontal padding" :action #(js/console.log "Horizontal Padding")} - {:title "Row Gap" :action #(js/console.log "Row Gap")} - {:title "Top" :action #(js/console.log "Top")} - {:title "Right" :action #(js/console.log "Right")} - {:title "Bottom" :action #(js/console.log "Bottom")} - {:title "Left" :action #(apply-spacing-token token-id token-type-props :padding-p1 selected-shapes)} - ] + :spacing [{:title "All" :action #(apply-spacing-token token-id token-type-props [:p1 :p2 :p3 :p4] selected-shapes)} + {:title "Column Gap" :action #(apply-spacing-token token-id token-type-props [:column-gap] selected-shapes)} + {:title "Vertical padding" :action #(apply-spacing-token token-id token-type-props [:p1 :p3] selected-shapes)} + {:title "Horizontal padding" :action #(apply-spacing-token token-id token-type-props [:p2 :p4] selected-shapes)} + {:title "Row Gap" :action #(apply-spacing-token token-id token-type-props [:row-gap] selected-shapes)} + {:title "Top" :action #(apply-spacing-token token-id token-type-props [:p1] selected-shapes)} + {:title "Right" :action #(apply-spacing-token token-id token-type-props [:p2] selected-shapes)} + {:title "Bottom" :action #(apply-spacing-token token-id token-type-props [:p3] selected-shapes)} + {:title "Left" :action #(apply-spacing-token token-id token-type-props [:p4] selected-shapes)}] [])) (defn generate-menu-entries [{:keys [token-id token-type-props token-type selected-shapes] :as context-data}] From c3cee77efbb3a0f80df64c9157def90ab7c54f60 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Fri, 31 May 2024 18:19:42 +0530 Subject: [PATCH 3/3] remove unused imports and refactor functions --- .../ui/workspace/tokens/context_menu.cljs | 59 ++++++++----------- 1 file changed, 25 insertions(+), 34 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 fef658247..034bf5eda 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs @@ -8,24 +8,17 @@ (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] - [app.common.data.macros :as dm] [app.common.types.shape.radius :as ctsr] - [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] [app.main.data.workspace.changes :as dch] [app.main.data.workspace.shape-layout :as dwsl] [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.dropdown :refer [dropdown]] - [app.main.ui.icons :as i] [app.main.ui.workspace.context-menu :refer [menu-entry prevent-default]] [app.main.ui.workspace.tokens.core :as wtc] [app.util.dom :as dom] - [app.util.timers :as timers] - [cuerdas.core :as str] [okulary.core :as l] [rumext.v2 :as mf])) @@ -41,7 +34,7 @@ {:reg-objects? true :attrs [:rx :ry :r1 :r2 :r3 :r4]}))) -(defn apply-border-radius-token [token-id token-type-props attribute selected-shapes] +(defn apply-border-radius-token [{:keys [token-id token-type-props selected-shapes]} attribute] (let [token (dt/get-token-data-from-token-id token-id) updated-token-type-props (if (#{:r1 :r2 :r3 :r4} attribute) (assoc token-type-props @@ -52,19 +45,15 @@ :token-type-props updated-token-type-props :selected-shapes selected-shapes}))) -(defn update-layout-spacing [value shape-ids attribute] - (let [layout-padding (into {} (map #(vector % value) attribute)) - layout-gap (if (= (first attribute) :row-gap) - {:row-gap value} - (if (= (first attribute) :column-gap) - {:column-gap value} - {}))] - (if (not-empty layout-gap) - (st/emit! (dwsl/update-layout shape-ids {:layout-gap layout-gap})) - (st/emit! (dwsl/update-layout shape-ids {:layout-padding layout-padding}))))) +(defn update-layout-spacing [value shape-ids attributes] + (if-let [layout-gap (cond + (:row-gap attributes) {:row-gap value} + (:column-gap attributes) {:column-gap value})] + (st/emit! (dwsl/update-layout shape-ids {:layout-gap layout-gap})) + (st/emit! (dwsl/update-layout shape-ids {:layout-padding (zipmap attributes (repeat value))})))) -(defn apply-spacing-token [token-id token-type-props attribute selected-shapes] +(defn apply-spacing-token [{:keys [token-id token-type-props selected-shapes]} attribute] (let [token (dt/get-token-data-from-token-id token-id) attribute (set attribute) updated-token-type-props (assoc token-type-props @@ -75,22 +64,24 @@ :selected-shapes selected-shapes}))) -(defn additional-actions [{:keys [token-id token-type-props token-type selected-shapes] :as context-data}] +(defn additional-actions [{:keys [token-type] :as context-data}] (case token-type - :border-radius [{:title "All" :action #(apply-border-radius-token token-id token-type-props :all selected-shapes)} - {:title "Top Left" :action #(apply-border-radius-token token-id token-type-props :r1 selected-shapes)} - {:title "Top Right" :action #(apply-border-radius-token token-id token-type-props :r2 selected-shapes)} - {:title "Bottom Right" :action #(apply-border-radius-token token-id token-type-props :r3 selected-shapes)} - {:title "Bottom Left" :action #(apply-border-radius-token token-id token-type-props :r4 selected-shapes)}] - :spacing [{:title "All" :action #(apply-spacing-token token-id token-type-props [:p1 :p2 :p3 :p4] selected-shapes)} - {:title "Column Gap" :action #(apply-spacing-token token-id token-type-props [:column-gap] selected-shapes)} - {:title "Vertical padding" :action #(apply-spacing-token token-id token-type-props [:p1 :p3] selected-shapes)} - {:title "Horizontal padding" :action #(apply-spacing-token token-id token-type-props [:p2 :p4] selected-shapes)} - {:title "Row Gap" :action #(apply-spacing-token token-id token-type-props [:row-gap] selected-shapes)} - {:title "Top" :action #(apply-spacing-token token-id token-type-props [:p1] selected-shapes)} - {:title "Right" :action #(apply-spacing-token token-id token-type-props [:p2] selected-shapes)} - {:title "Bottom" :action #(apply-spacing-token token-id token-type-props [:p3] selected-shapes)} - {:title "Left" :action #(apply-spacing-token token-id token-type-props [:p4] selected-shapes)}] + :border-radius (let [action #(apply-border-radius-token context-data %)] + [{:title "All" :action #(action :all)} + {:title "Top Left" :action #(action :r1)} + {:title "Top Right" :action #(action :r2)} + {:title "Bottom Right" :action #(action :r3)} + {:title "Bottom Left" :action #(action :r4)}]) + :spacing (let [action #(apply-spacing-token context-data %)] + [{:title "All" :action #(action #{:p1 :p2 :p3 :p4})} + {:title "Column Gap" :action #(action #{:column-gap})} + {:title "Vertical padding" :action #(action #{:p1 :p3})} + {:title "Horizontal padding" :action #(action #{:p2 :p4})} + {:title "Row Gap" :action #(action #{:row-gap})} + {:title "Top" :action #(action #{:p1})} + {:title "Right" :action #(action #{:p2})} + {:title "Bottom" :action #(action #{:p3})} + {:title "Left" :action #(action #{:p4})}]) [])) (defn generate-menu-entries [{:keys [token-id token-type-props token-type selected-shapes] :as context-data}]