Merge pull request #69 from magento-obsessive-owls/MAGETWO-88142-editing-heading-new

[CMS Team 1] MAGENTO-88142 Editing Heading from the stage

Author: anthoula

app/code/Magento/PageBuilder/etc/adminhtml/di.xml

@@ -107,7 +107,7 @@
             <argument name="optionsSize" xsi:type="string">small</argument>
             <argument name="optionsData" xsi:type="array">
                 <item name="0" xsi:type="array">
-                    <item name="value" xsi:type="string">default</item>
+                    <item name="value" xsi:type="string"/>
                     <item name="title" xsi:type="string" translate="true">Default</item>
                 </item>
                 <item name="1" xsi:type="array">

app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_base_form.xml

@@ -23,10 +23,10 @@
             <label translate="true">Advanced</label>
             <collapsible>true</collapsible>
         </settings>
-        <field name="text_align" sortOrder="10" formElement="select">
+        <field name="text_align" sortOrder="10" formElement="select" component="Magento_PageBuilder/js/form/element/visual-select">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
-                    <item name="default" xsi:type="string">default</item>
+                    <item name="default" xsi:type="string"/>
                 </item>
             </argument>
             <settings>

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

@@ -31,6 +31,9 @@
 @icon-pagebuilder-special-characters__content: '\e914';
 @icon-pagebuilder-tabs__content: '\e915';
 @icon-pagebuilder-text__content: '\e916';
+@icon-pagebuilder-align-center__content: '\e91a';
+@icon-pagebuilder-align-left__content: '\e91b';
+@icon-pagebuilder-align-right__content: '\e91c';
 @icon-pagebuilder-variable__content: '\e917';
 @icon-pagebuilder-widgets__content: '\e918';
 
@@ -136,6 +139,18 @@
     content: @icon-pagebuilder-text__content;
 }
 
+.icon-pagebuilder-align-center:before {
+    content: @icon-pagebuilder-align-center__content;
+}
+
+.icon-pagebuilder-align-left:before {
+    content: @icon-pagebuilder-align-left__content;
+}
+
+.icon-pagebuilder-align-right:before {
+    content: @icon-pagebuilder-align-right__content;
+}
+
 .icon-pagebuilder-variable:before {
     content: @icon-pagebuilder-variable__content;
 }

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

@@ -56,3 +56,9 @@
 //  _____________________________________________
 
 @import 'content-type/_import.less';
+
+//
+//  Import Menus less
+//  _____________________________________________
+
+@import '_toolbar.less';

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

@@ -0,0 +1,101 @@
+// /**
+//  * Copyright © Magento, Inc. All rights reserved.
+//  * See COPYING.txt for license details.
+//  */
+
+//
+//  Toolbar Options Panel
+//  _____________________________________________
+
+//  Don't display the hover state when the stage is being interacted with
+.pagebuilder-stage.interacting .pagebuilder-content-type.pagebuilder-toolbar-active:hover {
+    outline: 1px solid rgb(153, 153, 153);
+}
+
+.pagebuilder-toolbar-active {
+    &.pagebuilder-content-type {
+        outline: 1px solid rgb(153, 153, 153);
+    }
+
+    .pagebuilder-toolbar-options {
+        opacity: 1;
+        top: -39px;
+        transition-delay: 200ms;
+        visibility: visible;
+    }
+}
+
+.pagebuilder-toolbar-container {
+    overflow: hidden;
+}
+
+.pagebuilder-toolbar-options {
+    -moz-transition: opacity 200ms, top 200ms, visibility 200ms;
+    -o-transition: opacity 200ms, top 200ms, visibility 200ms;
+    -webkit-transition: opacity 200ms, top 200ms, visibility 200ms;
+    background-color: @color-gray94;
+    border: 1px solid @color-gray75;
+    height: 38px;
+    left: -2px;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    transition: opacity 200ms, top 200ms, visibility 200ms;
+    visibility: hidden;
+    width: calc(~'100% + 4px');
+    z-index: 32;
+
+    .pagebuilder-toolbar-options-wrapper {
+        display: flex;
+
+        .pagebuilder-toolbar-options-links {
+            display: flex;
+            list-style: none;
+            margin: 0;
+            vertical-align: middle;
+
+            &:not(:first-child):before {
+                background-color: @color-light-gray;
+                content: '';
+                height: 80%;
+                left: 0;
+                position: relative;
+                top: 10%;
+                width: 1px;
+            }
+
+            .pagebuilder-toolbar-options-link {
+                display: flex;
+                margin: 2px;
+
+                > a {
+                    border: 1px solid transparent;
+                    color: @color-very-dark-grayish-orange;
+                    display: block;
+                    height: 32px;
+                    text-align: center;
+                    text-decoration: none;
+                    width: 34px;
+
+                    &:hover,
+                    &.toolbar-active {
+                        background-color: @color-light-gray;
+                        border: 1px solid @color-gray80;
+                    }
+
+                    i {
+                        font-size: 18px;
+                        font-style: normal;
+                        line-height: 30px;
+                    }
+
+                    span {
+                        font-size: 15px;
+                        font-weight: 600;
+                        line-height: 32px;
+                    }
+                }
+            }
+        }
+    }
+}