Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-08 16:00:19 -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.layout :as ctl]
[app.common.types.shape.radius :as ctsr] [app.common.types.shape.radius :as ctsr]
[app.main.constants :refer [size-presets]] [app.main.constants :refer [size-presets]]
[app.main.data.tokens :as dt]
[app.main.data.workspace :as udw] [app.main.data.workspace :as udw]
[app.main.data.workspace.changes :as dch] [app.main.data.workspace.changes :as dch]
[app.main.data.workspace.interactions :as dwi] [app.main.data.workspace.interactions :as dwi]
@ -19,10 +20,12 @@
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]] [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.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.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.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[clojure.set :refer [rename-keys union]] [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-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
selection-parents (mf/deref selection-parents-ref) 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?)) flex-child? (->> selection-parents (some ctl/flex-layout?))
absolute? (ctl/item-absolute? shape) absolute? (ctl/item-absolute? shape)
flex-container? (ctl/flex-layout? shape) flex-container? (ctl/flex-layout? shape)
@ -284,7 +291,14 @@
(mf/use-fn (mf/use-fn
(mf/deps ids change-radius) (mf/deps ids change-radius)
(fn [value] (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 on-radius-multi-change
(mf/use-fn (mf/use-fn
@ -468,12 +482,13 @@
[: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]
[:> numeric-input* [:& editable-select
{:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--") {:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
:ref radius-input-ref :type "number"
:min 0 :min 0
:input-class (stl/css :numeric-input)
:on-change on-radius-1-change :on-change on-radius-1-change
:className (stl/css :numeric-input) :options border-radius-options
:value (:rx values)}]] :value (:rx values)}]]
@radius-multi? @radius-multi?