Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-06 14:50:20 -05:00
Code Issues Activity

Show border-radius tokens as options

Browse source
This commit is contained in:
Florian Schroedl 2024-05-15 18:20:47 +02:00
parent d9dbaad281
commit 9a58188dc3
1 changed files with 19 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -12,6 +12,7 @@
[app.common.types.shape.layout :as ctl]
[app.common.types.shape.radius :as ctsr]
[app.main.constants :refer [size-presets]]
[app.main.data.tokens :as dt]
[app.main.data.workspace :as udw]
[app.main.data.workspace.changes :as dch]
[app.main.data.workspace.interactions :as dwi]
@ -19,10 +20,12 @@
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.components.editable-select :refer [editable-select]]
[app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
[app.main.ui.hooks :as hooks]
[app.main.ui.icons :as i]
[app.main.ui.workspace.tokens.core :as wtc]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[clojure.set :refer [rename-keys union]]
@ -95,6 +98,10 @@
selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
selection-parents (mf/deref selection-parents-ref)
tokens (mf/deref refs/workspace-tokens)
border-radius-tokens (mf/use-memo (mf/deps tokens) #(wtc/tokens-name-map-for-type :border-radius tokens))
border-radius-options (mf/use-memo (mf/deps border-radius-tokens) #(map (comp :name val) border-radius-tokens))
flex-child? (->> selection-parents (some ctl/flex-layout?))
absolute? (ctl/item-absolute? shape)
flex-container? (ctl/flex-layout? shape)
@ -284,7 +291,14 @@
(mf/use-fn
(mf/deps ids change-radius)
(fn [value]
(st/emit! (change-radius #(ctsr/set-radius-1 % value)))))
(let [token (when (symbol? value)
(get border-radius-tokens (str value)))
token-value (wtc/resolve-token-value token)]
(st/emit!
(dt/update-token-from-attributes {:token-id (:id token)
:shape-id (first ids)
:attributes (get-in wtc/token-types [:border-radius :attributes])})
(change-radius #(ctsr/set-radius-1 % (or token-value value)))))))
on-radius-multi-change
(mf/use-fn
@ -468,12 +482,13 @@
[:div {:class (stl/css :radius-1)
:title (tr "workspace.options.radius")}
[:span {:class (stl/css :icon)} i/corner-radius]
[:> numeric-input*
[:& editable-select
{:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
:ref radius-input-ref
:type "number"
:min 0
:input-class (stl/css :numeric-input)
:on-change on-radius-1-change
:className (stl/css :numeric-input)
:options border-radius-options
:value (:rx values)}]]
@radius-multi?