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 0dc52d062..df5516f88 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 @@ -24,6 +24,7 @@ [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.numeric-input :refer [numeric-input*]] [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] + [app.main.ui.context :as muc] [app.main.ui.hooks :as hooks] [app.main.ui.icons :as i] [app.main.ui.workspace.tokens.core :as wtc] @@ -90,6 +91,8 @@ (reduce #(union %1 %2) (map #(get type->options %) all-types)) (get type->options type)) + design-tokens? (mf/use-ctx muc/design-tokens) + ids-with-children (or ids-with-children ids) old-shapes (if (= type :multiple) @@ -245,18 +248,19 @@ (fn [value attr] (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) - (dwsh/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)) - (dwu/commit-undo-transaction undo-id))))) - - + (if-not design-tokens? + (st/emit! (udw/trigger-bounding-box-cloaking ids) + (udw/update-dimensions ids attr (or token-value value))) + (st/emit! (udw/trigger-bounding-box-cloaking ids) + (dwu/start-undo-transaction undo-id) + (dwsh/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)) + (dwu/commit-undo-transaction undo-id)))))) on-proportion-lock-change (mf/use-fn @@ -456,34 +460,50 @@ :disabled disabled-width-sizing?) :title (tr "workspace.options.width")} [:span {:class (stl/css :icon-text)} "W"] - [:& editable-select - {:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--") - :class (stl/css :token-select) - :disabled disabled-width-sizing? - :on-change on-width-change - :on-token-remove #(on-width-change (wtc/maybe-resolve-token-value %)) - :options width-options - :position :left - :value (:width values) - :input-props {:type "number" - :no-validate true - :min 0.01}}]] + (if-not design-tokens? + [:> numeric-input* {:min 0.01 + :no-validate true + :placeholder (if (= :multiple (:width values)) (tr "settings.multiple") "--") + :on-change on-width-change + :disabled disabled-width-sizing? + :class (stl/css :numeric-input) + :value (:width values)}] + [:& editable-select + {:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--") + :class (stl/css :token-select) + :disabled disabled-width-sizing? + :on-change on-width-change + :on-token-remove #(on-width-change (wtc/maybe-resolve-token-value %)) + :options width-options + :position :left + :value (:width values) + :input-props {:type "number" + :no-validate true + :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") "--") - :class (stl/css :token-select) - :disabled disabled-height-sizing? - :on-change on-height-change - :on-token-remove #(on-height-change (wtc/maybe-resolve-token-value %)) - :options height-options - :position :right - :value (:height values) - :input-props {:type "number" - :no-validate true - :min 0.01}}]] + (if-not design-tokens? + [:> numeric-input* {:min 0.01 + :no-validate true + :placeholder (if (= :multiple (:height values)) (tr "settings.multiple") "--") + :on-change on-height-change + :disabled disabled-height-sizing? + :class (stl/css :numeric-input) + :value (:height values)}] + [:& editable-select + {:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--") + :class (stl/css :token-select) + :disabled disabled-height-sizing? + :on-change on-height-change + :on-token-remove #(on-height-change (wtc/maybe-resolve-token-value %)) + :options height-options + :position :right + :value (:height values) + :input-props {:type "number" + :no-validate true + :min 0.01}}])] [:button {:class (stl/css-case :lock-size-btn true :selected (true? proportion-lock) @@ -540,16 +560,24 @@ [:div {:class (stl/css :radius-1) :title (tr "workspace.options.radius")} [:span {:class (stl/css :icon)} i/corner-radius] - [:& editable-select - {:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--") - :class (stl/css :token-select) - :on-change on-radius-1-change - :on-token-remove on-border-radius-token-unapply - :options border-radius-options - :position :right - :value (:rx values) - :input-props {:type "number" - :min 0}}]] + (if-not design-tokens? + [:> numeric-input* + {:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--") + :ref radius-input-ref + :min 0 + :on-change on-radius-1-change + :class (stl/css :numeric-input) + :value (:rx values)}] + [:& editable-select + {:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--") + :class (stl/css :token-select) + :on-change on-radius-1-change + :on-token-remove on-border-radius-token-unapply + :options border-radius-options + :position :right + :value (:rx values) + :input-props {:type "number" + :min 0}}])] @radius-multi? [:div {:class (stl/css :radius-1)