#636: Responsive breakpoint switcher - move switcher to another template

Author: joiecaquicla

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

@@ -12,16 +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'">
-            <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>
+        <!-- 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
      */