Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-21 06:16:28 -05:00
Code Issues Activity

💄 Differentiate empty and not empty token types

Browse source
This commit is contained in:
Xavier Julian 2025-02-19 14:13:45 +01:00
parent f83cdf2f5d
commit 2a1e03294a
3 changed files with 17 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -154,14 +154,17 @@
title
(mf/html
[:span {:class (stl/css :title-name)}
[:span {:class (stl/css-case :title-name true
:title-tokens (= section :tokens)
:title-tokens-active (and (= section :tokens) (< 0 assets-count)))}
[:span {:class (stl/css :section-icon)}
[:> icon* {:icon-id (or icon (section-icon section)) :size "s"}]]
[:span {:class (stl/css :section-name)}
title]
[:span {:class (stl/css :num-assets)}
assets-count]])]
(when (and (< 0 assets-count) (= section :tokens))
[:span {:class (stl/css :num-assets)}
assets-count])])]
[:div {:class (stl/css-case :asset-section true
:opened (and (< 0 assets-count)

9
frontend/src/app/main/ui/workspace/sidebar/assets/common.scss
View file

@ -14,6 +14,15 @@
width: 100%;
}
.title-tokens {
@include bodySmallTypography;
text-transform: capitalize;
}
.title-tokens-active {
color: var(--assets-item-name-foreground-color, --color-foreground-primary);
}
.section-icon {
@include flexCenter;
padding-right: $s-2;

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

@ -118,9 +118,10 @@
(st/emit! (wtch/toggle-token {:token token
:shapes selected-shapes})))))]
[:div {:on-click on-toggle-open-click}
[:div {:on-click on-toggle-open-click :class (stl/css :token-section-wrapper)}
[:& cmm/asset-section {:icon (token-section-icon type)
:title title
:section :tokens
:assets-count (count tokens)
:open? is-open}
[:& cmm/asset-section-block {:role :title-button}