Mobile preview (initial commit)

bzr revid: ddm@openerp.com-20130822085825-7mpsoi0nyujekg5f

4 files changed, 74 insertions, 2 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index d446d14f3bc..1ea42e3e445 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -1,3 +1,4 @@
+@charset "utf-8";
 .oe_hidden {
   display: none !important;
 }
@@ -144,3 +145,31 @@
 .oe_drop_zone.oe_hover:before {
   border-top: dashed 2px rgba(116, 255, 161, 0.72);
 }
+
+.oe_stop_scrolling {
+  height: 100%;
+  overflow: hidden;
+}
+
+#mobile-preview.modal {
+  height: 617px;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  max-width: 325px;
+  width: 325px;
+}
+
+#mobile-preview .modal-body {
+  max-height: 600px;
+  padding: 0;
+  margin: 0;
+}
+
+.oe_mobile_viewport {
+  width: 320px;
+  height: 568px;
+}
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index f7ce999257e..4b3a8e98a91 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -128,4 +128,26 @@
     &.oe_hover:before
         border-top: dashed 2px rgba(116, 255, 161, 0.72)
 
+.oe_stop_scrolling
+    height: 100%
+    overflow: hidden
+
+#mobile-preview.modal
+    height: 617px
+    margin: auto
+    position: absolute
+    top: 0
+    left: 0
+    bottom: 0
+    right: 0
+    max-width: 325px
+    width: 325px
+
+#mobile-preview .modal-body
+    max-height: 600px
+    padding: 0
+    margin: 0
 
+.oe_mobile_viewport
+    width: 320px
+    height: 568px
\ No newline at end of file
diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index 620eab2a16b..3b41dfcea20 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -45,6 +45,7 @@
             'click button[data-action=save]': 'save',
             'click button[data-action=cancel]': 'cancel',
             'click button[data-action=snippet]': 'snippet',
+            'click a[data-action=show-mobile-preview]': 'mobilePreview',
         },
         container: 'body',
         customize_setup: function() {
@@ -74,6 +75,9 @@
                     window.location.reload();
                 });
             });
+            $('#mobile-preview').on('hidden', function () {
+                $('body').removeClass('oe_stop_scrolling');
+            });
         },
         start: function() {
             var self = this;
@@ -192,6 +196,13 @@
         snippet: function (ev) {
             this.snippets.toggle();
         },
+        mobilePreview: function () {
+            $('body').addClass('oe_stop_scrolling');
+            // Firefox hack: document.getElementById("mobile-viewport").src = window.location.href + "?";
+            // TODO: disable scrollbar in iframe instead of forbidding scrolling
+            var iframeBody = $("#mobile-viewport").contents().find("body");
+            //iframeBody.css("overflow-y", "hidden");
+        },
     });
 
     /* ----- RICH TEXT EDITOR ---- */
diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml
index e6611121bb8..953f0153e3f 100644
--- a/addons/website/static/src/xml/website.xml
+++ b/addons/website/static/src/xml/website.xml
@@ -9,8 +9,7 @@
                 <button data-action="edit" class="btn btn-primary">Edit</button>
             </form>
             <ul class="nav pull-right">
-                <li class="active"><a href="#"><span class="icon-desktop"/></a></li>
-                <li><a href="#"><span class="icon-mobile-phone"/></a></li>
+                <li><a data-action="show-mobile-preview" href="#mobile-preview" data-toggle="modal" role="button"><span title="Mobile preview" class="icon-mobile-phone"/></a></li>
                 <li class="divider-vertical"></li>
                 <li><a href="#">Promote<!-- <sup><span class="badge">1</span></sup> --></a></li>
                 <li><a href="#">Translate</a></li>
@@ -39,6 +38,17 @@
         </div>
     </div>
 
+    <div id="mobile-preview" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="mobilePreview" aria-hidden="true">
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+            <h3 id="mobilePreview">Mobile preview</h3>
+        </div>
+        <div class="modal-body">
+            <div class="oe_mobile_preview">
+                <iframe id="mobile-viewport" class="oe_mobile_viewport" src="?mobile-preview=true"></iframe>
+            </div>
+        </div>
+    </div>
 
 </t>
 <t t-name="Website.ActionGroup">