MC-3476: Design and prototype

- Created prototype for rearranging button.

Author: Hwashiang Yu

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_buttons.less

@@ -20,6 +20,7 @@
     );
     .lib-css(border-radius, @button__border-radius);
     .lib-css(font-weight, @font-weight__semibold);
+    min-width: 56px;
 }
 
 .pagebuilder-button-secondary {

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

@@ -9,6 +9,39 @@
 
 .pagebuilder-content-type {
     .pagebuilder-button-item {
+        &.pagebuilder-content-type-active {
+            .button-item-drag-handle {
+                &.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;
+                    cursor: move; /* fallback if grab cursor is unsupported */
+                    cursor: grab;
+                    cursor: -moz-grab;
+                    cursor: -webkit-grab;
+                    display: inline-block;
+                    font-size: 16px;
+                    left: 0;
+                    line-height: 2.2rem;
+                    position: absolute;
+                }
+
+                &:active:before {
+                    cursor: grabbing;
+                    cursor: -moz-grabbing;
+                    cursor: -webkit-grabbing;
+                }
+            }
+        }
         [contenteditable=true] {
             display: inline-block;
             min-height: 18px;
@@ -20,7 +53,7 @@
         .pagebuilder-options {
             bottom: 0;
             left: calc(50% - 5px);
-            transform: translate(-50%, 90%);
+            transform: translate(-50%, -50%);
             li.pagebuilder-options-link {
                 margin: 0;
             }

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/button-item/preview.js

@@ -5,9 +5,10 @@
  */
 -->
 
-<div class="pagebuilder-content-type pagebuilder-button-item no-system-border" event="{ click: onMouseOver, focusout: onMouseOut }">
+<div class="pagebuilder-content-type pagebuilder-button-item no-system-border focus-options" event="{ click: onMouseOver, focusout: onMouseOut }">
     <render args="getOptions().template" />
     <a attr="data.link.attributes" ko-style="data.link.style" css="data.link.css">
+        <span class="button-item-drag-handle" css="{disabled: parent.parent.children().length <= 1}"></span>
         <span attr="data.link_text.attributes" data-bind="liveEdit: { field: 'button_text', placeholder: buttonPlaceholder }, hasFocus: $parent.parent.preview.isLiveEditing() === $index()" event="{ focusout: onFocusOut.call($data) }"></span>
     </a>
 </div>

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/buttons/preview.js

@@ -7,7 +7,7 @@
 
 <div class="pagebuilder-content-type pagebuilder-entity pagebuilder-entity-preview pagebuilder-no-blur pagebuilder-live-edit pagebuilder-buttons" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
     <render args="getOptions().template" />
-    <div class="element-children buttons-container" each="parent.getChildren()" attr="Object.assign({}, data.main.attributes(), { id: parent.id + '-children' })" ko-style="data.main.style" css="data.main.css" data-bind="sortableChildren: { handle: '.move-structural', items: '.pagebuilder-content-type-wrapper', connectWith: '.buttons-container', appendTo: 'body' }">
+    <div class="element-children buttons-container" each="parent.getChildren()" attr="Object.assign({}, data.main.attributes(), { id: parent.id + '-children' })" ko-style="data.main.style" css="data.main.css" data-bind="sortableChildren: getSortableOptions()">
         <div class="pagebuilder-content-type-wrapper" template="{ name: preview.previewTemplate, data: preview }" attr="{ id: id }"></div>
     </div>
 </div>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/button-item/default/preview.html

@@ -22,7 +22,7 @@ export default class Preview extends BasePreview {
     public retrieveOptions(): OptionInterface[] {
         const options = super.retrieveOptions();
         const newOptions = options.filter((option) => {
-            return (option.code !== "remove");
+            return (option.code !== "remove" && option.code !== "title" && option.code !== "move");
         });
         const removeClasses = ["remove-structural"];
         let removeFn = this.onOptionRemove;

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/buttons/inline/preview.html

@@ -7,6 +7,7 @@ import $ from "jquery";
 import ko from "knockout";
 import $t from "mage/translate";
 import events from "Magento_PageBuilder/js/events";
+import {SortableOptionsInterface} from "../../binding/sortable-options";
 import Config from "../../config";
 import ContentTypeInterface from "../../content-type";
 import createContentType from "../../content-type-factory";
@@ -20,6 +21,14 @@ import PreviewCollection from "../preview-collection";
  */
 export default class Preview extends PreviewCollection {
     public isLiveEditing: KnockoutObservable<boolean> = ko.observable(false);
+    public disableSorting: KnockoutComputed<void> = ko.computed(() => {
+        const sortableElement = $(this.wrapperElement).find(".buttons-container");
+        if (this.parent.children().length <= 1) {
+            sortableElement.sortable("disable");
+        } else {
+            sortableElement.sortable("enable");
+        }
+    });
 
     public bindEvents() {
         super.bindEvents();
@@ -84,4 +93,60 @@ export default class Preview extends PreviewCollection {
             console.error(error);
         });
     }
+
+    /**
+     * Get the sortable options for the tab heading sorting
+     *
+     * @returns {JQueryUI.SortableOptions}
+     */
+    public getSortableOptions(): SortableOptionsInterface {
+        return {
+            handle: ".button-item-drag-handle",
+            items: ".pagebuilder-content-type-wrapper",
+            containment: "parent",
+            tolerance: "pointer",
+            cursor: "grabbing",
+            cursorAt: { left: 25, top: 25 },
+            disabled: this.parent.children().length <= 1,
+            /**
+             * Provide custom helper element
+             *
+             * @param {Event} event
+             * @param {JQueryUI.Sortable} element
+             * @returns {Element}
+             */
+            helper(event: Event, element: JQueryUI.Sortable): Element {
+                const helper = $(element).clone().css({
+                    opacity: "0.7",
+                    width: "auto",
+                });
+                helper[0].querySelector(".pagebuilder-options").remove();
+                return helper[0];
+            },
+            placeholder: {
+                /**
+                 * Provide custom placeholder element
+                 *
+                 * @param {JQuery} item
+                 * @returns {JQuery}
+                 */
+                element(item: JQuery) {
+                    const placeholder = item
+                        .clone()
+                        .show()
+                        .css({
+                            display: "inline-block",
+                            opacity: "0.3",
+                        })
+                        .removeClass("focused")
+                        .addClass("sortable-placeholder");
+                    placeholder[0].querySelector(".pagebuilder-options").remove();
+                    return placeholder[0];
+                },
+                update() {
+                    return;
+                },
+            },
+        };
+    }
 }