Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-04 13:50:12 -05:00
Code Issues Activity

🐛 Fix component thumbnail list

Browse source
This commit is contained in:
Eva Marco 2024-08-23 12:50:14 +02:00
parent 5d97f4b924
commit 9663db34fa
3 changed files with 31 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
View file

@ -162,6 +162,14 @@
(when (and (some? root-shape)
(some? container))
[:*
(when visible?
[:& cmm/component-item-thumbnail {:file-id file-id
:class (stl/css-case :thumbnail true
:asset-list-thumbnail (not listing-thumbs?))
:root-shape root-shape
:component component
:container container}])
[:*
[:& editable-label
{:class (stl/css-case :cell-name listing-thumbs?
@ -176,15 +184,7 @@
:on-cancel cancel-rename}]
(when ^boolean dragging?
[:div {:class (stl/css :dragging)}])]
(when visible?
[:& cmm/component-item-thumbnail {:file-id file-id
:class (stl/css-case :thumbnail true
:asset-list-thumbnail (not listing-thumbs?))
:root-shape root-shape
:component component
:container container}])])]))
[:div {:class (stl/css :dragging)}])]])]))
(mf/defc components-group
{::mf/wrap-props false}

13
frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
View file

@ -25,8 +25,8 @@
.grid-cell {
@include flexCenter;
position: relative;
aspect-ratio: 1 / 1;
padding: $s-8;
width: 100%;
padding-top: 100%;
border-radius: $br-8;
background-color: var(--assets-component-background-color);
overflow: hidden;
@ -101,11 +101,20 @@
}
.thumbnail {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
border: 0;
padding: $s-8;
}
.grid-placeholder {

13
frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss
View file

@ -18,10 +18,10 @@
.grid-cell {
@include flexCenter;
position: relative;
padding: $s-8;
border: $s-2 solid transparent;
border-radius: $br-8;
aspect-ratio: 1/1;
width: 100%;
padding-top: 100%;
background-color: var(--color-foreground-secondary);
overflow: hidden;
cursor: pointer;
@ -33,6 +33,15 @@
pointer-events: none;
}
svg {
display: flex;
align-items: center;
justify-content: center;
padding: $s-8;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 10vh;
}
.cell-name {