Add mobile preview mode [MAILPOET-1583]

assets/css/src/newsletter_editor/components/sidebar.styl

@@ -126,3 +126,34 @@ $widget-icon-width = 30px
 
     .mailpoet_widget_title
       display: none
+
+/* Browser preview modal */
+.mailpoet_browser_preview_toggle
+  height: 30px
+  padding: 10px 0
+  text-align: center
+
+.mailpoet_browser_preview_toggle > label
+  display: inline-block
+  margin: 0 5px
+
+.mailpoet_browser_preview_container
+  margin: auto
+  height: calc(100% - 60px)
+  transition: width 0.5s
+  border: 20px solid white
+  border-radius: 20px
+  box-sizing: border-box
+  -moz-box-sizing: border-box
+  -webkit-box-sizing: border-box
+  background: white
+  padding: 15px 0
+
+.mailpoet_browser_preview_container_desktop
+  width: 100%
+
+.mailpoet_browser_preview_container_mobile
+  width: 350px
+
+.mailpoet_browser_preview_iframe
+  border: 1px solid #c3c3c3

assets/js/src/newsletter_editor/components/sidebar.js

@@ -345,6 +345,11 @@ define([
 
   Module.NewsletterPreviewView = Marionette.View.extend({
     getTemplate: function () { return window.templates.newsletterPreview; },
+    events: function () {
+      return {
+        'change .mailpoet_browser_preview_type': 'changeBrowserPreviewType'
+      };
+    },
     initialize: function (options) {
       this.previewUrl = options.previewUrl;
       this.width = '100%';
@@ -358,6 +363,17 @@ define([
         width: this.width,
         height: this.height
       };
+    },
+    changeBrowserPreviewType: function (event) {
+      var value = jQuery(event.target).val();
+
+      if (value === 'mobile') {
+        this.$('.mailpoet_browser_preview_container').removeClass('mailpoet_browser_preview_container_desktop');
+        this.$('.mailpoet_browser_preview_container').addClass('mailpoet_browser_preview_container_mobile');
+      } else {
+        this.$('.mailpoet_browser_preview_container').addClass('mailpoet_browser_preview_container_desktop');
+        this.$('.mailpoet_browser_preview_container').removeClass('mailpoet_browser_preview_container_mobile');
+      }
     }
   });
 

views/newsletter/templates/components/newsletterPreview.hbs

@@ -1 +1,11 @@
-<iframe src="{{ previewUrl }}" width="{{ width }}" height="{{ height }}"></iframe>
+<div class="mailpoet_browser_preview_toggle">
+  <label>
+    <input type="radio" name="mailpoet_browser_preview_type" class="mailpoet_browser_preview_type" value="desktop" checked="checked" /><%= _x('Desktop', 'Desktop browser preview mode') %>
+  </label>
+  <label>
+    <input type="radio" name="mailpoet_browser_preview_type" class="mailpoet_browser_preview_type" value="mobile" /><%= _x('Mobile', 'Mobile browser preview mode') %>
+  </label>
+</div>
+<div class="mailpoet_browser_preview_container mailpoet_browser_preview_container_desktop">
+  <iframe class="mailpoet_browser_preview_iframe" src="{{ previewUrl }}" width="{{ width }}" height="{{ height }}"></iframe>
+</div>