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

📎 Add many FIXME comments on token-pill component

Browse source
This commit is contained in:
Andrey Antukh 2025-02-04 16:54:04 +01:00
parent 0fee8143dd
commit 5575a66b8d
3 changed files with 19 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/app/main/refs.cljs
View file

@ -479,6 +479,7 @@
(def workspace-active-set-names (def workspace-active-set-names
(l/derived (d/nilf ctob/get-active-themes-set-names) tokens-lib)) (l/derived (d/nilf ctob/get-active-themes-set-names) tokens-lib))
;; FIXME: deprecated, it should not be implemented with ref
(def workspace-active-theme-sets-tokens (def workspace-active-theme-sets-tokens
(l/derived #(or (some-> % ctob/get-active-themes-set-tokens) {}) tokens-lib)) (l/derived #(or (some-> % ctob/get-active-themes-set-tokens) {}) tokens-lib))

1
frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
View file

@ -116,6 +116,7 @@
:token-type-props token-type-props}))))) :token-type-props token-type-props})))))
tokens-count (count tokens) tokens-count (count tokens)
can-edit? (:can-edit (deref refs/permissions))] can-edit? (:can-edit (deref refs/permissions))]
[:div {:on-click on-toggle-open-click} [:div {:on-click on-toggle-open-click}
[:& cmm/asset-section {:icon (token-section-icon type) [:& cmm/asset-section {:icon (token-section-icon type)
:title title :title title

22
frontend/src/app/main/ui/workspace/tokens/token_pill.cljs
View file

@ -134,6 +134,8 @@
;; Otherwise only show the base title ;; Otherwise only show the base title
:else base-title))) :else base-title)))
;; FIXME: the token thould already have precalculated references, so
;; we don't need to perform this regex operation on each rerender
(defn contains-reference-value? (defn contains-reference-value?
"Extracts the value between `{}` in a string and checks if it's in the provided vector." "Extracts the value between `{}` in a string and checks if it's in the provided vector."
[text values] [text values]
@ -145,24 +147,32 @@
[{:keys [on-click token theme-token full-applied on-context-menu half-applied selected-shapes token-type-props active-theme-tokens]}] [{:keys [on-click token theme-token full-applied on-context-menu half-applied selected-shapes token-type-props active-theme-tokens]}]
(let [{:keys [name value errors]} token (let [{:keys [name value errors]} token
is-reference? (str/includes? value "{") is-reference? (str/includes? value "{")
contains-path? (str/includes? name ".")
;; FIXME: move to context or props
can-edit? (:can-edit (deref refs/permissions)) can-edit? (:can-edit (deref refs/permissions))
is-viewer (not can-edit?) is-viewer (not can-edit?)
ref-not-in-active-set (and is-reference? ref-not-in-active-set (and is-reference?
(not (contains-reference-value? value (keys active-theme-tokens)))) (not (contains-reference-value? value (keys active-theme-tokens))))
no-valid-value (seq errors) no-valid-value (seq errors)
errors? (or ref-not-in-active-set errors? (or ref-not-in-active-set
no-valid-value) no-valid-value)
;; FIXME: :zap: this performs a duplicate operation for
;; nothing, this generates a lot of garbage objects for
;; finally not using them
color (when (seq (ctob/find-token-value-references value)) color (when (seq (ctob/find-token-value-references value))
(wtt/resolved-token-bullet-color theme-token)) (wtt/resolved-token-bullet-color theme-token))
contains-path? (str/includes? name ".")
splitted-name (cfh/split-by-last-period name) splitted-name (cfh/split-by-last-period name)
color (or color (wtt/resolved-token-bullet-color token)) color (or color (wtt/resolved-token-bullet-color token))
on-click on-click
(mf/use-callback (mf/use-fn
(mf/deps errors? on-click) (mf/deps errors? on-click)
(fn [event] (fn [event]
(dom/stop-propagation event) (dom/stop-propagation event)
@ -198,7 +208,9 @@
(mf/deps selected-shapes is-viewer) (mf/deps selected-shapes is-viewer)
(fn [event] (fn [event]
(let [node (dom/get-current-target event) (let [node (dom/get-current-target event)
title (token-pill-tooltip is-viewer (first selected-shapes) token-type-props token half-applied no-valid-value ref-not-in-active-set)] title (token-pill-tooltip is-viewer (first selected-shapes)
token-type-props token
half-applied no-valid-value ref-not-in-active-set)]
(dom/set-attribute! node "title" title))))] (dom/set-attribute! node "title" title))))]
[:button {:class (stl/css-case :token-pill true [:button {:class (stl/css-case :token-pill true
@ -238,4 +250,4 @@
(last splitted-name)]] (last splitted-name)]]
[:span {:class (stl/css :name-wrapper) [:span {:class (stl/css :name-wrapper)
:aria-label name} :aria-label name}
name])])) name])]))