From 78f3d54dee446741a1e17b4c18bec76245d245f4 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Wed, 29 May 2024 10:55:40 +0200 Subject: [PATCH 1/5] Add commit --- .../options/menus/layout_container.cljs | 42 +++++++++++++------ .../ui/workspace/tokens/editable_select.cljs | 1 - 2 files changed, 29 insertions(+), 14 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index 69842124ea..e17c3a921e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -14,8 +14,10 @@ [app.config :as cf] [app.main.data.events :as-alias ev] [app.main.data.workspace :as udw] + [app.main.data.workspace.changes :as dch] [app.main.data.workspace.grid-layout.editor :as dwge] [app.main.data.workspace.shape-layout :as dwsl] + [app.main.data.workspace.undo :as dwu] [app.main.features :as features] [app.main.refs :as refs] [app.main.store :as st] @@ -525,11 +527,8 @@ on-change' (mf/use-fn (mf/deps on-change) - (fn [value event] - (let [target (dom/get-current-target event) - wrap-type (dom/get-data target "wrap-type") - type (keyword (dom/get-data target "type"))] - (on-change (= "nowrap" wrap-type) type value event))))] + (fn [value wrap-type type] + (on-change (= "nowrap" wrap-type) type value)))] (mf/with-effect [] ;; on destroy component @@ -546,10 +545,10 @@ [:& editable-select {:disabled row-gap-disabled? :placeholder "--" - :on-change on-change' + :on-change #(on-change' %1 (d/name wrap-type) :row-gap) :on-blur on-gap-blur - :on-token-remove js/console.log - :options spacing-column-options + :on-token-remove #(on-change' (wtc/maybe-resolve-token-value %) (d/name wrap-type) :row-gap) + :options spacing-row-options :position :left :value (:row-gap value) :input-props {:type "number" @@ -568,10 +567,10 @@ [:& editable-select {:disabled col-gap-disabled? :placeholder "--" - :on-change on-change' + :on-change #(on-change' %1 (d/name wrap-type) :column-gap) :on-blur on-gap-blur - :on-token-remove js/console.log - :options spacing-row-options + :on-token-remove #(on-change' (wtc/maybe-resolve-token-value %) (d/name wrap-type) :column-gap) + :options spacing-column-options :position :right :value (:column-gap value) :input-props {:type "number" @@ -832,7 +831,7 @@ (st/emit! (dom/open-new-window cf/grid-help-uri))) (mf/defc layout-container-menu - {::mf/memo #{:ids :values :multiple :shape} + {#_#_::mf/memo #{:ids :values :multiple :shape} ::mf/props :obj} [{:keys [ids values multiple] :as props}] (let [;; Display @@ -871,6 +870,7 @@ :attributes (wtc/token-attributes :spacing) :selected-attributes #{:spacing-row}}))) + on-add-layout (mf/use-fn (fn [event] @@ -946,6 +946,22 @@ (some? type) (st/emit! (dwsl/update-layout ids {:layout-gap {type val}}))))) + on-gap-token-change + (fn [multiple? type value] + (let [token-value (wtc/maybe-resolve-token-value value) + undo-id (js/Symbol) + token-type (case type + :column-gap :spacing-column + :row-gap :spacing-row)] + (st/emit! + (dwu/start-undo-transaction undo-id) + (dch/update-shapes ids + (if token-value + #(assoc-in % [:applied-tokens token-type] (:id value)) + #(d/dissoc-in % [:applied-tokens token-type]))) + (on-gap-change multiple? type (or token-value value)) + (dwu/commit-undo-transaction undo-id)))) + ;; Padding on-padding-type-change (mf/use-fn @@ -1115,7 +1131,7 @@ [:div {:class (stl/css :forth-row)} [:& gap-section {:is-column is-column :wrap-type wrap-type - :on-change on-gap-change + :on-change on-gap-token-change :value (:layout-gap values) :spacing-column-options spacing-column-options :spacing-row-options spacing-row-options}] diff --git a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs index 90834ff56b..bb2589220b 100644 --- a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs @@ -155,7 +155,6 @@ no-text-selected? (str/empty? (.toString (js/document.getSelection))) delete-token? (and backspace? caret-at-beginning? no-text-selected?) replace-token-with-value? (and enter? (seq (str/trim value)))] - (js/console.log "key-down" token delete-token?) (cond delete-token? (do (dom/prevent-default event) From 28bdf62454c0a81e7bc9e5cd45654d8c42a9b38b Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Wed, 29 May 2024 13:50:31 +0200 Subject: [PATCH 2/5] Integrate changes --- .../options/menus/layout_container.cljs | 31 +++++++------------ 1 file changed, 11 insertions(+), 20 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index e17c3a921e..72684e836d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -937,30 +937,21 @@ ;; Gap on-gap-change - (fn [multiple? type val] - (let [val (mth/finite val 0)] - (cond - ^boolean multiple? - (st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap val :column-gap val}})) - - (some? type) - (st/emit! (dwsl/update-layout ids {:layout-gap {type val}}))))) - - on-gap-token-change (fn [multiple? type value] + (js/console.log "value" value) (let [token-value (wtc/maybe-resolve-token-value value) - undo-id (js/Symbol) + val (or token-value (mth/finite value 0)) token-type (case type :column-gap :spacing-column :row-gap :spacing-row)] - (st/emit! - (dwu/start-undo-transaction undo-id) - (dch/update-shapes ids - (if token-value - #(assoc-in % [:applied-tokens token-type] (:id value)) - #(d/dissoc-in % [:applied-tokens token-type]))) - (on-gap-change multiple? type (or token-value value)) - (dwu/commit-undo-transaction undo-id)))) + (cond + ^boolean multiple? + (st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap val :column-gap val} + :applied-tokens {token-type (if token-value (:id value) nil)}})) + + (some? type) + (st/emit! (dwsl/update-layout ids {:layout-gap {type val} + :applied-tokens {token-type (if token-value (:id value) nil)}}))))) ;; Padding on-padding-type-change @@ -1131,7 +1122,7 @@ [:div {:class (stl/css :forth-row)} [:& gap-section {:is-column is-column :wrap-type wrap-type - :on-change on-gap-token-change + :on-change on-gap-change :value (:layout-gap values) :spacing-column-options spacing-column-options :spacing-row-options spacing-row-options}] From 0e7e37afc2746faf39644ad63c667cc8fbcbc937 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Wed, 29 May 2024 14:21:33 +0200 Subject: [PATCH 3/5] Add padding editable select --- .../options/menus/layout_container.cljs | 79 ++++++++++++------- .../options/menus/layout_container.scss | 1 + 2 files changed, 53 insertions(+), 27 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index 72684e836d..21efb17812 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -297,7 +297,7 @@ (mf/defc simple-padding-selection {::mf/props :obj} - [{:keys [value on-change]}] + [{:keys [value on-change padding-x-options padding-y-options]}] (let [p1 (:p1 value) p2 (:p2 value) p3 (:p3 value) @@ -316,15 +316,12 @@ on-change' (mf/use-fn (mf/deps on-change) - (fn [value event] - (let [attr (-> (dom/get-current-target event) - (dom/get-data "attr") - (keyword))] - (on-change :simple attr value event)))) + (fn [value attr] + (on-change :simple attr value))) on-focus (mf/use-fn - (fn [event] + (fn [attr event] (let [attr (-> (dom/get-current-target event) (dom/get-data "attr") (keyword))] @@ -340,30 +337,39 @@ :title "Vertical padding"} [:span {:class (stl/css :icon)} i/padding-top-bottom] - [:> numeric-input* - {:class (stl/css :numeric-input) - :placeholder "--" - :data-attr "p1" - :on-change on-change' - :on-focus on-focus - :nillable true - :min 0 - :value p1}]] + [:& editable-select + {:placeholder "--" + :on-change #(on-change' %1 :p1) + :on-token-remove #(on-change' (wtc/maybe-resolve-token-value %) :p1) + :options padding-x-options + :position :left + :value p1 + :input-props {:type "number" + :data-attr "p1" + :onFocus on-focus + :no-validate true + :nillable true + :min 0 + :class (stl/css :numeric-input)}}]] [:div {:class (stl/css :padding-simple) :title "Horizontal padding"} [:span {:class (stl/css :icon)} i/padding-left-right] - [:> numeric-input* - {:className (stl/css :numeric-input) - :placeholder "--" - :data-attr "p2" - :on-change on-change' - :on-focus on-focus - :on-blur on-padding-blur - :nillable true - :min 0 - :value p2}]]])) + [:& editable-select + {:placeholder "--" + :on-change #(on-change' %1 :p2) + :on-token-remove #(on-change' (wtc/maybe-resolve-token-value %) :p2) + :options padding-x-options + :position :right + :value p2 + :input-props {:type "number" + :data-attr "p2" + :onFocus on-focus + :no-validate true + :nillable true + :min 0 + :class (stl/css :numeric-input)}}]]])) (mf/defc multiple-padding-selection {::mf/props :obj} @@ -870,6 +876,23 @@ :attributes (wtc/token-attributes :spacing) :selected-attributes #{:spacing-row}}))) + padding-x-options (mf/use-memo + (mf/deps shape spacing-tokens) + #(when shape + (wtc/tokens-name-map->select-options + {:shape shape + :tokens spacing-tokens + :attributes (wtc/token-attributes :spacing) + :selected-attributes #{:position-x}}))) + + padding-y-options (mf/use-memo + (mf/deps shape spacing-tokens) + #(when shape + (wtc/tokens-name-map->select-options + {:shape shape + :tokens spacing-tokens + :attributes (wtc/token-attributes :spacing) + :selected-attributes #{:position-y}}))) on-add-layout (mf/use-fn @@ -1130,7 +1153,9 @@ [:& padding-section {:value (:layout-padding values) :type (:layout-padding-type values) :on-type-change on-padding-type-change - :on-change on-padding-change}]]] + :on-change on-padding-change + :padding-x-options padding-x-options + :padding-y-options padding-y-options}]]] :grid [:div {:class (stl/css :grid-layout-menu)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss index c86ff11aec..3b8560e9ef 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss @@ -115,6 +115,7 @@ .padding-simple { @extend .input-element; + position: relative; max-width: $s-108; } } From 7376cb634a1adf6092c0b1b0ba28f7af91a4998e Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Wed, 29 May 2024 14:32:09 +0200 Subject: [PATCH 4/5] Add padding x/y tokens --- .../options/menus/layout_container.cljs | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index 21efb17812..d3d09c664a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -360,7 +360,7 @@ {:placeholder "--" :on-change #(on-change' %1 :p2) :on-token-remove #(on-change' (wtc/maybe-resolve-token-value %) :p2) - :options padding-x-options + :options padding-y-options :position :right :value p2 :input-props {:type "number" @@ -883,7 +883,7 @@ {:shape shape :tokens spacing-tokens :attributes (wtc/token-attributes :spacing) - :selected-attributes #{:position-x}}))) + :selected-attributes #{:padding-p1}}))) padding-y-options (mf/use-memo (mf/deps shape spacing-tokens) @@ -892,7 +892,7 @@ {:shape shape :tokens spacing-tokens :attributes (wtc/token-attributes :spacing) - :selected-attributes #{:position-y}}))) + :selected-attributes #{:padding-p2}}))) on-add-layout (mf/use-fn @@ -961,7 +961,6 @@ ;; Gap on-gap-change (fn [multiple? type value] - (js/console.log "value" value) (let [token-value (wtc/maybe-resolve-token-value value) val (or token-value (mth/finite value 0)) token-type (case type @@ -986,14 +985,17 @@ on-padding-change (mf/use-fn (mf/deps ids) - (fn [type prop val] - (let [val (mth/finite val 0)] + (fn [type prop value] + (let [token-value (wtc/maybe-resolve-token-value value) + val (or token-value (mth/finite value 0))] (cond (and (= type :simple) (= prop :p1)) - (st/emit! (dwsl/update-layout ids {:layout-padding {:p1 val :p3 val}})) + (st/emit! (dwsl/update-layout ids {:layout-padding {:p1 val :p3 val} + :applied-tokens {:padding-p1 (if token-value (:id value) nil)}})) (and (= type :simple) (= prop :p2)) - (st/emit! (dwsl/update-layout ids {:layout-padding {:p2 val :p4 val}})) + (st/emit! (dwsl/update-layout ids {:layout-padding {:p2 val :p4 val} + :applied-tokens {:padding-p2 (if token-value (:id value) nil)}})) (some? prop) (st/emit! (dwsl/update-layout ids {:layout-padding {prop val}})))))) From d16f1c773e13c9dfaa1cc74b651cb89effbd2e86 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Wed, 29 May 2024 14:53:40 +0200 Subject: [PATCH 5/5] Change both properties --- .../sidebar/options/menus/layout_container.cljs | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index d3d09c664a..47e7904c14 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -883,7 +883,7 @@ {:shape shape :tokens spacing-tokens :attributes (wtc/token-attributes :spacing) - :selected-attributes #{:padding-p1}}))) + :selected-attributes #{:padding-p1 :padding-p3}}))) padding-y-options (mf/use-memo (mf/deps shape spacing-tokens) @@ -892,7 +892,7 @@ {:shape shape :tokens spacing-tokens :attributes (wtc/token-attributes :spacing) - :selected-attributes #{:padding-p2}}))) + :selected-attributes #{:padding-p2 :padding-p4}}))) on-add-layout (mf/use-fn @@ -991,11 +991,13 @@ (cond (and (= type :simple) (= prop :p1)) (st/emit! (dwsl/update-layout ids {:layout-padding {:p1 val :p3 val} - :applied-tokens {:padding-p1 (if token-value (:id value) nil)}})) + :applied-tokens {:padding-p1 (if token-value (:id value) nil) + :padding-p3 (if token-value (:id value) nil)}})) (and (= type :simple) (= prop :p2)) (st/emit! (dwsl/update-layout ids {:layout-padding {:p2 val :p4 val} - :applied-tokens {:padding-p2 (if token-value (:id value) nil)}})) + :applied-tokens {:padding-p2 (if token-value (:id value) nil) + :padding-p4 (if token-value (:id value) nil)}})) (some? prop) (st/emit! (dwsl/update-layout ids {:layout-padding {prop val}}))))))