@gooddata/sdk-ui-dashboard 10.33.0-alpha.78 → 10.33.0-alpha.8

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 15px 10px;
+        padding: 19px 10px 18px 10px;
     }
     & .is-selectable {
         &.gd-dashboard-nested-layout-content.dash-item-content:not(.is-selected):hover,
@@ -46,6 +46,12 @@
     }
 }
 
+.gd-nested-layout-widget-renderer {
+    .gd-nested-layout-hotspot.dropzone {
+        width: 50px;
+    }
+}
+
 .gd-dashboard-nested-layout-tab {
     display: none;
     width: auto;
@@ -87,15 +93,6 @@
     .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 {
@@ -118,131 +115,109 @@
             min-height: 300px;
         }
     }
-}
-
-// 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 {
+    .gd-hotspot-border__container {
+        display: none;
         position: absolute;
+        padding: 10px 0;
+        width: 10px;
+        height: 100%;
     }
 
-    &--type-prev {
-        .drop-hint {
-            float: left;
-            margin-left: -3px;
-        }
-    }
-
-    &--type-next {
-        .drop-hint {
-            float: right;
-            margin-left: 3px;
-        }
-    }
-
-    &--hidden {
-        display: none;
+    .gd-first-container-row-dropzone .gd-hotspot-border__container {
+        padding-top: 0;
     }
 
-    // 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;
+    .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;
 
-            &#{$dropzoneRoot}--active {
-                #{$dropzoneRoot}__drop-target--direction-row {
-                    right: -15px;
-                }
-            }
+        .drop-target-inner {
+            width: 4px;
+            height: 100%;
+            padding: 0;
+            border-radius: 2px;
+            background-color: kit-variables.$gd-palette-primary-base;
         }
+    }
 
-        &#{$dropzoneRoot}--extended {
-            width: 100%;
+    .dropzone.prev.active {
+        .gd-hotspot-border__container {
+            left: -15px;
+            display: block;
         }
+    }
 
-        &#{$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;
-            }
+    .dropzone.next.active {
+        .gd-hotspot-border__container {
+            right: -15px;
+            display: block;
         }
     }
+}
 
-    // definition of vertical drop zones
-    &--direction-column {
-        &#{$dropzoneRoot}--type-prev,
-        &#{$dropzoneRoot}--type-next {
+// 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;
             left: 0;
+            width: 100%;
             height: 50%;
-
-            &#{$dropzoneRoot}--full {
-                width: 100%;
-                height: 100%;
-            }
         }
 
-        &#{$dropzoneRoot}--type-prev {
+        &.prev {
             top: 0;
 
-            &#{$dropzoneRoot}--active {
-                #{$dropzoneRoot}__drop-target--direction-column {
+            &.full {
+                width: 50%;
+            }
+
+            &.active {
+                .gd-hotspot-border__container {
+                    left: unset; // remove left shift defined for vertical hotspot
                     top: -5px; // shift above the widget, in the middle of space between two widgets
                 }
             }
         }
 
-        &#{$dropzoneRoot}--type-next {
+        &.next {
             bottom: 0;
 
-            &#{$dropzoneRoot}--active {
-                #{$dropzoneRoot}__drop-target--direction-column {
+            &.full {
+                width: 50%;
+            }
+
+            &.active {
+                .gd-hotspot-border__container {
+                    right: unset; // remove right shift defined for vertical hotspot
                     bottom: -5px; // shift below the widget, in the middle of space between two widgets
                 }
             }
         }
 
-        &#{$dropzoneRoot}--isOverNestedLayout {
-            &#{$dropzoneRoot}--type-prev,
-            &#{$dropzoneRoot}--type-next {
+        &.gd-nested-layout-hotspot {
+            &.prev,
+            &.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;
             }
         }
 
