Merge pull request #639 from joweecaquicla/636-add-tooltip-with-viewport-label-description

#636: Responsive breakpoint switcher - add tooltip with viewport label and description

Author: omiroshnichenko

app/code/Magento/PageBuilder/Component/Form/Element/Wysiwyg.php

@@ -42,6 +42,7 @@ class Wysiwyg extends \Magento\Ui\Component\Form\Element\Wysiwyg
      * @param ViewConfigInterface $viewConfig
      * @SuppressWarnings(PHPMD.CyclomaticComplexity)
      * @SuppressWarnings(PHPMD.ExcessiveParameterList)
+     * @SuppressWarnings(PHPMD.NPathComplexity)
      * @throws \Magento\Framework\Exception\NoSuchEntityException
      */
     public function __construct(
@@ -90,7 +91,7 @@ public function __construct(
             $wysiwygConfigData['viewports'] = $viewConfig->getViewConfig()->getVarValue(
                 'Magento_PageBuilder',
                 'breakpoints'
-            );;
+            );
 
             if ($overrideSnapshot) {
                 $pageBuilderConfig = $pageBuilderConfig ?: ObjectManager::getInstance()->get(PageBuilderConfig::class);

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_page-builder.less

@@ -23,6 +23,24 @@
         opacity: 1;
         visibility: visible;
     }
+
+    .tooltip {
+        margin-left: 0;
+        .tooltip-content {
+            background: rgba(49, 48, 43, .8);
+            font-size: 12px;
+            padding: 7px 9px;
+            text-align: left;
+
+            &:before {
+                opacity: .65;
+            }
+
+            .tooltip-label {
+                font-weight: bold;
+            }
+        }
+    }
 }
 
 .admin__fieldset > .admin__field > .admin__control-grouped {

app/code/Magento/PageBuilder/view/adminhtml/web/js/page-builder.js

@@ -12,9 +12,7 @@
     <div class="admin__field pagebuilder-header"
          css="visible: panel.isVisible(), 'transition-out': isSnapshotTransition()"
          if="!isSnapshot()">
-        <each args="data: Object.keys(viewports), as: 'name'">
-            <button type="button" translate="$parent.viewports[name].label" disable="name === $parent.viewport()" click="$parent.toggleViewport.bind($parent, name)"/>
-        </each>
+        <!-- ko template: viewportTemplate --><!-- /ko -->
         <button type="button" translate="'Apply Template'" if="isAllowedTemplateApply" click="toggleTemplateManger"/>
         <button type="button" translate="'Save as Template'" if="isAllowedTemplateSave" click="saveAsTemplate"/>
         <i click="toggleFullScreen.bind($data, {animate:true})"

app/code/Magento/PageBuilder/view/adminhtml/web/template/page-builder.html

@@ -0,0 +1,16 @@
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<each args="data: Object.keys(viewports), as: 'name'">
+    <span class="tooltip">
+        <button type="button" translate="$parent.viewports[name].label" disable="name === $parent.viewport()" click="$parent.toggleViewport.bind($parent, name)"/>
+        <span class="tooltip-content">
+            <span class="tooltip-label" translate="$parent.viewports[name].label"/><br/>
+            <span translate="'View your content for '"/><text args="name"/><br/>
+            <span translate="'Width'"/>: <text args="Object.values($parent.viewports[name].conditions)[0]"/>
+        </span>
+    </span>
+</each>

app/code/Magento/PageBuilder/view/adminhtml/web/template/viewport/switcher.html

@@ -223,6 +223,10 @@ export default class PageBuilder implements PageBuilderInterface {
         return this.template;
     }
 
+    get viewportTemplate(): string {
+        return "Magento_PageBuilder/viewport/switcher";
+    }
+
     /**
      * Toggle template manager
      */