Display preview modes switches

[MAILPOET-2602]

assets/css/src/components/_common.scss

@@ -109,3 +109,50 @@ p.sender_email_address_warning:first-child {
   height: 46px;
   padding: 10px 18px;
 }
+
+.mailpoet_browser_preview_toggle {
+  flex: 0 1 auto;
+  height: 30px;
+  padding-bottom: 10px;
+  text-align: center;
+  width: 100%;
+}
+
+.mailpoet_browser_preview_toggle > label {
+  display: inline-block;
+  margin: 0 5px;
+}
+
+.mailpoet_browser_preview_container {
+  border: 1px solid #979797;
+  border-radius: 20px;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  height: 100%;
+  margin: auto;
+  padding: 20px;
+  transition: width .5s;
+}
+
+.mailpoet_browser_preview_container_desktop {
+  width: 100%;
+}
+
+.mailpoet_browser_preview_container_mobile {
+  width: 350px;
+}
+
+.mailpoet_browser_preview_border {
+  border: 1px solid #c3c3c3;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+}
+
+.mailpoet_browser_preview_iframe {
+  display: block;
+  margin: auto;
+  width: calc(100% - 1px);
+}

assets/css/src/components/formEditor/components/_preview.scss

@@ -3,5 +3,4 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-
 }

assets/css/src/components/newsletterEditor/components/_sidebar.scss

@@ -162,50 +162,7 @@ $widget-icon-width: 30px;
   top: -25px;
 }
 
-.mailpoet_browser_preview_toggle {
-  flex: 0 1 auto;
-  height: 30px;
-  padding-bottom: 10px;
-  text-align: center;
+.mailpoet_popup .mailpoet_browser_preview_toggle {
+  position: absolute;
   top: -30px;
-  width: 100%;
-}
-
-.mailpoet_browser_preview_toggle > label {
-  display: inline-block;
-  margin: 0 5px;
-}
-
-.mailpoet_browser_preview_container {
-  border: 1px solid #979797;
-  border-radius: 20px;
-  box-sizing: border-box;
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  height: 100%;
-  margin: auto;
-  padding: 20px;
-  transition: width .5s;
-}
-
-.mailpoet_browser_preview_container_desktop {
-  width: 100%;
-}
-
-.mailpoet_browser_preview_container_mobile {
-  width: 350px;
-}
-
-.mailpoet_browser_preview_border {
-  border: 1px solid #c3c3c3;
-  box-sizing: border-box;
-  height: 100%;
-  width: 100%;
-}
-
-.mailpoet_browser_preview_iframe {
-  display: block;
-  margin: auto;
-  width: calc(100% - 1px);
 }

assets/js/src/common/preview.jsx

@@ -1,14 +1,37 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-
+import MailPoet from 'mailpoet';
 
 function Preview({
   children,
 }) {
+  const [checked, setChecked] = useState('desktop');
   return (
-    <>
+    <div className="mailpoet_browser_preview">
+      <div className="mailpoet_browser_preview_toggle">
+        <label>
+          <input
+            type="radio"
+            name="mailpoet_browser_preview_type"
+            className="mailpoet_browser_preview_type"
+            checked={checked === 'desktop'}
+            onChange={() => setChecked('desktop')}
+          />
+          {MailPoet.I18n.t('formPreviewDesktop')}
+        </label>
+        <label>
+          <input
+            type="radio"
+            name="mailpoet_browser_preview_type"
+            className="mailpoet_browser_preview_type"
+            checked={checked !== 'desktop'}
+            onChange={() => setChecked('mobile')}
+          />
+          {MailPoet.I18n.t('formPreviewMobile')}
+        </label>
+      </div>
       {children}
-    </>
+    </div>
   );
 }
 

assets/js/src/form_editor/components/preview.jsx

@@ -56,13 +56,13 @@ const FormPreview = () => {
       title={MailPoet.I18n.t('formPreview')}
       onRequestClose={onClose}
     >
-      <Preview>
       {form === null && (
         <div className="mailpoet_spinner_wrapper">
           <Spinner />
         </div>
       )}
       {form !== null && (
+        <Preview>
           <div>
             <style type="text/css">
               {'.mailpoet_hp_email_label { display: none }' }
@@ -74,8 +74,8 @@ const FormPreview = () => {
             </div>
             <div dangerouslySetInnerHTML={{ __html: form.html }} />
           </div>
-        )}
         </Preview>
+      )}
     </Modal>
   );
 };

views/form/editor.html

@@ -115,6 +115,8 @@
   'successMessage': __('This is what the success message looks like.'),
   'errorMessage': __('This is what the error message looks like.'),
   'formPreview': __('Form Preview'),
+  'formPreviewDesktop': _x('Desktop', 'Desktop browser preview mode'),
+  'formPreviewMobile': _x('Mobile', 'Mobile browser preview mode'),
   'giveFeedback': __('Give feedback.'),
 }) %>
 <% endblock %>