🐛 Fix component element count while dragging

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

@@ -229,7 +229,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(--db-secondary-80); // TODO: penpot file has a non-existing token
+  --assets-item-name-background-color: var(--color-background-primary);
   --assets-item-name-foreground-color-rest: var(--color-foreground-secondary);
   --assets-item-name-foreground-color: var(--color-foreground-primary);
   --assets-item-name-foreground-color-hover: var(--color-foreground-primary);
@@ -241,6 +241,7 @@
   --assets-component-background-color-disabled: var(--df-secondary;);
   --assets-component-border-color: var(--color-background-tertiary);
   --assets-component-border-selected: var(--color-accent-tertiary);
+  --assets-component-second-border-selected: var(--color-background-primary);
 
   --radio-btns-background-color: var(--color-background-tertiary);
   --radio-btn-background-color-selected: var(--color-background-quaternary);
@@ -434,7 +435,6 @@
   --button-icon-background-color-selected: var(--color-background-primary);
   --button-icon-border-color-selected: var(--color-background-secondary);
 
-  --assets-item-name-background-color: var(--color-background-primary);
   --assets-item-name-foreground-color: var(--color-foreground-primary);
 
   --text-editor-selection-background-color: var(--la-tertiary-70);

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

@@ -28,7 +28,7 @@
    [app.util.array :as array]
    [app.util.dom :as dom]
    [app.util.dom.dnd :as dnd]
-   [app.util.i18n :as i18n :refer [tr]]
+   [app.util.i18n :as i18n :refer [tr c]]
    [app.util.strings :refer [matches-search]]
    [app.util.timers :as ts]
    [cljs.spec.alpha :as s]
@@ -216,8 +216,8 @@
 (defn create-counter-element
   [asset-count]
   (let [counter-el (dom/create-element "div")]
-    (dom/set-property! counter-el "class" "drag-counter")
+    (dom/set-property! counter-el "class" (stl/css :drag-counter))
-    (dom/set-text! counter-el (str asset-count))
+    (dom/set-text! counter-el (tr "workspace.assets.sidebar.components" (c asset-count)))
     counter-el))
 
 (defn set-drag-image

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

@@ -45,3 +45,21 @@
 .asset-section.opened {
   margin-bottom: $s-12;
 }
+
+.drag-counter {
+  @include bodySmallTypography;
+  @include textEllipsis;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: calc($s-24 - $s-2);
+  background-color: var(--assets-item-name-background-color);
+  color: var(--assets-item-name-foreground-color);
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin: $s-4;
+  padding-inline: $s-4;
+  z-index: 2;
+}

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

@@ -35,12 +35,13 @@
     position: absolute;
     left: $s-4;
     bottom: $s-4;
-    height: $s-20;
+    height: calc($s-24 - $s-2);
     width: calc(100% - 2 * $s-4);
-    padding: $s-2;
+    padding: $s-2 $s-6;
     column-gap: $s-4;
-    border-radius: $br-2;
+    border-radius: $br-4;
     background-color: var(--assets-item-name-background-color);
+    border: $s-1 solid transparent;
     color: var(--assets-item-name-foreground-color);
     input {
       @include textEllipsis;
@@ -55,7 +56,7 @@
       height: 100%;
     }
     &.editing {
-      border: $s-1 solid var(--input-border-color-focus);
+      border-color: var(--input-border-color-focus);
       border-radius: $br-4;
       display: flex;
       align-items: center;
@@ -65,12 +66,24 @@
 
   &:hover {
     .cell-name {
-      display: block;
+      display: grid;
+      grid-template-columns: 1fr auto;
     }
   }
 
   &.selected {
-    border: $s-1 solid var(--assets-item-border-color);
+    border: $s-2 solid var(--assets-item-border-color);
+    &::before {
+      content: " ";
+      position: absolute;
+      z-index: $z-index-2;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border: $s-4 solid var(--assets-component-second-border-selected);
+      border-radius: $br-8;
+    }
   }
 }
 

frontend/translations/en.po

@@ -3711,6 +3711,12 @@ msgstr "Swap component"
 msgid "workspace.options.component.swap.empty"
 msgstr "There are no assets in this library yet"
 
+#: src/app/main/ui/workspace/sidebar/assets/common.cljs
+msgid "workspace.assets.sidebar.components"
+msgid_plural "workspace.assets.sidebar.components"
+msgstr[0] "1 component"
+msgstr[1] "%s components"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
 msgid "workspace.options.constraints"
 msgstr "Constraints"

frontend/translations/es.po

@@ -3711,6 +3711,12 @@ msgstr "Desvincular todas las tipografías"
 msgid "workspace.libraries.typography"
 msgstr "%s tipografías"
 
+#: src/app/main/ui/workspace/sidebar/assets/common.cljs
+msgid "workspace.assets.sidebar.components"
+msgid_plural "workspace.assets.sidebar.components"
+msgstr[0] "1 componente"
+msgstr[1] "%s componentes"
+
 #: src/app/main/ui/workspace/libraries.cljs
 msgid "workspace.libraries.update"
 msgstr "Actualizar"