Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-23 23:35:58 -05:00
Code Issues Activity

🔧 Apply feature flag to measures inputs

Browse source
This commit is contained in:
Andrés Moya 2024-11-05 16:01:40 +01:00
parent e641e93fd5
commit 3393963363
1 changed files with 74 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

120
frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
View file

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