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

Add token placeholder icons

Browse source
This commit is contained in:
Florian Schroedl 2024-05-14 14:24:36 +02:00
parent 230b271be3
commit e6f86cda64
3 changed files with 31 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
View file

@ -130,7 +130,7 @@
(mf/defc asset-section
{::mf/wrap-props false}
[{:keys [children file-id title section assets-count open?]}]
[{:keys [children file-id title section assets-count icon open?]}]
(let [children (-> (array/normalize-to-array children)
(array/without-nils))
@ -151,7 +151,7 @@
(mf/html
[:span {:class (stl/css :title-name)}
[:span {:class (stl/css :section-icon)}
[:& section-icon {:section section}]]
[:& (or icon section-icon) {:section section}]]
[:span {:class (stl/css :section-name)}
title]

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

@ -31,10 +31,28 @@
:on-click on-click}
name]))
(mf/defc token-section-icon
{::mf/wrap-props false}
[{:keys [type]}]
(case type
:border-radius i/corner-radius
:numeric [:span {:class (stl/css :section-text-icon)} "123"]
:boolean i/boolean-difference
:opacity [:span {:class (stl/css :section-text-icon)} "%"]
:rotation i/rotation
:spacing i/padding-extended
:string i/text-mixed
:stroke-width i/stroke-size
:typography i/text
;; TODO: Add diagonal icon here when it's available
:dimension [:div {:style {:rotate "45deg"}} i/constraint-horizontal]
:sizing [:div {:style {:rotate "45deg"}} i/constraint-horizontal]
i/add))
(mf/defc token-component
[{:keys [type file tokens selected-shapes token-type-props]}]
(let [open? (mf/use-state false)
{:keys [modal attributes title]} token-type-props
{:keys [icon modal attributes title]} token-type-props
on-toggle-open-click (mf/use-fn
(mf/deps open? tokens)
#(when (seq tokens)
@ -59,6 +77,8 @@
tokens-count (count tokens)]
[:div {:on-click on-toggle-open-click}
[:& cmm/asset-section {:file-id (:id file)
:icon (mf/fnc icon-wrapper [_]
[:& token-section-icon {:type type}])
:title title
:assets-count tokens-count
:open? @open?}

8
frontend/src/app/main/ui/workspace/tokens/sidebar.scss
View file

@ -34,3 +34,11 @@
opacity: 0.8;
}
}
.section-text-icon {
font-size: $fs-12;
width: 16px;
height: 16px;
display: flex;
place-content: center;
}