3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-10 02:26:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix component element count while dragging

Browse source
This commit is contained in:
Eva Marco 2024-03-27 11:31:23 +01:00
parent af5d05b460
commit 315be268a4
6 changed files with 54 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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-text! counter-el (str asset-count))
(dom/set-property! counter-el "class" (stl/css :drag-counter))
(dom/set-text! counter-el (tr "workspace.assets.sidebar.components" (c asset-count)))
counter-el))
(defn set-drag-image

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

@ -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;
}

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

@ -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;
}
}
}