diff --git a/CHANGES.md b/CHANGES.md index 0ccd9a2b2..ea160e12e 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -10,6 +10,10 @@ ### :sparkles: New features +### :bug: Bugs fixed + +- Fix components are not dragged from the group to the assets tab [Taiga #8273](https://tree.taiga.io/project/penpot/issue/8273) + ## 2.1.1 ### :sparkles: New features diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs index eb2c59c01..7461f4202 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs @@ -241,14 +241,9 @@ (when group-open? [:* - (when-let [components (not-empty (get groups "" []))] + (let [components (not-empty (get groups "" []))] [:div {:class-name (stl/css-case :asset-grid listing-thumbs? - :asset-enum (not listing-thumbs?) - :drop-space (and - (empty? components) - (some? groups) - (not dragging?) - local)) + :asset-enum (not listing-thumbs?)) :on-drag-enter on-drag-enter :on-drag-leave on-drag-leave :on-drag-over dom/prevent-default @@ -261,7 +256,8 @@ (when (and (empty? components) (some? groups) local) - [:div {:class (stl/css :drop-space)}]) + [:div {:class (stl/css-case :drop-space true + :drop-space-small (not dragging?))}]) (for [component components] [:& components-item diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss index 72706d601..2c351e8df 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss @@ -10,6 +10,10 @@ height: $s-12; } +.drop-space-small { + height: $s-2; +} + .asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax($s-96, 1fr)); @@ -43,6 +47,7 @@ background-color: var(--assets-item-name-background-color); border: $s-1 solid transparent; color: var(--assets-item-name-foreground-color); + input { @include textEllipsis; @include bodySmallTypography; @@ -50,11 +55,13 @@ height: auto; padding: 0; } + span { display: flex; align-items: center; height: 100%; } + &.editing { border-color: var(--input-border-color-focus); border-radius: $br-4; @@ -72,6 +79,7 @@ &.selected { border: $s-2 solid var(--assets-item-border-color); + &::before { content: " "; position: absolute; @@ -123,21 +131,27 @@ &:not(:last-child) { margin-bottom: $s-4; } + &:hover { background-color: var(--assets-item-background-color-hover); + .item-name { color: var(--assets-item-name-foreground-color-hover); + &.editing { background: var(--input-background-color); + input { color: var(--input-foreground-color-active); } + span svg { stroke: var(--input-foreground-color-active); } } } } + &.selected { border: $s-1 solid var(--assets-item-border-color); } @@ -148,6 +162,7 @@ @include textEllipsis; order: 2; color: var(--assets-item-name-foreground-color); + input { @include textEllipsis; @include bodySmallTypography; @@ -155,6 +170,7 @@ height: $s-32; padding: $s-4; } + span { display: flex; place-items: center; @@ -199,6 +215,7 @@ width: $s-28; margin-left: $s-2; border-radius: $br-8; + svg { @extend .button-icon; stroke: var(--icon-foreground); diff --git a/frontend/src/app/main/ui/workspace/top_toolbar.cljs b/frontend/src/app/main/ui/workspace/top_toolbar.cljs index 82e344445..fb9f3473c 100644 --- a/frontend/src/app/main/ui/workspace/top_toolbar.cljs +++ b/frontend/src/app/main/ui/workspace/top_toolbar.cljs @@ -91,7 +91,7 @@ hide-toolbar? (mf/deref toolbar-hidden) interrupt - (mf/use-fn #(st/emit! :interrupt)) + (mf/use-fn #(st/emit! :interrupt (dw/clear-edition-mode))) select-drawtool (mf/use-fn