Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-21 14:12:36 -05:00
Code Issues Activity

Differentiate width/height sizing selected properties

Browse source
This commit is contained in:
Florian Schroedl 2024-05-24 10:34:20 +02:00
parent 49d9b52b12
commit f52e2e3a41
2 changed files with 27 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -109,12 +109,20 @@
:tokens border-radius-tokens :tokens border-radius-tokens
:attributes (wtc/token-attributes :border-radius)})) :attributes (wtc/token-attributes :border-radius)}))
sizing-tokens (:sizing tokens-by-type) sizing-tokens (:sizing tokens-by-type)
sizing-options (mf/use-memo width-options (mf/use-memo
(mf/deps shape sizing-tokens)
#(wtc/tokens-name-map->select-options
{:shape shape
:tokens sizing-tokens
:attributes (wtc/token-attributes :sizing)
:selected-attributes #{:width}}))
height-options (mf/use-memo
(mf/deps shape sizing-tokens) (mf/deps shape sizing-tokens)
#(wtc/tokens-name-map->select-options #(wtc/tokens-name-map->select-options
{:shape shape {:shape shape
:tokens sizing-tokens :tokens sizing-tokens
:attributes (wtc/token-attributes :sizing)})) :attributes (wtc/token-attributes :sizing)
:selected-attributes #{:height}}))
flex-child? (->> selection-parents (some ctl/flex-layout?)) flex-child? (->> selection-parents (some ctl/flex-layout?))
absolute? (ctl/item-absolute? shape) absolute? (ctl/item-absolute? shape)
@ -235,7 +243,7 @@
(dch/update-shapes ids (dch/update-shapes ids
(if token-value (if token-value
#(assoc-in % [:applied-tokens attr] (:id value)) #(assoc-in % [:applied-tokens attr] (:id value))
#(dissoc % :applied-tokens attr)) #(d/dissoc-in % [:applied-tokens attr]))
{:reg-objects? true {:reg-objects? true
:attrs [:applied-tokens]}) :attrs [:applied-tokens]})
(udw/update-dimensions ids attr (or token-value value)))))) (udw/update-dimensions ids attr (or token-value value))))))
@ -450,7 +458,7 @@
:input-class (stl/css :numeric-input) :input-class (stl/css :numeric-input)
:on-change on-width-change :on-change on-width-change
:on-token-remove #(on-width-change (wtc/maybe-resolve-token-value %)) :on-token-remove #(on-width-change (wtc/maybe-resolve-token-value %))
:options sizing-options :options width-options
:position :left :position :left
:type "number" :type "number"
:value (:width values)}]] :value (:width values)}]]
@ -458,13 +466,19 @@
: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"]
[:> numeric-input* {:min 0.01 [:& editable-select
:no-validate true {:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
:placeholder (if (= :multiple (:height values)) (tr "settings.multiple") "--") :no-validate true
:on-change on-height-change :min 0.01
:disabled disabled-height-sizing? :class (stl/css :token-select)
:className (stl/css :numeric-input) :disabled disabled-height-sizing?
:value (:height values)}]] :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)}]]
[: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)

4
frontend/src/app/main/ui/workspace/tokens/core.cljs
View file

@ -63,11 +63,11 @@
(get token-type []) (get token-type [])
(tokens-name-map))) (tokens-name-map)))
(defn tokens-name-map->select-options [{:keys [shape tokens attributes]}] (defn tokens-name-map->select-options [{:keys [shape tokens attributes selected-attributes]}]
(->> (tokens-name-map tokens) (->> (tokens-name-map tokens)
(map (fn [[_k {:keys [name] :as item}]] (map (fn [[_k {:keys [name] :as item}]]
(cond-> (assoc item :label name) (cond-> (assoc item :label name)
(token-applied? item shape attributes) (assoc :selected? true)))))) (token-applied? item shape (or selected-attributes attributes)) (assoc :selected? true))))))
;; Update functions ------------------------------------------------------------ ;; Update functions ------------------------------------------------------------