github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-06-09 17:02:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Migrate color-bullet and color-name to modern component syntax (#9433)

Browse Source 
Co-authored-by: Andrey Antukh <niwi@niwi.nz>
This commit is contained in:
Dexterity 2026-05-29 03:56:12 -04:00 committed by GitHub
parent 53b1837b11
commit c4a5f0098e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 31 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/app/main/ui/components/color_bullet.cljs
View File

@ -58,9 +58,8 @@
[title]
(str/replace title "." ".\u200B"))
(mf/defc color-bullet
{::mf/wrap [mf/memo]
::mf/wrap-props false}
(mf/defc color-bullet*
{::mf/wrap [mf/memo]}
[{:keys [color on-click mini area]}]
(let [read-only? (nil? on-click)
on-click
@ -112,8 +111,7 @@
[:div {:class (stl/css :color-bullet-right)
:style {:background (uc/color->background color)}}]])]))))
(mf/defc color-name
{::mf/wrap-props false}
(mf/defc color-name*
[{:keys [color size on-click on-double-click origin]}]
(let [{:keys [name]} (meta color)
{:keys [color gradient]} (if (string? color) {:color color :opacity 1} color)]

8
frontend/src/app/main/ui/dashboard/grid.cljs
View File

@ -199,10 +199,10 @@
:else (:value color))]
[:div {:class (stl/css :asset-list-item :color-item)
:key (str "assets-color-" (:id color))}
[:& bc/color-bullet {:color {:color (:color color)
:id (:id color)
:opacity (:opacity color)}
:mini true}]
[:> bc/color-bullet* {:color {:color (:color color)
:id (:id color)
:opacity (:opacity color)}
:mini true}]
[:div {:class (stl/css :name-block)}
[:span {:class (stl/css :color-name)} (:name color)]
(when-not (= (:name color) default-name)

12
frontend/src/app/main/ui/inspect/attributes/common.cljs
View File

@ -45,8 +45,8 @@
[:div {:class (stl/css :attributes-color-row)}
[:div {:class (stl/css :bullet-wrapper)
:style #js {"--bullet-size" "16px"}}
[:& cb/color-bullet {:color color
:mini true}]]
[:> cb/color-bullet* {:color color
:mini true}]]
[:div {:class (stl/css :format-wrapper)}
[:div {:class (stl/css :image-format)}
@ -80,8 +80,8 @@
[:div {:class (stl/css :attributes-color-row)}
[:div {:class (stl/css :bullet-wrapper)
:style #js {"--bullet-size" "16px"}}
[:& cb/color-bullet {:color color
:mini true}]]
[:> cb/color-bullet* {:color color
:mini true}]]
;; REMOVE this conditional when :inspect-styles flag is removed
(if (contains? cf/flags :inspect-styles)
[:div {:class (stl/css :global/attr-label)} property]
@ -107,9 +107,9 @@
[:span {:class (stl/css-case :color-value-wrapper true
:gradient-name (:gradient color))}
(if (:gradient color)
[:& cb/color-name {:color color :size 90}]
[:> cb/color-name* {:color color :size 90}]
(case format
:hex [:& cb/color-name {:color color}]
:hex [:> cb/color-name* {:color color}]
:rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))
result (cc/format-rgba [r g b a])]
[:* result])

2
frontend/src/app/main/ui/workspace/color_palette.cljs
View File

@ -56,7 +56,7 @@
:type "button"
:on-click select-color}
[:> swatch* {:background color :size "medium"}]
[:& cb/color-name {:color color :size size :origin :palette}]]))
[:> cb/color-name* {:color color :size size :origin :palette}]]))
(mf/defc palette*
{::mf/wrap [mf/memo]}

18
frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs
View File

@ -70,9 +70,9 @@
[:div {:class (stl/css :color-sample)
:style {:--bullet-size "20px"}}
(for [color colors]
[:& cb/color-bullet {:key (dm/str (:id color))
:mini true
:color color}])]]])
[:> cb/color-bullet* {:key (dm/str (:id color))
:mini true
:color color}])]]])
[:li {:class (stl/css-case
:file-library true
@ -95,9 +95,9 @@
[:div {:class (stl/css :color-sample)
:style {:--bullet-size "20px"}}
(for [color local-colors]
[:& cb/color-bullet {:key (dm/str (:id color))
:mini true
:color color}])]]]
[:> cb/color-bullet* {:key (dm/str (:id color))
:mini true
:color color}])]]]
[:li {:class (stl/css
:recent-colors true
@ -119,6 +119,6 @@
:style {:--bullet-size "20px"}}
(for [color recent-colors]
[:& cb/color-bullet {:key (dm/str (::id color))
:mini true
:color color}])]]]]]))
[:> cb/color-bullet* {:key (dm/str (::id color))
:mini true
:color color}])]]]]]))

2
frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs
View File

@ -137,7 +137,7 @@
deprecated-icon/swatches]
(for [color current-colors]
[:& cb/color-bullet
[:> cb/color-bullet*
{:key (-> color meta ::id)
:color color
:on-click on-color-click}])]]))

4
frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs
View File

@ -137,8 +137,8 @@
[:div {:class (stl/css :shade-selector)
:style {:--bullet-size "52px"}}
[:& cb/color-bullet {:color bullet-color
:area true}]
[:> cb/color-bullet* {:color bullet-color
:area true}]
[:div {:class (stl/css :sliders-wrapper)}
[:> slider-selector* {:type :hue
:max-value 360

6
frontend/src/app/main/ui/workspace/libraries.cljs
View File

@ -580,9 +580,9 @@
[:div {:class (stl/css :libraries-updates-item)
:key (dm/str (:id color))}
[:*
[:& cb/color-bullet {:color {:color (:color color)
:id (:id color)
:opacity (:opacity color)}}]
[:> cb/color-bullet* {:color {:color (:color color)
:id (:id color)
:opacity (:opacity color)}}]
[:div {:class (stl/css :name-block)}
[:span {:class (stl/css :item-name)
:title (:name color)}

4
frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs
View File

@ -221,8 +221,8 @@
:on-drop on-drop}
[:div {:class (stl/css :bullet-block)}
[:& cb/color-bullet {:color color
:mini true}]]
[:> cb/color-bullet* {:color color
:mini true}]]
(if ^boolean editing?
[:input