mirror of
https://github.com/penpot/penpot.git
synced 2025-07-11 12:47:16 +02:00
Resolve tokens from other active sets
This commit is contained in:
parent
8264da3a2a
commit
c130dc39c3
6 changed files with 31 additions and 22 deletions
|
@ -262,7 +262,7 @@
|
||||||
(def get-active-theme-sets-tokens
|
(def get-active-theme-sets-tokens
|
||||||
(l/derived wtts/get-active-theme-sets-tokens-names-map st/state =))
|
(l/derived wtts/get-active-theme-sets-tokens-names-map st/state =))
|
||||||
|
|
||||||
(def workspace-tokens
|
(def workspace-selected-token-set-tokens
|
||||||
(l/derived
|
(l/derived
|
||||||
(fn [data]
|
(fn [data]
|
||||||
(or (wtts/get-selected-token-set-tokens data) {}))
|
(or (wtts/get-selected-token-set-tokens data) {}))
|
||||||
|
|
|
@ -856,7 +856,7 @@
|
||||||
|
|
||||||
shape (when-not multiple
|
shape (when-not multiple
|
||||||
(first (deref (refs/objects-by-id ids))))
|
(first (deref (refs/objects-by-id ids))))
|
||||||
tokens (mf/deref refs/workspace-tokens)
|
tokens (mf/deref refs/workspace-selected-token-set-tokens)
|
||||||
spacing-tokens (mf/use-memo (mf/deps tokens) #(:spacing (wtc/group-tokens-by-type tokens)))
|
spacing-tokens (mf/use-memo (mf/deps tokens) #(:spacing (wtc/group-tokens-by-type tokens)))
|
||||||
|
|
||||||
spacing-column-options (mf/use-memo
|
spacing-column-options (mf/use-memo
|
||||||
|
|
|
@ -311,7 +311,7 @@
|
||||||
selected (mf/deref refs/selected-shapes)
|
selected (mf/deref refs/selected-shapes)
|
||||||
selected-shapes (into [] (keep (d/getf objects)) selected)
|
selected-shapes (into [] (keep (d/getf objects)) selected)
|
||||||
token-id (:token-id mdata)
|
token-id (:token-id mdata)
|
||||||
token (get (mf/deref refs/workspace-tokens) token-id)]
|
token (get (mf/deref refs/workspace-selected-token-set-tokens) token-id)]
|
||||||
(mf/use-effect
|
(mf/use-effect
|
||||||
(mf/deps mdata)
|
(mf/deps mdata)
|
||||||
(fn []
|
(fn []
|
||||||
|
|
|
@ -58,6 +58,6 @@
|
||||||
{:global global}))
|
{:global global}))
|
||||||
|
|
||||||
(defn download-tokens-as-json []
|
(defn download-tokens-as-json []
|
||||||
(let [all-tokens (deref refs/workspace-tokens)
|
(let [all-tokens (deref refs/workspace-selected-token-set-tokens)
|
||||||
transformed-tokens-json (transform-tokens-into-json-format all-tokens)]
|
transformed-tokens-json (transform-tokens-into-json-format all-tokens)]
|
||||||
(export-tokens-file transformed-tokens-json)))
|
(export-tokens-file transformed-tokens-json)))
|
||||||
|
|
|
@ -12,7 +12,6 @@
|
||||||
[app.main.data.tokens :as dt]
|
[app.main.data.tokens :as dt]
|
||||||
[app.main.data.tokens :as wdt]
|
[app.main.data.tokens :as wdt]
|
||||||
[app.main.refs :as refs]
|
[app.main.refs :as refs]
|
||||||
[app.util.storage :refer [storage]]
|
|
||||||
[app.main.store :as st]
|
[app.main.store :as st]
|
||||||
[app.main.ui.components.title-bar :refer [title-bar]]
|
[app.main.ui.components.title-bar :refer [title-bar]]
|
||||||
[app.main.ui.icons :as i]
|
[app.main.ui.icons :as i]
|
||||||
|
@ -26,6 +25,7 @@
|
||||||
[app.main.ui.workspace.tokens.token :as wtt]
|
[app.main.ui.workspace.tokens.token :as wtt]
|
||||||
[app.main.ui.workspace.tokens.token-types :as wtty]
|
[app.main.ui.workspace.tokens.token-types :as wtty]
|
||||||
[app.util.dom :as dom]
|
[app.util.dom :as dom]
|
||||||
|
[app.util.storage :refer [storage]]
|
||||||
[cuerdas.core :as str]
|
[cuerdas.core :as str]
|
||||||
[okulary.core :as l]
|
[okulary.core :as l]
|
||||||
[rumext.v2 :as mf]
|
[rumext.v2 :as mf]
|
||||||
|
@ -42,9 +42,9 @@
|
||||||
|
|
||||||
(mf/defc token-pill
|
(mf/defc token-pill
|
||||||
{::mf/wrap-props false}
|
{::mf/wrap-props false}
|
||||||
[{:keys [on-click token highlighted? on-context-menu]}]
|
[{:keys [on-click token theme-token highlighted? on-context-menu] :as props}]
|
||||||
(let [{:keys [name value resolved-value errors]} token
|
(let [{:keys [name value resolved-value errors]} token
|
||||||
errors? (seq errors)]
|
errors? (and (seq errors) (seq (:errors theme-token)))]
|
||||||
[:button {:class (stl/css-case :token-pill true
|
[:button {:class (stl/css-case :token-pill true
|
||||||
:token-pill-highlighted highlighted?
|
:token-pill-highlighted highlighted?
|
||||||
:token-pill-invalid errors?)
|
:token-pill-invalid errors?)
|
||||||
|
@ -78,7 +78,7 @@
|
||||||
i/add))
|
i/add))
|
||||||
|
|
||||||
(mf/defc token-component
|
(mf/defc token-component
|
||||||
[{:keys [type tokens selected-shapes token-type-props]}]
|
[{:keys [type tokens selected-shapes token-type-props active-theme-tokens]}]
|
||||||
(let [open? (mf/deref (-> (l/key type)
|
(let [open? (mf/deref (-> (l/key type)
|
||||||
(l/derived lens:token-type-open-status)))
|
(l/derived lens:token-type-open-status)))
|
||||||
{:keys [modal attributes all-attributes title]} token-type-props
|
{:keys [modal attributes all-attributes title]} token-type-props
|
||||||
|
@ -130,12 +130,14 @@
|
||||||
[:& cmm/asset-section-block {:role :content}
|
[:& cmm/asset-section-block {:role :content}
|
||||||
[:div {:class (stl/css :token-pills-wrapper)}
|
[:div {:class (stl/css :token-pills-wrapper)}
|
||||||
(for [token (sort-by :modified-at tokens)]
|
(for [token (sort-by :modified-at tokens)]
|
||||||
|
(let [theme-token (get active-theme-tokens (wtt/token-identifier token))]
|
||||||
[:& token-pill
|
[:& token-pill
|
||||||
{:key (:id token)
|
{:key (:id token)
|
||||||
:token token
|
:token token
|
||||||
|
:theme-token theme-token
|
||||||
:highlighted? (wtt/shapes-token-applied? token selected-shapes (or all-attributes attributes))
|
:highlighted? (wtt/shapes-token-applied? token selected-shapes (or all-attributes attributes))
|
||||||
:on-click #(on-token-pill-click % token)
|
:on-click #(on-token-pill-click % token)
|
||||||
:on-context-menu #(on-context-menu % token)}])]])]]))
|
:on-context-menu #(on-context-menu % token)}]))]])]]))
|
||||||
|
|
||||||
(defn sorted-token-groups
|
(defn sorted-token-groups
|
||||||
"Separate token-types into groups of `:empty` or `:filled` depending if tokens exist for that type.
|
"Separate token-types into groups of `:empty` or `:filled` depending if tokens exist for that type.
|
||||||
|
@ -187,11 +189,8 @@
|
||||||
"b { font-weight: 600; }"])
|
"b { font-weight: 600; }"])
|
||||||
"}")]
|
"}")]
|
||||||
[:div.spaced-y
|
[:div.spaced-y
|
||||||
{:style {:max-height "60vh"
|
{:style {:border-bottom "2px solid grey"
|
||||||
:overflow "auto"
|
:padding "10px"}}
|
||||||
:border-bottom "2px solid grey"
|
|
||||||
:padding "10px"
|
|
||||||
:margin-bottom "50px"}}
|
|
||||||
|
|
||||||
[:& tokene-theme-create]
|
[:& tokene-theme-create]
|
||||||
[:div.spaced-y
|
[:div.spaced-y
|
||||||
|
@ -240,8 +239,7 @@
|
||||||
(dom/prevent-default e)
|
(dom/prevent-default e)
|
||||||
(dom/stop-propagation e)
|
(dom/stop-propagation e)
|
||||||
(st/emit! (wdt/delete-token-set id)))}
|
(st/emit! (wdt/delete-token-set id)))}
|
||||||
"🗑️"]]]])]
|
"🗑️"]]]])]]]))
|
||||||
[:hr]]]))
|
|
||||||
|
|
||||||
(mf/defc tokens-explorer
|
(mf/defc tokens-explorer
|
||||||
[_props]
|
[_props]
|
||||||
|
@ -250,6 +248,9 @@
|
||||||
selected (mf/deref refs/selected-shapes)
|
selected (mf/deref refs/selected-shapes)
|
||||||
selected-shapes (into [] (keep (d/getf objects)) selected)
|
selected-shapes (into [] (keep (d/getf objects)) selected)
|
||||||
|
|
||||||
|
|
||||||
|
active-theme-tokens (sd/use-active-theme-sets-tokens)
|
||||||
|
|
||||||
tokens (sd/use-resolved-workspace-tokens)
|
tokens (sd/use-resolved-workspace-tokens)
|
||||||
token-groups (mf/with-memo [tokens]
|
token-groups (mf/with-memo [tokens]
|
||||||
(sorted-token-groups tokens))]
|
(sorted-token-groups tokens))]
|
||||||
|
@ -261,6 +262,7 @@
|
||||||
[:& token-component {:key token-key
|
[:& token-component {:key token-key
|
||||||
:type token-key
|
:type token-key
|
||||||
:selected-shapes selected-shapes
|
:selected-shapes selected-shapes
|
||||||
|
:active-theme-tokens active-theme-tokens
|
||||||
:tokens tokens
|
:tokens tokens
|
||||||
:token-type-props token-type-props}])]]))
|
:token-type-props token-type-props}])]]))
|
||||||
|
|
||||||
|
|
|
@ -99,6 +99,8 @@
|
||||||
|
|
||||||
(defonce !tokens-cache (atom nil))
|
(defonce !tokens-cache (atom nil))
|
||||||
|
|
||||||
|
(defonce !theme-tokens-cache (atom nil))
|
||||||
|
|
||||||
(defn get-cached-tokens [tokens]
|
(defn get-cached-tokens [tokens]
|
||||||
(get @!tokens-cache tokens tokens))
|
(get @!tokens-cache tokens tokens))
|
||||||
|
|
||||||
|
@ -129,5 +131,10 @@
|
||||||
@tokens-state))
|
@tokens-state))
|
||||||
|
|
||||||
(defn use-resolved-workspace-tokens [& {:as config}]
|
(defn use-resolved-workspace-tokens [& {:as config}]
|
||||||
(-> (mf/deref refs/workspace-tokens)
|
(-> (mf/deref refs/workspace-selected-token-set-tokens)
|
||||||
(use-resolved-tokens config)))
|
(use-resolved-tokens config)))
|
||||||
|
|
||||||
|
(defn use-active-theme-sets-tokens [& {:as config}]
|
||||||
|
(-> (mf/deref refs/get-active-theme-sets-tokens)
|
||||||
|
(use-resolved-tokens {:cache-atom !theme-tokens-cache
|
||||||
|
:names-map? true})))
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue