🐛 Fix hover on assets thumbnails + broken editable label

frontend/resources/styles/common/refactor/color-defs.scss

@@ -11,6 +11,7 @@
   --dark-gray-1: #1d1f20;
   --dark-gray-2: #000000;
   --dark-gray-2-30: rgba(0, 0, 0, 0.3);
+  --dark-gray-2-80: rgba(0, 0, 0, 0.8);
   --dark-gray-3: #292c2d;
   --dark-gray-4: #34393b;
   --white: #fff;

frontend/resources/styles/common/refactor/design-tokens.scss

@@ -200,6 +200,7 @@
   --assets-title-background-color: var(--color-background-primary);
   --assets-item-background-color: var(--color-background-tertiary);
   --assets-item-background-color-hover: var(--color-background-quaternary);
+  --assets-item-name-background-color: var(--dark-gray-2-80); // TODO: penpot file has a non-existing token
   --assets-item-name-foreground-color: var(--color-foreground-secondary);
   --assets-item-name-foreground-color-hover: var(--color-foreground-primary);
   --assets-item-name-foreground-color-disabled: var(--color-foreground-disabled);

frontend/src/app/main/ui/components/editable_label.cljs

@@ -23,6 +23,9 @@
         editing?          (unchecked-get props "editing")
         dbl-click?        (unchecked-get props "disable-dbl-click")
         class             (unchecked-get props "class")
+        tooltip           (unchecked-get props "tooltip")
+        display-value           (unchecked-get props "display-value")
+
 
         final-class       (dm/str class " " (stl/css :editable-label))
         input-ref         (mf/use-ref nil)
@@ -82,15 +85,21 @@
       (when (and editing? (not internal-editing?))
         (start-edition)))
 
-    [:div {:class final-class}
+    (if ^boolean internal-editing?
-     [:input
+      [:div {:class final-class}
-      {:class (stl/css :editable-label-input)
+       [:input
-       :ref input-ref
+        {:class (stl/css :editable-label-input)
-       :default-value value
+         :ref input-ref
-       :on-key-up on-key-up
+         :default-value value
-       :on-double-click on-dbl-click
+         :on-key-up on-key-up
-       :on-blur cancel-edition}]
+         :on-double-click on-dbl-click
+         :on-blur cancel-edition}]
 
-     [:span {:class (stl/css :editable-label-close)
+       [:span {:class (stl/css :editable-label-close)
-             :on-click cancel-edition}
+               :on-click cancel-edition}
-      i/delete-text-refactor]]))
+        i/delete-text-refactor]]
+
+      [:span {:class final-class
+              :title tooltip
+              :on-double-click on-dbl-click}
+       display-value])))

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

@@ -179,6 +179,7 @@
 
         (when visible?
           [:& cmm/component-item-thumbnail {:file-id file-id
+                                            :class (stl/css :thumbnail)
                                             :root-shape root-shape
                                             :component component
                                             :container container}])])]))

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

@@ -11,17 +11,17 @@
 }
 .asset-grid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax($s-112, 1fr));
-  grid-auto-rows: calc(10vh + $s-16);
+  grid-auto-rows: $s-112;
+  max-width: 100%;
   gap: $s-4;
-  margin-left: $s-8;
+  margin-inline: $s-8;
 }
 
 .grid-cell {
   @include flexCenter;
   position: relative;
   padding: $s-8;
-  border: $s-4 solid transparent;
   border-radius: $br-8;
   background-color: var(--assets-component-background-color);
   overflow: hidden;
@@ -32,68 +32,46 @@
     max-height: 100%;
     max-width: 100%;
     pointer-events: none;
+    border: 0;
   }
-  svg {
+
-    height: 10vh;
-  }
   .cell-name {
     @include titleTipography;
     @include textEllipsis;
     display: none;
     position: absolute;
-    left: 0;
+    left: $s-4;
-    bottom: 0;
+    bottom: $s-4;
-    width: 100%;
+    width: calc(100% - 2 * $s-4);
     padding: $s-2;
-    &.editing {
+    column-gap: $s-4;
+    border-radius: $br-2;
+    background-color: var(--assets-item-name-background-color);
+    color: var(--assets-item-name-foreground-color);
+    input {
+      @include textEllipsis;
+      @include titleTipography;
+      @include removeInputStyle;
+      height: auto;
+      padding: 0;
+    }
+    span {
       display: flex;
       align-items: center;
-      height: $s-32;
+    }
+    &.editing {
       border: $s-1 solid var(--input-border-color-focus);
-      border-radius: $br-8;
+      border-radius: $br-2;
+      display: flex;
+      align-items: center;
       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);
     .cell-name {
-      display: block;
+      display: flex;
-      color: var(--assets-item-name-foreground-color-hover);
-      background: linear-gradient(to top, rgba(52, 57, 59, 1) 0%, rgba(52, 57, 59, 0) 100%);
-      &.editing {
-        display: flex;
-        background: var(--input-background-color);
-        input {
-          color: var(--input-foreground-color-active);
-        }
-        span svg {
-          stroke: var(--input-foreground-color-active);
-        }
-      }
     }
   }
 
@@ -102,6 +80,12 @@
   }
 }
 
+.thumbnail {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
 .grid-placeholder {
   width: 100%;
   border-radius: $br-8;
@@ -229,18 +213,6 @@
   }
 }
 
-:global(.three-row) {
-  .asset-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-:global(.four-row) {
-  .asset-grid {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-
 .dragging {
   position: absolute;
   top: 0;