Merge pull request #3983 from penpot/alotor-bugfixes-4

Alotor bugfixes 4

frontend/src/app/main/ui/viewer/inspect/code.cljs

@@ -240,7 +240,8 @@
         [:button.download-button {:on-click handle-open-review}
          "Preview"]]
 
-     [:div {:class (stl/css :code-block)}
+     [:div {:class (stl/css-case :code-block true
+                                 :collapsed collapsed-css?)}
       [:div {:class (stl/css :code-row-lang)}
        [:button {:class (stl/css :toggle-btn)
                  :data-type "css"
@@ -274,7 +275,8 @@
              :on-lost-pointer-capture on-style-lost-pointer-capture
              :on-pointer-move on-style-pointer-move}]]
 
-     [:div {:class (stl/css :code-block)}
+     [:div {:class (stl/css-case :code-block true
+                                 :collapsed collapsed-markup?)}
       [:div {:class (stl/css :code-row-lang)}
        [:button {:class (stl/css :toggle-btn)
                  :data-type "markup"

frontend/src/app/main/ui/viewer/inspect/code.scss

@@ -26,7 +26,6 @@
   @include codeTypography;
   display: flex;
   flex-direction: column;
-  flex: 1;
   height: 100%;
   min-height: 0;
   overflow: hidden;
@@ -35,7 +34,6 @@
   pre {
     border-radius: $br-8;
     padding: $s-16;
-    max-height: var(--code-height);
     overflow: auto;
     height: 100%;
   }
@@ -44,6 +42,10 @@
   :global(.hljs) {
     background: $db-tertiary;
   }
+
+  &.collapsed {
+    height: initial;
+  }
 }
 
 .code-row-lang {

frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss

@@ -16,6 +16,7 @@
   grid-area: right-sidebar;
   padding-top: $s-8;
   padding-left: $s-12;
+  overflow: hidden;
   &.viewer-code {
     height: calc(100vh - $s-48);
   }

frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs

@@ -261,16 +261,29 @@
 
         on-drop
         (mf/use-fn
-         (mf/deps id index objects)
+         (mf/deps id index objects expanded?)
          (fn [side _data]
-           (let [to-index  (cond
-                             (= side :center) 0
-                             (= side :top) (inc index)
-                             :else index)
-                 parent-id (if (= side :center)
+           (let [shape (get objects id)
+
+                 parent-id
+                 (cond
+                   (= side :center)
                    id
+
+                   (and expanded? (= side :bot) (d/not-empty? (:shapes shape)))
+                   id
+
+                   :else
                    (cfh/get-parent-id objects id))
-                 parent    (get objects parent-id)]
+
+                 parent    (get objects parent-id)
+
+                 to-index  (cond
+                             (= side :center) 0
+                             (and expanded? (= side :bot) (d/not-empty? (:shapes shape))) (count (:shapes parent))
+                             (= side :top) (inc index)
+                             :else index)]
+
              (when-not (ctk/in-component-copy? parent) ;; We don't want to change the structure of component copies
                (st/emit! (dw/relocate-selected-shapes parent-id to-index))))))
 
@@ -308,8 +321,8 @@
         depth           (+ depth 1)
         component-tree? (or component-child? (:component-root item))
 
-        enable-drag      (mf/use-fn #(reset! drag-disabled* true))
-        disable-drag     (mf/use-fn #(reset! drag-disabled* false))]
+        enable-drag      (mf/use-fn #(reset! drag-disabled* false))
+        disable-drag     (mf/use-fn #(reset! drag-disabled* true))]
 
     (mf/with-effect [selected? selected]
       (let [single? (= (count selected) 1)

frontend/src/app/main/ui/workspace/sidebar/layer_item.scss

@@ -51,7 +51,7 @@
     border-bottom: $s-2 solid var(--layer-row-foreground-color-hover);
   }
   &.dnd-over-top {
-    border-bottom: $s-2 solid var(--layer-row-foreground-color-hover);
+    border-top: $s-2 solid var(--layer-row-foreground-color-hover);
   }
   &.dnd-over {
     border: $s-2 solid var(--layer-row-foreground-color-hover);