Merge remote-tracking branch 'upstream/develop' into MAGETWO-91200-update-documentation-eap

Author: Igor Melnikov

app/code/Magento/PageBuilder/docs/content-type-configuration.md

@@ -510,3 +510,9 @@ define([], function () {
     return EmptyMobileImage;
 });
 ```
+
+## Preview component settings
+
+| Property                 | Description                                                                                                                         | Example        |
+| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+|`fieldsToIgnoreOnRemove`| array containing field names to ignore when evaluating whether an element has been configured. The default value is an empty array. | `["tab_name"]` |

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/tab-item/_default.less

@@ -7,3 +7,27 @@
 //  Default appearance styles
 //  _____________________________________________
 
+.pagebuilder-content-type {
+  &.tab-align-left {
+    .pagebuilder-tab-item {
+      border-top-left-radius: 0 !important;
+    }
+  }
+  &.tab-align-right {
+    .pagebuilder-tab-item {
+      border-top-right-radius: 0 !important;
+    }
+  }
+  &.pagebuilder-tab-item {
+    min-height: inherit;
+
+    &.empty-container {
+      min-height: 220px;
+    }
+
+    > .element-children {
+      min-height: inherit;
+      padding: 0;
+    }
+  }
+}

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/tabs/_default.less

@@ -49,6 +49,64 @@
                 &:hover {
                     text-decoration: none;
                 }
+
+                .tab-drag-handle {
+                    height: 100%;
+                    left: 2px;
+                    opacity: 0;
+                    position: absolute;
+                    top: 0;
+                    transition: all .3s;
+                    visibility: hidden;
+                    width: 14px;
+
+                    &.disabled:before {
+                        color: @color-light-gray;
+                        cursor: not-allowed;
+                    }
+
+                    &.disabled:active:before {
+                        cursor: not-allowed;
+                    }
+
+                    &:before {
+                        .abs-icon;
+                        color: @color-dark-gray0;
+                        content: @icon-gripper__content;
+                        display: block;
+                        font-size: 16px;
+                        position: absolute;
+                        top: 50%;
+                        transform: translateY(-50%);
+
+                        cursor: move; /* fallback if grab cursor is unsupported */
+                        cursor: grab;
+                        cursor: -moz-grab;
+                        cursor: -webkit-grab;
+                    }
+
+                    &:active:before {
+                        cursor: grabbing;
+                        cursor: -moz-grabbing;
+                        cursor: -webkit-grabbing;
+                    }
+                }
+            }
+
+            &.sortable-placeholder {
+                opacity: .3;
+            }
+
+            &.ui-sortable-helper {
+                box-shadow: 0 1px 10px rgba(0, 0, 0, .3);
+                opacity: .7;
+                white-space: nowrap;
+
+                a.tab-title .tab-drag-handle:before {
+                    cursor: grabbing;
+                    cursor: -moz-grabbing;
+                    cursor: -webkit-grabbing;
+                }
             }
 
             &:last-child {
@@ -66,6 +124,11 @@
             }
 
             &.focused {
+                a.tab-title .tab-drag-handle {
+                    opacity: 1;
+                    visibility: visible;
+                }
+
                 .pagebuilder-options {
                     .pagebuilder-options-visible;
                 }
@@ -74,26 +137,16 @@
     }
 
     .tabs-content {
-        border: 1px solid #ccc;
-        overflow: hidden;
+        border: 1px solid transparent;
         position: relative;
         z-index: 9;
 
         > .element-children {
             min-height: inherit;
             padding: 0;
-        }
-
-        .pagebuilder-content-type.pagebuilder-tab {
-            min-height: inherit;
-
-            &.empty-container {
-                min-height: 220px;
-            }
 
-            > .element-children {
-                min-height: inherit;
-                padding: 0;
+            > .pagebuilder-content-type-wrapper:not(:first-child) {
+                display: none;
             }
         }
     }