@gooddata/sdk-ui-dashboard 10.33.0-alpha.41 → 10.33.0-alpha.43

package/styles/scss/dashboardNestedLayoutWidget.scss

@@ -46,12 +46,6 @@
     }
 }
 
-.gd-nested-layout-widget-renderer {
-    .gd-nested-layout-hotspot.dropzone {
-        width: 50px;
-    }
-}
-
 .gd-dashboard-nested-layout-tab {
     display: none;
     width: auto;
@@ -115,109 +109,130 @@
             min-height: 300px;
         }
     }
+}
 
-    .gd-hotspot-border__container {
-        display: none;
+// Definition of horizontal and vertical hot and drop zones.
+.gd-grid-layout-dropzone {
+    $dropzoneRoot: &;
+    z-index: zIndexes.$drag-and-drop-drop-zone;
+
+    &--type-prev,
+    &--type-next {
         position: absolute;
-        padding: 10px 0;
-        width: 10px;
-        height: 100%;
     }
 
-    .gd-first-container-row-dropzone .gd-hotspot-border__container {
-        padding-top: 0;
+    &--type-prev {
+        .drop-hint {
+            float: left;
+            margin-left: -3px;
+        }
     }
 
-    .gd-hotspot-border__drop-target {
-        width: 100%;
-        height: 100%;
-        padding: 2px;
-        border: 1px dashed kit-variables.$gd-palette-primary-base;
-        border-radius: 15px;
-        background-color: kit-variables.$gd-palette-primary-dimmed;
-
-        .drop-target-inner {
-            width: 4px;
-            height: 100%;
-            padding: 0;
-            border-radius: 2px;
-            background-color: kit-variables.$gd-palette-primary-base;
+    &--type-next {
+        .drop-hint {
+            float: right;
+            margin-left: 3px;
         }
     }
 
-    .dropzone.prev.active {
-        .gd-hotspot-border__container {
-            left: -15px;
-            display: block;
-        }
+    &--hidden {
+        display: none;
     }
 
-    .dropzone.next.active {
-        .gd-hotspot-border__container {
-            right: -15px;
-            display: block;
+    // definition of horizontal drop zones
+    &--direction-row {
+        &#{$dropzoneRoot}--type-prev,
+        &#{$dropzoneRoot}--type-next {
+            top: 0;
+            bottom: 0;
+            width: 50%;
+
+            &#{$dropzoneRoot}--full {
+                width: 100%;
+            }
         }
-    }
-}
 
-// The class is used in the nested layout, no need to nest this inside of .gd-grid-layout.
-// The block redefines the vertical hot zones and drop zones to horizontal one for column layout.
-.gd-dashboard-nested-layout-widget--column {
-    .dropzone {
-        &.prev,
-        &.next {
-            top: unset;
-            right: 0;
-            bottom: unset;
+        &#{$dropzoneRoot}--type-prev {
             left: 0;
+
+            &#{$dropzoneRoot}--active {
+                #{$dropzoneRoot}__drop-target--direction-row {
+                    left: -15px;
+                }
+            }
+        }
+
+        &#{$dropzoneRoot}--type-next {
+            right: 0;
+
+            &#{$dropzoneRoot}--active {
+                #{$dropzoneRoot}__drop-target--direction-row {
+                    right: -15px;
+                }
+            }
+        }
+
+        &#{$dropzoneRoot}--extended {
             width: 100%;
-            height: 50%;
         }
 
-        &.prev {
-            top: 0;
+        &#{$dropzoneRoot}--isOverNestedLayout {
+            &#{$dropzoneRoot}--type-prev,
+            &#{$dropzoneRoot}--type-next {
+                // nested container has has narrower hotspot so it is possible to drop widget into it, while
+                // the non-container widgets inside of it are split half and half (50%)
+                width: 50px;
+            }
+        }
+    }
+
+    // definition of vertical drop zones
+    &--direction-column {
+        &#{$dropzoneRoot}--type-prev,
+        &#{$dropzoneRoot}--type-next {
+            right: 0;
+            left: 0;
+            height: 50%;
 
-            &.full {
+            &#{$dropzoneRoot}--full {
                 width: 50%;
             }
+        }
+
+        &#{$dropzoneRoot}--type-prev {
+            top: 0;
 
-            &.active {
-                .gd-hotspot-border__container {
-                    left: unset; // remove left shift defined for vertical hotspot
+            &#{$dropzoneRoot}--active {
+                #{$dropzoneRoot}__drop-target--direction-column {
                     top: -5px; // shift above the widget, in the middle of space between two widgets
                 }
             }
         }
 