-        &#{$dropzoneRoot}--isInFirstRow {
-            &#{$dropzoneRoot}--type-prev {
-                &#{$dropzoneRoot}--active {
+        &.gd-first-container-row-dropzone {
+            &.prev {
+                &.active {
                     // stylelint-disable-next-line max-nesting-depth
-                    #{$dropzoneRoot}__drop-target--direction-column {
+                    .gd-hotspot-border__container {
                         top: -15px; // the first widget does not have same padding as the subsequent ones
                     }
                 }
@@ -250,55 +225,15 @@
         }
     }
 
-    // drop target inside of the drop zone
-    &__drop-target {
-        display: none;
-        position: absolute;
-
-        &--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 {
+    .gd-hotspot-border__container {
+        padding: 0; // remove padding defined for vertical hotspot to have drop zone same width as widget
         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;
+        height: 10px;
     }
 
-    &__drop-target-inner {
-        height: 100%;
-        padding: 0;
-        border-radius: 2px;
-        background-color: kit-variables.$gd-palette-primary-base;
+    .gd-hotspot-border__drop-target {
+        .drop-target-inner {
+            width: 100%;
+        }
     }
 }

package/styles/scss/dragAndDrop.scss

@@ -179,63 +179,60 @@
 
 .add-kpi-placeholder::before,
 .move-kpi-placeholder::before {
-    background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/add-kpi-placeholder.svg");
-}
-
-.add-attribute-filter-placeholder.disabled::before {
-    background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/add-attribute-filter-placeholder-disabled.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");
-}
+    background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/add-attribute-filter-placeholder.svg");
 
-.gd-fluid-layout {
-    .dropzone {
-        z-index: zIndexes.$drag-and-drop-drop-zone;
-
-        &.next,
-        &.prev {
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            width: 50%;
-        }
+    &:disabled {
+        background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/add-attribute-filter-placeholder-disabled.svg");
+    }
+}
 
-        &.next {
-            right: 0;
+.dropzone {
+    z-index: zIndexes.$drag-and-drop-drop-zone;
+    &.next,
+    &.prev {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 50%;
+    }
 
-            .drop-hint {
-                float: right;
-                margin-left: 3px;
-            }
+    &.next {
+        right: 0;
 
-            &.full {
-                width: 100%;
-            }
+        .drop-hint {
+            float: right;
+            margin-left: 3px;
         }
 
-        &.prev {
-            left: 0;
-
-            .drop-hint {
-                float: left;
-                margin-left: -3px;
-            }
-
-            &.full {
-                width: 100%;
-            }
+        &.full {
+            width: 100%;
         }
+    }
 
-        &.hidden {
-            display: none;
+    &.prev {
+        left: 0;
+
+        .drop-hint {
+            float: left;
+            margin-left: -3px;
         }
 
-        &.extended {
+        &.full {
             width: 100%;
         }
     }
+
+    &.hidden {
+        display: none;
+    }
+
+    &.extended {
+        width: 100%;
+    }
 }
 
 .widget-dropzone,
@@ -427,10 +424,6 @@
     );
     text-align: center;
 
-    &.drag-info-empty-nested-layout {
-        padding: 0;
-    }
-
     h2 {
         font-weight: bold;
         font-size: 20px;
@@ -448,7 +441,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;
         }
@@ -568,7 +561,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;
     }
 }
@@ -717,6 +710,14 @@
         }
     }
 
+    .dropzone {
+        &.next {
+            .drop-hint {
+                float: unset;
+            }
+        }
+    }
+
     .row-hotspot-container {
         .row-hotspot {
             top: -20px; // move active dropzone over the section hotspot row
@@ -771,12 +772,6 @@
         padding: 10px;
     }
 
-    .gd-fluidlayout-column-dropzone__text--hidden {
-        .drop-target-inner {
-            padding: 4px;
-        }
-    }
-
     .drop-target-message {
         position: unset;
         top: unset;
@@ -838,25 +833,15 @@
 
     .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;
     }