@gooddata/sdk-ui-dashboard 10.33.0-alpha.9 → 10.34.0-alpha.1

package/styles/scss/dashboardNestedLayoutWidget.scss

@@ -7,7 +7,7 @@
 .gd-dashboard-nested-layout-widget {
     .gd-dashboard-nested-layout-content.dash-item-content {
         border-radius: 0;
-        padding: 19px 10px 18px 10px;
+        padding: 19px 10px 15px 10px;
     }
     & .is-selectable {
         &.gd-dashboard-nested-layout-content.dash-item-content:not(.is-selected):hover,
@@ -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;
@@ -93,6 +87,15 @@
     .drag-info-placeholder {
         padding: 0 0 0 10px;
     }
+
+    .drag-info-empty-nested-layout {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        height: 100%;
+        justify-content: center;
+    }
 }
 
 .gd-grid-layout {
@@ -115,109 +118,131 @@
             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%;
+            }
+        }
+
+        &#{$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%;
+        }
+
+        &#{$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;
+            }
         }
     }
-}
 
-// 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;
+    // definition of vertical drop zones
+    &--direction-column {
+        &#{$dropzoneRoot}--type-prev,
+        &#{$dropzoneRoot}--type-next {
             right: 0;
-            bottom: unset;
             left: 0;
-            width: 100%;
             height: 50%;
+
+            &#{$dropzoneRoot}--full {
+                width: 100%;
+                height: 100%;
+            }
         }
 
-        &.prev {
+        &#{$dropzoneRoot}--type-prev {
             top: 0;
 
-            &.full {
-                width: 50%;
-            }
-
-            &.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 +250,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

@@ -179,59 +179,62 @@
 
 .add-kpi-placeholder::before,
 .move-kpi-placeholder::before {
-    background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/add-kpi-placeholder.svg");
+    background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/add-kpi-placeholder.svg");
 }
 
-.add-attribute-filter-placeholder::before {
-    background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/add-attribute-filter-placeholder.svg");
-
-    &:disabled {
-        background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/add-attribute-filter-placeholder-disabled.svg");
-    }
+.add-attribute-filter-placeholder.disabled::before {
+    background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/add-attribute-filter-placeholder-disabled.svg");
 }
 
-.dropzone {
-    z-index: zIndexes.$drag-and-drop-drop-zone;
-    &.next,
-    &.prev {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        width: 50%;
-    }
+.add-attribute-filter-placeholder::before {
+    background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/add-attribute-filter-placeholder.svg");
+}
 
-    &.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%;
+        }
     }
 }
 
@@ -424,6 +427,10 @@
     );
     text-align: center;
 
+    &.drag-info-empty-nested-layout {
+        padding: 0;
+    }
+
     h2 {
         font-weight: bold;
         font-size: 20px;
@@ -441,7 +448,7 @@
 
     .gd-icon-insight {
         &::before {
-            content: url("~@gooddata/sdk-ui-dashboard/esm/assets/add-insight-placeholder.svg");
+            content: url("@gooddata/sdk-ui-dashboard/esm/assets/add-insight-placeholder.svg");
             display: inline-block;
             margin-right: 10px;
         }
@@ -561,7 +568,7 @@
     cursor: pointer;
 
     &.select-measure {
-        background: url("~@gooddata/sdk-ui-dashboard/esm/assets/dummy-kpi-simple.svg") no-repeat center center;
+        background: url("@gooddata/sdk-ui-dashboard/esm/assets/dummy-kpi-simple.svg") no-repeat center center;
         background-size: 130px;
     }
 }
@@ -710,14 +717,6 @@
         }
     }
 
-    .dropzone {
-        &.next {
-            .drop-hint {
-                float: unset;
-            }
-        }
-    }
-
     .row-hotspot-container {
         .row-hotspot {
             top: -20px; // move active dropzone over the section hotspot row
@@ -772,6 +771,12 @@
         padding: 10px;
     }
 
+    .gd-fluidlayout-column-dropzone__text--hidden {
+        .drop-target-inner {
+            padding: 4px;
+        }
+    }
+
     .drop-target-message {
         position: unset;
         top: unset;
@@ -833,15 +838,25 @@
 
     .gd-fluidlayout-column-row-end-hotspot {
         min-height: unset;
+
         .widget-dropzone-box {
             padding: 10px 0;
         }
+
         .drag-info-placeholder-inner {
             padding: 0;
         }
+
+        &.gd-fluidlayout-column-row-end-hotspot--direction-column.gd-fluidlayout-column-dropzone__text--hidden {
+            .widget-dropzone-box {
+                padding: 0;
+            }
+        }
+
         &.gd-first-container-row-dropzone .widget-dropzone-box {
             padding-top: 0;
         }
+
         .drag-info-placeholder-drop-target,
         .drop-target-inner {
             position: unset;

package/styles/scss/drillConfigPanel.scss

@@ -116,7 +116,7 @@
             display: block;
             width: 18px;
             height: 24px;
-            background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/measure.svg");
+            background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/measure.svg");
             background-repeat: no-repeat;
             background-position: left top;
             background-size: contain;
@@ -128,20 +128,20 @@
     }
 
     .gd-drill-measure-selector-list-item::before {
-        background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/measure.svg");
+        background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/measure.svg");
     }
     .gd-drill-metric-selector-list-item::before {
-        background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/metric.svg");
+        background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/metric.svg");
         top: 8px;
         height: 18px;
     }
     .gd-drill-attribute-selector-list-item::before {
-        background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/attribute.svg");
+        background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/attribute.svg");
     }
     .gd-drill-attribute-date-selector-list-item::before {
         top: 9px;
         height: 16px;
-        background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/date-dropdown.svg");
+        background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/date-dropdown.svg");
     }
 }
 
@@ -227,7 +227,7 @@
         display: block;
         width: 18px;
         height: 24px;
-        background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/attribute-hierarchy.svg");
+        background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/attribute-hierarchy.svg");
         background-repeat: no-repeat;
         background-position: left top;
         background-size: contain;
@@ -262,16 +262,16 @@
     }
 
     .dm-button-icon-metric {
-        background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/metric.svg");
+        background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/metric.svg");
     }
     .dm-button-icon-measure {
-        background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/measure.svg");
+        background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/measure.svg");
     }
     .dm-button-icon-attribute {
-        background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/attribute.svg");
+        background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/attribute.svg");
     }
     .dm-button-icon-date {
-        background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/date-dropdown.svg");
+        background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/date-dropdown.svg");
     }
 
     .dm-button-title {
@@ -434,21 +434,21 @@
     }
 
     .gd-icon-drill-to-dashboard::before {
-        background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/drill-to-dashboard.svg");
+        background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/drill-to-dashboard.svg");
     }
 
     .gd-icon-drill-to-insight::before {
-        background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/drill-to-insight.svg");
+        background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/drill-to-insight.svg");
     }
 
     .gd-icon-drill-down::before {
-        background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/drill-down.svg");
+        background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/drill-down.svg");
         background-repeat: no-repeat;
         top: 1px;
     }
 
     .gd-icon-attribute-hierarchy::before {
-        background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/attribute-hierarchy.svg");
+        background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/attribute-hierarchy.svg");
         background-repeat: no-repeat;
         top: 1px;
     }