-        &.next {
+        &#{$dropzoneRoot}--type-next {
             bottom: 0;
 
-            &.full {
-                width: 50%;
-            }
-
-            &.active {
-                .gd-hotspot-border__container {
-                    right: unset; // remove right shift defined for vertical hotspot
+            &#{$dropzoneRoot}--active {
+                #{$dropzoneRoot}__drop-target--direction-column {
                     bottom: -5px; // shift below the widget, in the middle of space between two widgets
                 }
             }
         }
 
-        &.gd-nested-layout-hotspot {
-            &.prev,
-            &.next {
+        &#{$dropzoneRoot}--isOverNestedLayout {
+            &#{$dropzoneRoot}--type-prev,
+            &#{$dropzoneRoot}--type-next {
                 // nested container has has narrower hotspot so it is possible to drop widget into it, while
                 // the non-container widgets inside of it are split half and half (50%)
                 height: 50px;
             }
         }
 
-        &.gd-first-container-row-dropzone {
-            &.prev {
-                &.active {
+        &#{$dropzoneRoot}--isInFirstRow {
+            &#{$dropzoneRoot}--type-prev {
+                &#{$dropzoneRoot}--active {
                     // stylelint-disable-next-line max-nesting-depth
-                    .gd-hotspot-border__container {
+                    #{$dropzoneRoot}__drop-target--direction-column {
                         top: -15px; // the first widget does not have same padding as the subsequent ones
                     }
                 }
@@ -225,15 +240,55 @@
         }
     }
 
-    .gd-hotspot-border__container {
-        padding: 0; // remove padding defined for vertical hotspot to have drop zone same width as widget
-        width: 100%;
-        height: 10px;
-    }
+    // drop target inside of the drop zone
+    &__drop-target {
+        display: none;
+        position: absolute;
 
-    .gd-hotspot-border__drop-target {
-        .drop-target-inner {
+        &--direction-row {
+            padding: 10px 0;
+            width: 10px;
+            height: 100%;
+
+            #{$dropzoneRoot}__drop-target-inner {
+                width: 4px;
+            }
+        }
+
+        &--direction-column {
+            padding: 0;
             width: 100%;
+            height: 10px;
+
+            #{$dropzoneRoot}__drop-target-inner {
+                width: 100%;
+            }
         }
+
+        &#{$dropzoneRoot}--isInFirstRow {
+            padding-top: 0;
+        }
+    }
+
+    &--active {
+        #{$dropzoneRoot}__drop-target {
+            display: block;
+        }
+    }
+
+    &__drop-target-border {
+        width: 100%;
+        height: 100%;
+        padding: 2px;
+        border: 1px dashed kit-variables.$gd-palette-primary-base;
+        border-radius: 15px;
+        background-color: kit-variables.$gd-palette-primary-dimmed;
+    }
+
+    &__drop-target-inner {
+        height: 100%;
+        padding: 0;
+        border-radius: 2px;
+        background-color: kit-variables.$gd-palette-primary-base;
     }
 }

package/styles/scss/dragAndDrop.scss

@@ -190,48 +190,51 @@
     background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/add-attribute-filter-placeholder.svg");
 }
 
-.dropzone {
-    z-index: zIndexes.$drag-and-drop-drop-zone;
-    &.next,
-    &.prev {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        width: 50%;
-    }
-
-    &.next {
-        right: 0;
+.gd-fluid-layout {
+    .dropzone {
+        z-index: zIndexes.$drag-and-drop-drop-zone;
 
-        .drop-hint {
-            float: right;
-            margin-left: 3px;
+        &.next,
+        &.prev {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            width: 50%;
         }
 
-        &.full {
-            width: 100%;
-        }
-    }
+        &.next {
+            right: 0;
 
-    &.prev {
-        left: 0;
+            .drop-hint {
+                float: right;
+                margin-left: 3px;
+            }
 
-        .drop-hint {
-            float: left;
-            margin-left: -3px;
+            &.full {
+                width: 100%;
+            }
         }
 
-        &.full {
-            width: 100%;
+        &.prev {
+            left: 0;
+
+            .drop-hint {
+                float: left;
+                margin-left: -3px;
+            }
+
+            &.full {
+                width: 100%;
+            }
         }
-    }
 
-    &.hidden {
-        display: none;
-    }
+        &.hidden {
+            display: none;
+        }
 
-    &.extended {
-        width: 100%;
+        &.extended {
+            width: 100%;
+        }
     }
 }
 
@@ -710,14 +713,6 @@
         }
     }
 
-    .dropzone {
-        &.next {
-            .drop-hint {
-                float: unset;
-            }
-        }
-    }
-
     .row-hotspot-container {
         .row-hotspot {
             top: -20px; // move active dropzone over the section hotspot row