🐛 Fix asset list UI

frontend/src/app/main/render.cljs

@@ -336,7 +336,7 @@
 ;; used to render thumbnails on assets panel.
 (mf/defc component-svg
   {::mf/wrap [mf/memo #(mf/deferred % ts/idle-then-raf)]}
-  [{:keys [objects root-shape show-grids? zoom] :or {zoom 1} :as props}]
+  [{:keys [objects root-shape show-grids? zoom class] :or {zoom 1} :as props}]
   (when root-shape
     (let [root-shape-id (:id root-shape)
           include-metadata (mf/use-ctx export/include-metadata-ctx)
@@ -373,6 +373,7 @@
              :width (ust/format-precision width viewbox-decimal-precision)
              :height (ust/format-precision height viewbox-decimal-precision)
              :version "1.1"
+             :class class
              :xmlns "http://www.w3.org/2000/svg"
              :xmlnsXlink "http://www.w3.org/1999/xlink"
              :xmlns:penpot (when include-metadata "https://penpot.app/xmlns")
@@ -388,7 +389,7 @@
 
 (mf/defc component-svg-thumbnail
   {::mf/wrap [mf/memo #(mf/deferred % ts/idle-then-raf)]}
-  [{:keys [thumbnail-uri on-error show-grids?
+  [{:keys [thumbnail-uri on-error show-grids? class
            objects root-shape zoom] :or {zoom 1} :as props}]
 
   (when root-shape
@@ -421,6 +422,7 @@
              :width (ust/format-precision width-zoom viewbox-decimal-precision)
              :height (ust/format-precision height-zoom viewbox-decimal-precision)
              :version "1.1"
+             :class class
              :xmlns "http://www.w3.org/2000/svg"
              :xmlnsXlink "http://www.w3.org/1999/xlink"
              :fill "none"}

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

@@ -281,7 +281,7 @@
 (mf/defc component-item-thumbnail
   "Component that renders the thumbnail image or the original SVG."
   {::mf/wrap-props false}
-  [{:keys [file-id root-shape component container]}]
+  [{:keys [file-id root-shape component container class]}]
   (let [retry (mf/use-state 0)
         thumbnail-uri (get-component-thumbnail-uri file-id component)
         handle-error
@@ -294,6 +294,7 @@
     (if (some? thumbnail-uri)
       [:& component-svg-thumbnail
        {:thumbnail-uri thumbnail-uri
+        :class class
         :on-error handle-error
         :root-shape root-shape
         :objects (:objects container)
@@ -301,6 +302,7 @@
 
       [:& component-svg
        {:root-shape root-shape
+        :class class
         :objects (:objects container)
         :show-grids? true}])))
 

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

@@ -179,7 +179,8 @@
 
         (when visible?
           [:& cmm/component-item-thumbnail {:file-id file-id
-                                            :class (stl/css :thumbnail)
+                                            :class (stl/css-case :thumbnail true
+                                                                 :asset-list-thumbnail (not listing-thumbs?))
                                             :root-shape root-shape
                                             :component component
                                             :container container}])])]))

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

@@ -26,14 +26,6 @@
   background-color: var(--assets-component-background-color);
   overflow: hidden;
   cursor: pointer;
-  img {
-    height: auto;
-    width: auto;
-    max-height: 100%;
-    max-width: 100%;
-    pointer-events: none;
-    border: 0;
-  }
 
   .cell-name {
     @include titleTipography;
@@ -84,6 +76,8 @@
   width: 100%;
   height: 100%;
   object-fit: contain;
+  pointer-events: none;
+  border: 0;
 }
 
 .grid-placeholder {
@@ -96,10 +90,13 @@
 .asset-enum {
   margin: 0 $s-12;
 }
+
 .enum-item {
   position: relative;
-  display: flex;
+  display: grid;
+  grid-template-columns: auto 1fr;
   align-items: center;
+  column-gap: $s-8;
   height: $s-36;
   margin-bottom: $s-4;
   padding: $s-2;
@@ -107,55 +104,6 @@
   background-color: var(--assets-item-background-color);
   cursor: pointer;
 
-  svg,
-  img {
-    @include flexCenter;
-    flex-shrink: 0;
-    padding: $s-2;
-    height: $s-32;
-    width: $s-32;
-    border-radius: $br-6;
-    background-color: var(--color-foreground-secondary);
-  }
-
-  .item-name {
-    @include titleTipography;
-    @include textEllipsis;
-    padding-left: $s-8;
-    color: var(--assets-item-name-foreground-color);
-    &.editing {
-      display: flex;
-      align-items: center;
-      height: $s-32;
-      border: $s-1 solid var(--input-border-color-focus);
-      border-radius: $br-8;
-      background-color: var(--input-background-color);
-      input {
-        @include textEllipsis;
-        @include titleTipography;
-        @include removeInputStyle;
-        flex-grow: 1;
-        height: $s-28;
-        max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
-        padding-left: $s-6;
-        margin: 0;
-        border-radius: $br-8;
-        color: var(--input-foreground-color);
-      }
-      span {
-        @include flexCenter;
-        height: $s-28;
-        background-color: transparent;
-        border-radius: $br-8;
-        svg {
-          @extend .button-icon-small;
-          stroke: var(--input-foreground-color);
-          transform: rotate(90deg);
-        }
-      }
-    }
-  }
-
   &:hover {
     background-color: var(--assets-item-background-color-hover);
     .item-name {
@@ -176,6 +124,45 @@
   }
 }
 
+.item-name {
+  @include titleTipography;
+  @include textEllipsis;
+  order: 2;
+  color: var(--assets-item-name-foreground-color);
+  input {
+    @include textEllipsis;
+    @include titleTipography;
+    @include removeInputStyle;
+    height: $s-32;
+    padding: $s-4;
+  }
+  span {
+    display: flex;
+    place-items: center;
+    padding-inline-end: $s-4;
+  }
+
+  &.editing {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    column-gap: $s-8;
+    border: $s-1 solid var(--input-border-color-focus);
+    border-radius: $br-8;
+    background-color: var(--input-background-color);
+  }
+}
+
+.asset-list-thumbnail {
+  @include flexCenter;
+  flex-shrink: 0;
+  padding: $s-2;
+  height: $s-32;
+  width: $s-32;
+  border-radius: $br-6;
+  background-color: var(--assets-component-background-color);
+}
+
 .grid-placeholder {
   height: $s-2;
   width: 100%;