From 464bdf3d9c8d83b1be32584dad8c7b3b212b4dc1 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Mon, 27 May 2024 15:09:36 +0200 Subject: [PATCH 1/9] Use single undo operation for width/height change --- .../main/ui/workspace/sidebar/options/menus/measures.cljs | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs index 0a4aeef63..109dabcd1 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs @@ -237,15 +237,18 @@ (mf/use-fn (mf/deps ids) (fn [value attr] - (let [token-value (wtc/maybe-resolve-token-value value)] + (let [token-value (wtc/maybe-resolve-token-value value) + undo-id (js/Symbol)] (st/emit! (udw/trigger-bounding-box-cloaking ids) + (dwu/start-undo-transaction undo-id) (dch/update-shapes ids (if token-value #(assoc-in % [:applied-tokens attr] (:id value)) #(d/dissoc-in % [:applied-tokens attr])) {:reg-objects? true :attrs [:applied-tokens]}) - (udw/update-dimensions ids attr (or token-value value)))))) + (udw/update-dimensions ids attr (or token-value value)) + (dwu/commit-undo-transaction undo-id))))) From 384da8555d6fb46bb960db095ec73ab81201d627 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Wed, 29 May 2024 08:50:50 +0200 Subject: [PATCH 2/9] Dynamically pass props to input --- .../sidebar/options/menus/measures.cljs | 28 +++++----- .../ui/workspace/tokens/editable_select.cljs | 53 +++++++++++-------- 2 files changed, 44 insertions(+), 37 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs index 109dabcd1..2d1c351fe 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs @@ -453,34 +453,34 @@ [:span {:class (stl/css :icon-text)} "W"] [:& editable-select {:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--") - :no-validate true - :min 0.01 :class (stl/css :token-select) :disabled disabled-width-sizing? - :input-class (stl/css :numeric-input) :on-change on-width-change :on-token-remove #(on-width-change (wtc/maybe-resolve-token-value %)) :options width-options :position :left - :type "number" - :value (:width values)}]] + :value (:width values) + :input-props {:type "number" + :no-validate true + :input-class (stl/css :numeric-input) + :min 0.01}}]] [:div {:class (stl/css-case :height true :disabled disabled-height-sizing?) :title (tr "workspace.options.height")} [:span {:class (stl/css :icon-text)} "H"] [:& editable-select {:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--") - :no-validate true - :min 0.01 :class (stl/css :token-select) :disabled disabled-height-sizing? - :input-class (stl/css :numeric-input) :on-change on-height-change :on-token-remove #(on-height-change (wtc/maybe-resolve-token-value %)) :options height-options :position :right - :type "number" - :value (:height values)}]] + :value (:height values) + :input-props {:type "number" + :no-validate true + :class (stl/css :numeric-input) + :min 0.01}}]] [:button {:class (stl/css-case :lock-size-btn true :selected (true? proportion-lock) @@ -539,15 +539,15 @@ [:span {:class (stl/css :icon)} i/corner-radius] [:& editable-select {:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--") - :min 0 :class (stl/css :token-select) - :input-class (stl/css :numeric-input) :on-change on-radius-1-change :on-token-remove on-border-radius-token-unapply :options border-radius-options :position :right - :type "number" - :value (:rx values)}]] + :value (:rx values) + :input-props {:type "number" + :class (stl/css :numeric-input) + :min 0}}]] @radius-multi? [:div {:class (stl/css :radius-1) 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 6c487cbd3..a2ff9eb85 100644 --- a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs @@ -62,8 +62,10 @@ [:span {:class (stl/css :check-icon)} i/tick]])))]]]) (mf/defc editable-select - [{:keys [value type options class on-change placeholder on-blur input-class on-token-remove position] :as params}] - (let [state* (mf/use-state {:id (uuid/next) + [{:keys [value options class on-change placeholder on-blur on-token-remove position input-props] :as params}] + (let [{:keys [type]} input-props + input-class (:class input-props) + state* (mf/use-state {:id (uuid/next) :is-open? false :current-value value :token-value nil @@ -153,6 +155,7 @@ 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) @@ -218,27 +221,31 @@ :class (stl/css :token-pill)} value]) (cond - token [:input {:value (or (:token-value state) "") - :class input-class - :on-change handle-token-change-input - :on-key-down handle-key-down - :on-focus handle-focus - :on-blur handle-blur}] - (= type "number") [:> numeric-input* {:autoFocus refocus? - :value (or current-value "") - :className input-class - :on-change set-value - :on-focus handle-focus - :on-blur handle-blur - :placeholder placeholder}] - :else [:input {:value (or current-value "") - :class input-class - :on-change handle-change-input - :on-key-down handle-key-down - :on-focus handle-focus - :on-blur handle-blur - :placeholder placeholder - :type type}]) + token [:& :input (merge input-props + {:value (or (:token-value state) "") + :type "text" + :class input-class + :onChange handle-token-change-input + :onKeyDown handle-key-down + :onFocus handle-focus + :onBlur handle-blur})] + (= type "number") [:& numeric-input* (merge input-props + {:autoFocus refocus? + :value (or current-value "") + :className input-class + :onChange set-value + :onFocus handle-focus + :onBlur handle-blur + :placeholder placeholder})] + :else [:& :input (merge input-props + {:value (or current-value "") + :class input-class + :onChange handle-change-input + :onKeyDown handle-key-down + :onFocus handle-focus + :onBlur handle-blur + :placeholder placeholder + :type type})]) (when (seq options) [:span {:class (stl/css :dropdown-button) From 985d8d33ff6a233e5641e3b7b3d4004758d2aa03 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Wed, 29 May 2024 09:02:26 +0200 Subject: [PATCH 3/9] Add event to passed arguments [*] [*] Needed for layout_container component --- .../src/app/main/ui/workspace/tokens/editable_select.cljs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 a2ff9eb85..8f0128d95 100644 --- a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs @@ -109,11 +109,11 @@ (swap! state* assoc :token-value value)) set-value - (fn [value] + (fn [value event] (swap! state* assoc :current-value value :token-value value) - (when on-change (on-change value))) + (when on-change (on-change value event))) select-item (mf/use-fn @@ -135,7 +135,7 @@ (fn [event] (let [value (-> event dom/get-target dom/get-value) value (or (d/parse-double value) value)] - (set-value value))) + (set-value value event))) handle-token-change-input (fn [event] From 9a7c944763ecbb24a6bf1bb8ca8315894327661c Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Wed, 29 May 2024 09:04:49 +0200 Subject: [PATCH 4/9] Remove unused classname --- .../app/main/ui/workspace/sidebar/options/menus/measures.cljs | 3 --- 1 file changed, 3 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs index 2d1c351fe..2362d9c19 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs @@ -462,7 +462,6 @@ :value (:width values) :input-props {:type "number" :no-validate true - :input-class (stl/css :numeric-input) :min 0.01}}]] [:div {:class (stl/css-case :height true :disabled disabled-height-sizing?) @@ -479,7 +478,6 @@ :value (:height values) :input-props {:type "number" :no-validate true - :class (stl/css :numeric-input) :min 0.01}}]] [:button {:class (stl/css-case :lock-size-btn true @@ -546,7 +544,6 @@ :position :right :value (:rx values) :input-props {:type "number" - :class (stl/css :numeric-input) :min 0}}]] @radius-multi? From c6f5da8873a24428532910f00a7fe670e1f0ab4e Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Wed, 29 May 2024 09:16:55 +0200 Subject: [PATCH 5/9] Move select styles to select component --- .../main/ui/workspace/sidebar/options/menus/measures.scss | 7 ------- .../src/app/main/ui/workspace/tokens/editable_select.scss | 7 +++++++ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss index 10bbf5056..b10cc6b9d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss @@ -238,10 +238,3 @@ .checkbox-button { @extend .button-icon; } - -.token-select { - li > span { - display: flex; - align-content: center; - } -} diff --git a/frontend/src/app/main/ui/workspace/tokens/editable_select.scss b/frontend/src/app/main/ui/workspace/tokens/editable_select.scss index 3f0eb03f9..7983be1b3 100644 --- a/frontend/src/app/main/ui/workspace/tokens/editable_select.scss +++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.scss @@ -88,6 +88,12 @@ padding: 0; display: flex; + & > span { + display: flex; + justify-content: flex-start; + align-content: center; + } + .label, .value { width: fit-content; @@ -100,6 +106,7 @@ .value { text-align: right; + justify-content: flex-end; flex: 0.6; } From 5c832472561edcef9662d616339f09e63fde4c0f Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Wed, 29 May 2024 09:20:14 +0200 Subject: [PATCH 6/9] Prevent selection on disabled selects --- .../src/app/main/ui/workspace/tokens/editable_select.cljs | 5 +++-- .../src/app/main/ui/workspace/tokens/editable_select.scss | 4 ++++ 2 files changed, 7 insertions(+), 2 deletions(-) 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 8f0128d95..0a56a1ce7 100644 --- a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs @@ -62,7 +62,7 @@ [:span {:class (stl/css :check-icon)} i/tick]])))]]]) (mf/defc editable-select - [{:keys [value options class on-change placeholder on-blur on-token-remove position input-props] :as params}] + [{:keys [value options disabled class on-change placeholder on-blur on-token-remove position input-props] :as params}] (let [{:keys [type]} input-props input-class (:class input-props) state* (mf/use-state {:id (uuid/next) @@ -215,7 +215,8 @@ (mf/set-ref-val! emit-blur? (not is-open?))) - [:div {:class (dm/str class " " (stl/css :editable-select))} + [:div {:class (dm/str class " " (stl/css-case :editable-select true + :editable-select-disabled disabled))} (when-let [{:keys [label value]} token] [:div {:title (str label ": " value) :class (stl/css :token-pill)} diff --git a/frontend/src/app/main/ui/workspace/tokens/editable_select.scss b/frontend/src/app/main/ui/workspace/tokens/editable_select.scss index 7983be1b3..2aa324a1e 100644 --- a/frontend/src/app/main/ui/workspace/tokens/editable_select.scss +++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.scss @@ -137,3 +137,7 @@ } } } + +.editable-select-disabled { + pointer-events: none; +} From fb5f7e870aad1341cf6761a7167d39c079807833 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Wed, 29 May 2024 09:23:47 +0200 Subject: [PATCH 7/9] Fix drop-down button spacing --- .../src/app/main/ui/workspace/tokens/editable_select.cljs | 4 ++-- .../src/app/main/ui/workspace/tokens/editable_select.scss | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) 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 0a56a1ce7..90834ff56 100644 --- a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs @@ -249,8 +249,8 @@ :type type})]) (when (seq options) - [:span {:class (stl/css :dropdown-button) - :on-click toggle-dropdown} + [:div {:class (stl/css :dropdown-button) + :on-click toggle-dropdown} i/arrow]) (when (and is-open? (seq options)) diff --git a/frontend/src/app/main/ui/workspace/tokens/editable_select.scss b/frontend/src/app/main/ui/workspace/tokens/editable_select.scss index 2aa324a1e..4fbd3e593 100644 --- a/frontend/src/app/main/ui/workspace/tokens/editable_select.scss +++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.scss @@ -30,6 +30,7 @@ .dropdown-button { @include flexCenter; margin-right: -$s-8; + padding-right: $s-8; padding-left: 0; aspect-ratio: 0.8 / 1; width: auto; From 1ad998de233a5ddfc72a13bc851dcd15473733d6 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Wed, 29 May 2024 09:28:38 +0200 Subject: [PATCH 8/9] Use editable-select for col-gap/row-gap --- .../options/menus/layout_container.cljs | 47 +++++++++++-------- .../options/menus/layout_container.scss | 2 + 2 files changed, 30 insertions(+), 19 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 b7a5dde44..ffb4be5fa 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 @@ -27,6 +27,8 @@ [app.main.ui.formats :as fmt] [app.main.ui.hooks :as h] [app.main.ui.icons :as i] + [app.main.ui.workspace.tokens.core :as wtc] + [app.main.ui.workspace.tokens.editable-select :refer [editable-select]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [app.util.keyboard :as kbd] @@ -507,7 +509,7 @@ (mf/defc gap-section {::mf/props :obj} - [{:keys [is-column wrap-type on-change value] + [{:keys [is-column wrap-type on-change value options] :or {wrap-type :none} :as props}] (let [nowrap? (= :nowrap wrap-type) @@ -541,38 +543,45 @@ :disabled row-gap-disabled?) :title "Row gap"} [:span {:class (stl/css :icon)} i/gap-vertical] - [:> numeric-input* - {:class (stl/css :numeric-input true) - :no-validate true + [:& editable-select + {:disabled row-gap-disabled? :placeholder "--" - :data-type "row-gap" - :data-wrap-type (d/name wrap-type) - :on-focus on-gap-focus :on-change on-change' :on-blur on-gap-blur - :nillable true - :min 0 + :on-token-remove js/console.log + :options options + :position :left :value (:row-gap value) - :disabled row-gap-disabled?}]] + :input-props {:type "number" + :data-type "row-gap" + :data-wrap-type (d/name wrap-type) + :no-validate true + :nillable true + :min 0 + :class (stl/css :numeric-input)}}]] [:div {:class (stl/css-case :column-gap true :disabled col-gap-disabled?) :title "Column gap"} [:span {:class (stl/css :icon)} i/gap-horizontal] - [:> numeric-input* - {:class (stl/css :numeric-input true) - :no-validate true + [:& editable-select + {:disabled col-gap-disabled? :placeholder "--" - :data-type "column-gap" - :data-wrap-type (d/name wrap-type) - :on-focus on-gap-focus :on-change on-change' :on-blur on-gap-blur - :nillable true - :min 0 + :on-token-remove js/console.log + :options options + :position :right :value (:column-gap value) - :disabled col-gap-disabled?}]]])) + :input-props {:type "number" + :data-type "column-gap" + :data-wrap-type (d/name wrap-type) + :no-validate true + :onFocus on-gap-focus + :nillable true + :min 0 + :class (stl/css :numeric-input)}}]]])) ;; GRID COMPONENTS 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 a51118e29..c86ff11ae 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 @@ -84,6 +84,7 @@ gap: $s-4; .column-gap { @extend .input-element; + position: relative; width: $s-108; &.disabled { @extend .disabled-input; @@ -91,6 +92,7 @@ } .row-gap { @extend .input-element; + position: relative; width: $s-108; &.disabled { @extend .disabled-input; From c2c0fbf40a6ee72d668f8fee88b678ab1c8bbbf2 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Wed, 29 May 2024 09:37:24 +0200 Subject: [PATCH 9/9] Add spacing/row options --- .../options/menus/layout_container.cljs | 37 ++++++++++++++++--- 1 file changed, 31 insertions(+), 6 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 ffb4be5fa..69842124e 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 @@ -509,7 +509,7 @@ (mf/defc gap-section {::mf/props :obj} - [{:keys [is-column wrap-type on-change value options] + [{:keys [is-column wrap-type on-change value spacing-column-options spacing-row-options] :or {wrap-type :none} :as props}] (let [nowrap? (= :nowrap wrap-type) @@ -549,7 +549,7 @@ :on-change on-change' :on-blur on-gap-blur :on-token-remove js/console.log - :options options + :options spacing-column-options :position :left :value (:row-gap value) :input-props {:type "number" @@ -571,7 +571,7 @@ :on-change on-change' :on-blur on-gap-blur :on-token-remove js/console.log - :options options + :options spacing-row-options :position :right :value (:column-gap value) :input-props {:type "number" @@ -832,9 +832,9 @@ (st/emit! (dom/open-new-window cf/grid-help-uri))) (mf/defc layout-container-menu - {::mf/memo #{:ids :values :multiple} + {::mf/memo #{:ids :values :multiple :shape} ::mf/props :obj} - [{:keys [ids values multiple]}] + [{:keys [ids values multiple] :as props}] (let [;; Display layout-type (:layout values) has-layout? (some? layout-type) @@ -848,6 +848,29 @@ on-toggle-visibility (mf/use-fn #(swap! open* not)) + shape (when-not multiple + (first (deref (refs/objects-by-id ids)))) + tokens (mf/deref refs/workspace-tokens) + spacing-tokens (mf/use-memo (mf/deps tokens) #(:spacing (wtc/group-tokens-by-type tokens))) + + spacing-column-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 #{:spacing-column}}))) + + spacing-row-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 #{:spacing-row}}))) + on-add-layout (mf/use-fn (fn [event] @@ -1093,7 +1116,9 @@ [:& gap-section {:is-column is-column :wrap-type wrap-type :on-change on-gap-change - :value (:layout-gap values)}] + :value (:layout-gap values) + :spacing-column-options spacing-column-options + :spacing-row-options spacing-row-options}] [:& padding-section {:value (:layout-padding values) :type (:layout-padding-type values)