mirror of
https://github.com/penpot/penpot.git
synced 2025-05-19 08:46:11 +02:00
🐛 Fix icon not being shown when asset category had a zero count
This commit is contained in:
parent
c824711893
commit
1415ed30b6
4 changed files with 25 additions and 17 deletions
|
@ -13,7 +13,7 @@
|
||||||
|
|
||||||
(mf/defc title-bar
|
(mf/defc title-bar
|
||||||
{::mf/wrap-props false}
|
{::mf/wrap-props false}
|
||||||
[{:keys [collapsable collapsed on-collapsed title children on-btn-click btn-children class all-clickable]}]
|
[{:keys [collapsable collapsed on-collapsed title children on-btn-click btn-children class all-clickable add-icon-gap]}]
|
||||||
(let [klass (dm/str (stl/css :title-bar) " " class)]
|
(let [klass (dm/str (stl/css :title-bar) " " class)]
|
||||||
[:div {:class klass}
|
[:div {:class klass}
|
||||||
(if ^boolean collapsable
|
(if ^boolean collapsable
|
||||||
|
@ -33,7 +33,7 @@
|
||||||
:on-click on-collapsed}
|
:on-click on-collapsed}
|
||||||
i/arrow-refactor]
|
i/arrow-refactor]
|
||||||
[:div {:class (stl/css :title)} title]])]
|
[:div {:class (stl/css :title)} title]])]
|
||||||
[:div {:class (stl/css :title-only)} title])
|
[:div {:class (stl/css-case :title-only true :title-only-icon-gap add-icon-gap)} title])
|
||||||
children
|
children
|
||||||
(when (some? on-btn-click)
|
(when (some? on-btn-click)
|
||||||
[:button {:class (stl/css :title-button)
|
[:button {:class (stl/css :title-button)
|
||||||
|
|
|
@ -14,20 +14,6 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: $s-32;
|
min-height: $s-32;
|
||||||
background-color: var(--title-background-color);
|
background-color: var(--title-background-color);
|
||||||
.title,
|
|
||||||
.title-only {
|
|
||||||
@include tabTitleTipography;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-grow: 1;
|
|
||||||
height: 100%;
|
|
||||||
min-height: $s-32;
|
|
||||||
color: var(--title-foreground-color);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.title-only {
|
|
||||||
margin-left: $s-8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-wrapper {
|
.title-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -109,3 +95,24 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.title,
|
||||||
|
.title-only {
|
||||||
|
@include tabTitleTipography;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-grow: 1;
|
||||||
|
height: 100%;
|
||||||
|
min-height: $s-32;
|
||||||
|
color: var(--title-foreground-color);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-only {
|
||||||
|
--title-bar-title-margin: #{$s-8};
|
||||||
|
margin-inline-start: var(--title-bar-title-margin);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-only-icon-gap {
|
||||||
|
--title-bar-title-margin: #{$s-12};
|
||||||
|
}
|
||||||
|
|
|
@ -166,6 +166,7 @@
|
||||||
:collapsed (not open?)
|
:collapsed (not open?)
|
||||||
:all-clickable true
|
:all-clickable true
|
||||||
:on-collapsed on-collapsed
|
:on-collapsed on-collapsed
|
||||||
|
:add-icon-gap (= 0 assets-count)
|
||||||
:class (stl/css-case :title-spacing open?)
|
:class (stl/css-case :title-spacing open?)
|
||||||
:title title}
|
:title title}
|
||||||
buttons]
|
buttons]
|
||||||
|
|
|
@ -21,8 +21,8 @@
|
||||||
@include flexCenter;
|
@include flexCenter;
|
||||||
height: $s-16;
|
height: $s-16;
|
||||||
width: $s-16;
|
width: $s-16;
|
||||||
color: transparent;
|
|
||||||
fill: none;
|
fill: none;
|
||||||
|
stroke: currentColor;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue