[MERGE] forward port branch saas-13 up to 856476d

12 files changed, 415 insertions, 327 deletions

diff --git a/addons/website/static/src/js/website.backendDashboard.js b/addons/website/static/src/js/website.backendDashboard.js
index ee962e43e86..fe6e9541ac5 100644
--- a/addons/website/static/src/js/website.backendDashboard.js
+++ b/addons/website/static/src/js/website.backendDashboard.js
@@ -60,6 +60,7 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
             self.data = result;
             self.dashboards_data = result.dashboards;
             self.currency_id = result.currency_id;
+            self.groups = result.groups;
         });
     },
 
@@ -150,7 +151,9 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
     render_graphs: function() {
         var self = this;
         _.each(this.graphs, function(e) {
-            self.render_graph('#o_graph_' + e, self.dashboards_data[e].graph);
+            if (self.groups[e.group]) {
+                self.render_graph('#o_graph_' + e.name, self.dashboards_data[e.name].graph);
+            }
         });
         this.render_graph_analytics(this.dashboards_data.visits.ga_client_id);
     },
diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index 1b32a52de69..8873703d790 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -204,7 +204,7 @@ widget.LinkDialog.include({
     },
     fetch_pages: function (term) {
         return this.call('search_pages', [null, term], {
-            limit: 9,
+            limit: 100,
             context: base.get_context(),
         });
     },
diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index 1e2cf2ddb90..046da64ccf7 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -266,6 +266,9 @@ odoo.define('website.website', function (require) {
         }
     });
 
+    // enable magnify on zommable img
+    $('.zoomable img[data-zoom]').zoomOdoo();
+
     Dialog.include({
         init: function () {
             this._super.apply(this, arguments);
diff --git a/addons/website/static/src/js/website.snippets.animation.js b/addons/website/static/src/js/website.snippets.animation.js
index a278ed1196e..02ebc717ad9 100644
--- a/addons/website/static/src/js/website.snippets.animation.js
+++ b/addons/website/static/src/js/website.snippets.animation.js
@@ -45,55 +45,52 @@ animation.registry.slider = animation.Class.extend({
 
 animation.registry.parallax = animation.Class.extend({
     selector: ".parallax",
+
     start: function () {
-        var self = this;
-        setTimeout(function () {self.set_values();});
-        this.on_scroll = function () {
-            var speed = parseFloat(self.$target.attr("data-scroll-background-ratio") || 0);
-            if (speed == 1) return;
-            var offset = parseFloat(self.$target.attr("data-scroll-background-offset") || 0);
-            var top = offset + window.scrollY * speed;
-            self.$target.css("background-position", "0px " + top + "px");
-        };
-        this.on_resize = function () {
-            self.set_values();
-        };
-        $(window).on("scroll", this.on_scroll);
-        $(window).on("resize", this.on_resize);
+        _.defer((function () { this.set_values(); }).bind(this));
+        $(window).on("scroll.animation_parallax", _.throttle(this.on_scroll.bind(this), 10))
+                 .on("resize.animation_parallax", _.debounce(this.set_values.bind(this), 500));
+
+        return this._super.apply(this, arguments);
     },
     stop: function () {
-        $(window).off("scroll", this.on_scroll)
-                .off("resize", this.on_resize);
+        $(window).off(".animation_parallax");
     },
+
     set_values: function () {
         var self = this;
-        var speed = parseFloat(self.$target.attr("data-scroll-background-ratio") || 0);
+        this.speed = parseFloat(self.$target.attr("data-scroll-background-ratio") || 0);
+        this.offset = 0;
 
-        if (speed === 1 || this.$target.css("background-image") === "none") {
+        if (this.speed === 1 || this.$target.css("background-image") === "none") {
             this.$target.css("background-attachment", "fixed").css("background-position", "0px 0px");
             return;
-        } else {
-            this.$target.css("background-attachment", "scroll");
         }
 
-        this.$target.attr("data-scroll-background-offset", 0);
+        this.$target.css("background-attachment", "scroll");
+
         var img = new Image();
         img.onload = function () {
             var offset = 0;
             var padding =  parseInt($(document.body).css("padding-top"));
-            if (speed > 1) {
+            if (self.speed > 1) {
                 var inner_offset = - self.$target.outerHeight() + this.height / this.width * document.body.clientWidth;
                 var outer_offset = self.$target.offset().top - (document.body.clientHeight - self.$target.outerHeight()) - padding;
-                offset = - outer_offset * speed + inner_offset;
+                offset = - outer_offset * self.speed + inner_offset;
             } else {
-                offset = - self.$target.offset().top * speed;
+                offset = - self.$target.offset().top * self.speed;
             }
-            self.$target.attr("data-scroll-background-offset", offset > 0 ? 0 : offset);
-            $(window).scroll();
+            self.offset = offset > 0 ? 0 : offset;
+            self.on_scroll();
         };
         img.src = this.$target.css("background-image").replace(/url\(['"]*|['"]*\)/g, "");
-        $(window).scroll();
-    }
+    },
+
+    on_scroll: function () {
+        if (this.speed === 1) return;
+        var top = this.offset + window.scrollY * this.speed;
+        this.$target.css("background-position", "0px " + top + "px");
+    },
 });
 
 animation.registry.share = animation.Class.extend({
diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js
index 808c3b43614..cfd0b561778 100644
--- a/addons/website/static/src/js/website.snippets.editor.js
+++ b/addons/website/static/src/js/website.snippets.editor.js
@@ -6,6 +6,7 @@ var core = require("web.core");
 var Dialog = require("web.Dialog");
 var Model = require("web.Model");
 var editor = require("web_editor.editor");
+var animation = require('web_editor.snippets.animation');
 var options = require('web_editor.snippets.options');
 var snippet_editor = require('web_editor.snippet.editor');
 var website = require('website.website');
@@ -247,221 +248,6 @@ options.registry.carousel = options.registry.slider.extend({
     },
 });
 
-options.registry.marginAndResize = options.Class.extend({
-    preventChildPropagation: true,
-
-    start: function () {
-        var self = this;
-        this._super();
-
-        var resize_values = this.getSize();
-        if (resize_values.n) this.$overlay.find(".oe_handle.n").removeClass("readonly");
-        if (resize_values.s) this.$overlay.find(".oe_handle.s").removeClass("readonly");
-        if (resize_values.e) this.$overlay.find(".oe_handle.e").removeClass("readonly");
-        if (resize_values.w) this.$overlay.find(".oe_handle.w").removeClass("readonly");
-        if (resize_values.size) this.$overlay.find(".oe_handle.size").removeClass("readonly");
-
-        var $auto_size = this.$overlay.find(".oe_handle.size .auto_size");
-        var $fixed_size = this.$overlay.find(".oe_handle.size .size");
-
-        var auto_sized = isNaN(parseInt(self.$target.prop("style").height));
-        $fixed_size.toggleClass("active", !auto_sized);
-        $auto_size.toggleClass("active", auto_sized);
-
-        $fixed_size.add(this.$overlay.find(".oe_handle:not(.size)")).on('mousedown', function (event) {
-            event.preventDefault();
-
-            var $handle = $(this);
-
-            var resize_values = self.getSize();
-            var compass = false;
-            var XY = false;
-            if ($handle.hasClass('n')) {
-                compass = 'n';
-                XY = 'Y';
-            }
-            else if ($handle.hasClass('s')) {
-                compass = 's';
-                XY = 'Y';
-            }
-            else if ($handle.hasClass('e')) {
-                compass = 'e';
-                XY = 'X';
-            }
-            else if ($handle.hasClass('w')) {
-                compass = 'w';
-                XY = 'X';
-            }
-            else if ($handle.hasClass('size')) {
-                compass = 'size';
-                XY = 'Y';
-            }
-
-            var resize = resize_values[compass];
-            if (!resize) return;
-
-
-            if (compass === 'size') {
-                var offset = self.$target.offset().top;
-                if (self.$target.css("background").match(/rgba\(0, 0, 0, 0\)/)) {
-                    self.$target.addClass("resize_editor_busy");
-                }
-            } else {
-                var xy = event['page'+XY];
-                var current = resize[2] || 0;
-                var margin_dir = {s:'bottom', n: 'top', w: 'left', e: 'right'}[compass];
-                var real_margin = parseInt(self.$target.css('margin-'+margin_dir));
-                _.each(resize[0], function (val, key) {
-                    if (self.$target.hasClass(val)) {
-                        current = key;
-                    } else if (resize[1][key] === real_margin) {
-                        current = key;
-                    }
-                });
-                var begin = current;
-                var beginClass = self.$target.attr("class");
-                var regClass = new RegExp("\\s*" + resize[0][begin].replace(/[-]*[0-9]+/, '[-]*[0-9]+'), 'g');
-            }
-
-            self.buildingBlock.editor_busy = true;
-
-            var cursor = $handle.css("cursor")+'-important';
-            var $body = $(document.body);
-            $body.addClass(cursor);
-
-            var body_mousemove = function (event) {
-                event.preventDefault();
-                if (compass === 'size') {
-                    var dy = event.pageY-offset;
-                    dy = dy - dy%resize;
-                    if (dy <= 0) dy = resize;
-                    self.$target.css("height", dy+"px");
-                    self.$target.css("overflow", "hidden");
-                    self.on_resize(compass, null, dy);
-                    self.buildingBlock.cover_target(self.$overlay, self.$target);
-                    return;
-                }
-                var dd = event['page'+XY] - xy + resize[1][begin];
-                var next = current+1 === resize[1].length ? current : (current+1);
-                var prev = current ? (current-1) : 0;
-
-                var change = false;
-                if (dd > (2*resize[1][next] + resize[1][current])/3) {
-                    self.$target.attr("class", (self.$target.attr("class")||'').replace(regClass, ''));
-                    self.$target.addClass(resize[0][next]);
-                    current = next;
-                    change = true;
-                }
-                if (prev !== current && dd < (2*resize[1][prev] + resize[1][current])/3) {
-                    self.$target.attr("class", (self.$target.attr("class")||'').replace(regClass, ''));
-                    self.$target.addClass(resize[0][prev]);
-                    current = prev;
-                    change = true;
-                }
-
-                if (change) {
-                    self.on_resize(compass, beginClass, current);
-                    self.buildingBlock.cover_target(self.$overlay, self.$target);
-                }
-            };
-
-            var body_mouseup = function () {
-                $body.unbind('mousemove', body_mousemove);
-                $body.unbind('mouseup', body_mouseup);
-                $body.removeClass(cursor);
-                setTimeout(function () {
-                    self.buildingBlock.editor_busy = false;
-                    if (begin !== current) {
-                        self.buildingBlock.getParent().rte.historyRecordUndo(self.$target, 'resize_' + XY);
-                    }
-                },0);
-                self.$target.removeClass("resize_editor_busy");
-
-                if (compass === "size") {
-                    $fixed_size.addClass("active");
-                    $auto_size.removeClass("active");
-                }
-            };
-            $body.mousemove(body_mousemove);
-            $body.mouseup(body_mouseup);
-        });
-        $auto_size.on('click', function () {
-            self.$target.css("height", "");
-            self.$target.css("overflow", "");
-            self.buildingBlock.getParent().rte.historyRecordUndo(self.$target, 'resize_Y');
-            self.buildingBlock.cover_target(self.$overlay, self.$target);
-
-            $fixed_size.removeClass("active");
-            $auto_size.addClass("active");
-
-            return false;
-        });
-    },
-    getSize: function () {
-        this.grid = {};
-        return this.grid;
-    },
-
-    on_focus : function () {
-        this._super();
-        this.change_cursor();
-    },
-
-    change_cursor : function () {
-        var _class = this.$target.attr("class") || "";
-
-        var col = _class.match(/col-md-([0-9-]+)/i);
-        col = col ? +col[1] : 0;
-
-        var offset = _class.match(/col-md-offset-([0-9-]+)/i);
-        offset = offset ? +offset[1] : 0;
-
-        var overlay_class = this.$overlay.attr("class").replace(/(^|\s+)block-[^\s]*/gi, '');
-        if (col+offset >= 12) overlay_class+= " block-e-right";
-        if (col === 1) overlay_class+= " block-w-right block-e-left";
-        if (offset === 0) overlay_class+= " block-w-left";
-
-        var mb = _class.match(/mb([0-9-]+)/i);
-        mb = mb ? +mb[1] : parseInt(this.$target.css('margin-bottom'));
-        if (mb >= 128) overlay_class+= " block-s-bottom";
-        else if (!mb) overlay_class+= " block-s-top";
-
-        var mt = _class.match(/mt([0-9-]+)/i);
-        mt = mt ? +mt[1] : parseInt(this.$target.css('margin-top'));
-        if (mt >= 128) overlay_class+= " block-n-top";
-        else if (!mt) overlay_class+= " block-n-bottom";
-
-        this.$overlay.attr("class", overlay_class);
-    },
-
-    /* on_resize
-    *  called when the box is resizing and the class change, before the cover_target
-    *  @compass: resize direction : 'n', 's', 'e', 'w'
-    *  @beginClass: attributes class at the begin
-    *  @current: curent increment in this.grid
-    */
-    on_resize: function () {
-        this.change_cursor();
-    }
-});
-
-options.registry["margin-y"] = options.registry.marginAndResize.extend({
-    preventChildPropagation: true,
-
-    getSize: function () {
-        this.grid = this._super();
-        var grid = [0,4,8,16,32,48,64,92,128];
-        this.grid = {
-            // list of class (Array), grid (Array), default value (INT)
-            n: [_.map(grid, function (v) {return 'mt'+v;}), grid],
-            s: [_.map(grid, function (v) {return 'mb'+v;}), grid],
-            // INT if the user can resize the snippet (resizing per INT px)
-            size: null
-        };
-        return this.grid;
-    },
-});
-
 options.registry["margin-x"] = options.registry.marginAndResize.extend({
     preventChildPropagation: true,
 
@@ -477,34 +263,6 @@ options.registry["margin-x"] = options.registry.marginAndResize.extend({
 
         return this.grid;
     },
-    _drag_and_drop_after_insert_dropzone: function () {
-        var self = this;
-        $(".row:has(> .oe_drop_zone)").each(function () {
-            var $row = $(this);
-            var width = $row.innerWidth();
-            var pos = 0;
-            while (width > pos + self.size.width) {
-                var $last = $row.find("> .oe_drop_zone:last");
-                $last.each(function () {
-                    pos = $(this).position().left;
-                });
-                if (width > pos + self.size.width) {
-                    $row.append("<div class='col-md-1 oe_drop_to_remove'/>");
-                    var $add_drop = $last.clone();
-                    $row.append($add_drop);
-                    self._drag_and_drop_active_drop_zone($add_drop);
-                }
-            }
-        });
-    },
-    _drag_and_drop_start: function () {
-        this._super();
-        this.$target.attr("class",this.$target.attr("class").replace(/\s*(col-lg-offset-|col-md-offset-)([0-9-]+)/g, ''));
-    },
-    _drag_and_drop_stop: function () {
-        this.$target.addClass("col-md-offset-" + this.$target.prevAll(".oe_drop_to_remove").length);
-        this._super();
-    },
     on_clone: function ($clone) {
         var _class = $clone.attr("class").replace(/\s*(col-lg-offset-|col-md-offset-)([0-9-]+)/g, '');
         $clone.attr("class", _class);
@@ -535,55 +293,43 @@ options.registry["margin-x"] = options.registry.marginAndResize.extend({
     },
 });
 
-options.registry.resize = options.registry.marginAndResize.extend({
-    preventChildPropagation: true,
-
-    getSize: function () {
-        this.grid = this._super();
-        this.grid.size = 8;
-        return this.grid;
-    },
-});
-
 options.registry.parallax = options.Class.extend({
     getSize: function () {
-        this.grid = this._super();
+        this.grid = this._super.apply(this, arguments);
         this.grid.size = 8;
         return this.grid;
     },
     on_resize: function () {
+        this._refresh();
+    },
+    _refresh: function () {
         this.$target.data("snippet-view").set_values();
     },
-    start : function () {
-        var self = this;
-        this._super();
-        if (!self.$target.data("snippet-view")) {
+    start: function () {
+        this._super.apply(this, arguments);
+        if (!this.$target.data("snippet-view")) {
             this.$target.data("snippet-view", new animation.registry.parallax(this.$target));
         }
         this.scroll();
-        this.$target.on('snippet-option-change snippet-option-preview', function () {
-            self.$target.data("snippet-view").set_values();
-        });
-        this.$target.attr('contentEditable', 'false');
-
-        this.$target.find('> div > .oe_structure').attr('contentEditable', 'true'); // saas-3 retro-compatibility
-
-        this.$target.find('> div > div:not(.oe_structure) > .oe_structure').attr('contentEditable', 'true');
+        this.buildingBlock.$el.on("snippet-dropped snippet-activated", this._refresh.bind(this));
+        this.$target.on('snippet-option-change snippet-option-preview', this._refresh.bind(this));
     },
     scroll: function (type, value) {
-        this.$target.attr('data-scroll-background-ratio', value);
-        this.$target.data("snippet-view").set_values();
+        this.$target.attr("data-scroll-background-ratio", value);
+        this._refresh();
     },
     set_active: function () {
         this.$el.find('[data-scroll]').removeClass("active")
             .filter('[data-scroll="' + (this.$target.attr('data-scroll-background-ratio') || 0) + '"]').addClass("active");
     },
     clean_for_save: function () {
-        this._super();
-        this.$target.find(".parallax")
-            .css("background-position", '')
-            .removeAttr("data-scroll-background-offset");
-    }
+        this._super.apply(this, arguments);
+        this.$target.css("background-position", '').css("background-attachment", '');
+    },
+    on_move: function () {
+        this._super.apply(this, arguments);
+        this._refresh();
+    },
 });
 
 options.registry.ul = options.Class.extend({
diff --git a/addons/website/static/src/js/website.snippets.gallery.js b/addons/website/static/src/js/website.snippets.gallery.js
index ed1293229b8..481ba06e6f3 100644
--- a/addons/website/static/src/js/website.snippets.gallery.js
+++ b/addons/website/static/src/js/website.snippets.gallery.js
@@ -354,18 +354,12 @@ options.registry.gallery_img = options.Class.extend({
             editor.reapply();
         },0);
     },
-    remove: function (type) {
-        if (type !== "click") return;
-
-        var self = this;
+    on_remove: function () {
         var $parent = snippet_editor.globalSelector.closest(this.$target.parent());
-        this.buildingBlock.make_active(false);
-        this.$target.remove();
-        setTimeout(function () {
-            self.buildingBlock.make_active($parent);
-            var gallery = $parent.data('snippet-editor').styles.gallery;
-            gallery.reapply();
-        }, 0);
+        _.defer((function () {
+            this.buildingBlock.make_active($parent);
+            $parent.data('snippet-editor').styles.gallery.reapply();
+        }).bind(this));
     }
 });
 
diff --git a/addons/website/static/src/js/website.zoomodoo.js b/addons/website/static/src/js/website.zoomodoo.js
new file mode 100644
index 00000000000..54dc32bdde0
--- /dev/null
+++ b/addons/website/static/src/js/website.zoomodoo.js
@@ -0,0 +1,288 @@
+(function ($) {
+    /**
+        This code has been more that widely inspired by easyZoom library.
+
+        Copyright 2013 Matt Hinchliffe
+
+        Permission is hereby granted, free of charge, to any person obtaining
+        a copy of this software and associated documentation files (the
+        "Software"), to deal in the Software without restriction, including
+        without limitation the rights to use, copy, modify, merge, publish,
+        distribute, sublicense, and/or sell copies of the Software, and to
+        permit persons to whom the Software is furnished to do so, subject to
+        the following conditions:
+
+        The above copyright notice and this permission notice shall be
+        included in all copies or substantial portions of the Software.
+    **/
+
+    'use strict';
+
+    var dw, dh, rw, rh, lx, ly;
+
+    var defaults = {
+
+        // Attribute to retrieve the zoom image URL from.
+        linkTag: 'a',
+        linkAttribute: 'data-zoom-image',
+
+        // event to trigger zoom
+        event: 'click', //or mousenter
+
+        // Prevent clicks on the zoom image link.
+        preventClicks: true,
+
+        // Callback function to execute before the flyout is displayed.
+        beforeShow: $.noop,
+
+        // Callback function to execute before the flyout is removed.
+        beforeHide: $.noop,
+
+        // Callback function to execute when the flyout is displayed.
+        onShow: $.noop,
+
+        // Callback function to execute when the flyout is removed.
+        onHide: $.noop,
+
+        // Callback function to execute when the cursor is moved while over the image.
+        onMove: $.noop
+
+    };
+
+    /**
+     * ZoomOdoo
+     * @constructor
+     * @param {Object} target
+     * @param {Object} options (Optional)
+     */
+    function ZoomOdoo(target, options) {
+        this.$target = $(target);
+        this.opts = $.extend({}, defaults, options, this.$target.data());
+
+        if (this.isOpen === undefined) {
+            this._init();
+        }
+    }
+
+    /**
+     * Init
+     * @private
+     */
+    ZoomOdoo.prototype._init = function() {
+        this.$link  = this.$target.find(this.opts.linkTag).length && this.$target.find(this.opts.linkTag) || this.$target;
+        this.$image  = this.$target.find('img').length && this.$target.find('img') || this.$target;
+        this.$flyout = $('<div class="zoomodoo-flyout" />');
+
+        var $attach = this.$target;
+        if (this.opts.attach !== undefined && this.$target.parents(this.opts.attach).length) {
+            $attach = this.$target.parents(this.opts.attach);
+        }
+        $attach.parent().on('mousemove.zoomodoo touchmove.zoomodoo', $.proxy(this._onMove, this));
+        $attach.parent().on('mouseleave.zoomodoo touchend.zoomodoo', $.proxy(this._onLeave, this));
+        this.$target.parent().on(this.opts.event + '.zoomodoo touchstart.zoomodoo', $.proxy(this._onEnter, this));
+
+        if (this.opts.preventClicks) {
+            this.$target.on('click.zoomodoo', function(e) { e.preventDefault(); });
+        }
+    };
+
+    /**
+     * Show
+     * @param {MouseEvent|TouchEvent} e
+     * @param {Boolean} testMouseOver (Optional)
+     */
+    ZoomOdoo.prototype.show = function(e, testMouseOver) {
+        var w1, h1, w2, h2;
+        var self = this;
+
+        if (this.opts.beforeShow.call(this) === false) return;
+
+        if (!this.isReady) {
+            return this._loadImage(this.$link.attr(this.opts.linkAttribute), function() {
+                if (self.isMouseOver || !testMouseOver) {
+                    self.show(e);
+                }
+            });
+        }
+
+        var $attach = this.$target;
+        if (this.opts.attach !== undefined && this.$target.parents(this.opts.attach).length) {
+            $attach = this.$target.parents(this.opts.attach);
+        }
+        $attach.parent().append(this.$flyout);
+
+        w1 = this.$target.width();
+        h1 = this.$target.height();
+
+        w2 = this.$flyout.width();
+        h2 = this.$flyout.height();
+
+        dw = this.$zoom.width() - w2;
+        dh = this.$zoom.height() - h2;
+
+        // For the case where the zoom image is actually smaller than
+        // the flyout.
+        if (dw < 0) dw = 0;
+        if (dh < 0) dh = 0;
+
+        rw = dw / w1;
+        rh = dh / h1;
+
+        this.isOpen = true;
+
+        this.opts.onShow.call(this);
+
+        if (e) {
+            this._move(e);
+        }
+    };
+
+    /**
+     * On enter
+     * @private
+     * @param {Event} e
+     */
+    ZoomOdoo.prototype._onEnter = function(e) {
+        var touches = e.originalEvent.touches;
+
+        this.isMouseOver = true;
+
+        if (!touches || touches.length === 1) {
+            e.preventDefault();
+            this.show(e, true);
+        }
+    };
+
+    /**
+     * On move
+     * @private
+     * @param {Event} e
+     */
+    ZoomOdoo.prototype._onMove = function(e) {
+        if (!this.isOpen) return;
+
+        e.preventDefault();
+        this._move(e);
+    };
+
+    /**
+     * On leave
+     * @private
+     */
+    ZoomOdoo.prototype._onLeave = function() {
+        this.isMouseOver = false;
+        if (this.isOpen) {
+            this.hide();
+        }
+    };
+
+    /**
+     * On load
+     * @private
+     * @param {Event} e
+     */
+    ZoomOdoo.prototype._onLoad = function(e) {
+        // IE may fire a load event even on error so test the image dimensions
+        if (!e.currentTarget.width) return;
+
+        this.isReady = true;
+
+        this.$flyout.html(this.$zoom);
+
+        if (e.data.call) {
+            e.data();
+        }
+    };
+
+
+
+    /**
+     * Load image
+     * @private
+     * @param {String} href
+     * @param {Function} callback
+     */
+    ZoomOdoo.prototype._loadImage = function(href, callback) {
+        var zoom = new Image();
+
+        this.$zoom = $(zoom).on('load', callback, $.proxy(this._onLoad, this));
+
+        zoom.style.position = 'absolute';
+        zoom.src = href;
+    };
+
+    /**
+     * Move
+     * @private
+     * @param {Event} e
+     */
+    ZoomOdoo.prototype._move = function(e) {
+        if (e.type.indexOf('touch') === 0) {
+            var touchlist = e.touches || e.originalEvent.touches;
+            lx = touchlist[0].pageX;
+            ly = touchlist[0].pageY;
+        } else {
+            lx = e.pageX || lx;
+            ly = e.pageY || ly;
+        }
+
+        var offset  = this.$target.offset();
+        var pt = ly - offset.top;
+        var pl = lx - offset.left;
+        var xt = Math.ceil(pt * rh);
+        var xl = Math.ceil(pl * rw);
+
+        // Close if outside
+        if (xl < 0 || xt < 0 || xl > dw || xt > dh) {
+            this.hide();
+        } else {
+            var top = xt * -1;
+            var left = xl * -1;
+
+            this.$zoom.css({
+                top: top,
+                left: left
+            });
+
+            this.opts.onMove.call(this, top, left);
+        }
+
+    };
+
+    /**
+     * Hide
+     */
+    ZoomOdoo.prototype.hide = function() {
+        if (!this.isOpen) return;
+        if (this.opts.beforeHide.call(this) === false) return;
+
+        this.$flyout.detach();
+        this.isOpen = false;
+
+        this.opts.onHide.call(this);
+    };
+
+
+    // jQuery plugin wrapper
+    $.fn.zoomOdoo = function(options) {
+        return this.each(function() {
+            var api = $.data(this, 'zoomOdoo');
+
+            if (!api) {
+                $.data(this, 'zoomOdoo', new ZoomOdoo(this, options));
+            } else if (api.isOpen === undefined) {
+                api._init();
+            }
+        });
+    };
+
+    // AMD and CommonJS module compatibility
+    if (typeof define === 'function' && define.amd){
+        define(function() {
+            return ZoomOdoo;
+        });
+    } else if (typeof module !== 'undefined' && module.exports) {
+        module.exports = ZoomOdoo;
+    }
+
+})(jQuery);
diff --git a/addons/website/static/src/less/website.backendDashboard.less b/addons/website/static/src/less/website.backendDashboard.less
index faef016c415..8c2c4737a3a 100644
--- a/addons/website/static/src/less/website.backendDashboard.less
+++ b/addons/website/static/src/less/website.backendDashboard.less
@@ -185,7 +185,6 @@
             }
 
             .ActiveUsers-value {
-              display: inline-block;
               font-weight: 300;
               margin-right: -.25em;
             }
diff --git a/addons/website/static/src/less/website.edit_mode.less b/addons/website/static/src/less/website.edit_mode.less
index c5a3bee10c2..0b32fab2c33 100644
--- a/addons/website/static/src/less/website.edit_mode.less
+++ b/addons/website/static/src/less/website.edit_mode.less
@@ -103,3 +103,13 @@ table.editorbar-panel {
 .note-editable .fa {
     cursor: pointer;
 }
+
+// parallax dropzones are in conflict with outside of parallax dropzones
+.parallax > .oe_structure > .oe_drop_zone {
+    &:first-child {
+        top: 16px;
+    }
+    &:last-child {
+        bottom: 16px;
+    }
+}
diff --git a/addons/website/static/src/less/website.snippets.less b/addons/website/static/src/less/website.snippets.less
index 098990e3b4c..1c16053b017 100644
--- a/addons/website/static/src/less/website.snippets.less
+++ b/addons/website/static/src/less/website.snippets.less
@@ -392,16 +392,28 @@ div.carousel {
 }
 
 .parallax {
-    background-size: cover;
-    > div {
-        position: relative;
-        display: table;
+    position: relative;
+    min-height: 200px;
+
+    &::before {
+        content: "";
+        display: inline-block;
+        width: 0;
+        min-height: inherit;
+        height: 100%;
+        vertical-align: middle;
+    }
+
+    > .oe_structure {
+        display: inline-block;
         width: 100%;
-        min-height: 200px;
-        > div {
-            display: table-cell;
-            vertical-align: middle;
-            padding: 32px 0;
+        vertical-align: middle;
+
+        > :first-child {
+            margin-top: 32px;
+        }
+        > :last-child {
+            margin-bottom: 32px;
         }
     }
 }
diff --git a/addons/website/static/src/less/website.zoomodoo.less b/addons/website/static/src/less/website.zoomodoo.less
new file mode 100644
index 00000000000..da90921b1c2
--- /dev/null
+++ b/addons/website/static/src/less/website.zoomodoo.less
@@ -0,0 +1,35 @@
+
+.zoomodoo {
+    position: relative;
+
+    /* 'Shrink-wrap' the element */
+    display: inline-block;
+    *display: inline;
+    *zoom: 1;
+
+    img {
+        vertical-align: bottom;
+    }
+}
+
+.zoomodoo-flyout {
+    position:absolute;
+    z-index: 100;
+    overflow: hidden;
+    background: #FFF;
+}
+
+.zoomodoo-hover .zoomodoo-flyout {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.zoomodoo-next .zoomodoo-flyout {
+    top: 0;
+    left: 100%;
+    width: 100%;
+    height: 100%;
+    margin-left: 20px;
+}
\ No newline at end of file
diff --git a/addons/website/static/src/xml/website.backend.xml b/addons/website/static/src/xml/website.backend.xml
index 55c9c7803ad..e2f27f7de6e 100644
--- a/addons/website/static/src/xml/website.backend.xml
+++ b/addons/website/static/src/xml/website.backend.xml
@@ -18,15 +18,16 @@
                 <h2>Visits</h2>
                 <div t-if="widget.dashboards_data.visits &amp;&amp; widget.dashboards_data.visits.ga_client_id">
                     <div class="row js_analytics_components"/>
-                    <a href="#" class="js_link_analytics_settings">Edit my Analytics Client ID</a>
+                    <a href="#" t-if="widget.groups.system" class="js_link_analytics_settings">Edit my Analytics Client ID</a>
                 </div>
                 <div t-if="!(widget.dashboards_data.visits &amp;&amp; widget.dashboards_data.visits.ga_client_id)" class="col-md-12">
                     <div class="o_demo_background">
                         <div class="o_layer">
                         </div>
                         <div class="o_buttons text-center">
-                            <h3>Currently there is no data available.</h3>
-                            <button class="btn btn-sm btn-primary js_link_analytics_settings center-block mb8">Link my Analytics Account</button>
+                            <h3>There is no data currently available.</h3>
+                            <button t-if="widget.groups.system" class="btn btn-sm btn-primary js_link_analytics_settings center-block mb8">Link my Analytics Account</button>
+                            <h5 t-if="!widget.groups.system">You do not have sufficient access rights to configure the Google Analytics account.</h5>
                         </div>
                     </div>
                 </div>