1 files changed, 17 insertions, 28 deletions

diff --git a/addons/website/static/src/js/theme_preview_form.js b/addons/website/static/src/js/theme_preview_form.js
index 76ce0f3f9f8..a271457267d 100644
--- a/addons/website/static/src/js/theme_preview_form.js
+++ b/addons/website/static/src/js/theme_preview_form.js
@@ -5,14 +5,13 @@ var FormController = require('web.FormController');
 var FormView = require('web.FormView');
 var viewRegistry = require('web.view_registry');
 var core = require('web.core');
-var _t = core._t;
 var qweb = core.qweb;
 
 var ThemePreviewController = FormController.extend({
     events: Object.assign({}, FormController.prototype.events, {
         'click .o_use_theme': '_onUseThemeClick',
         'click .o_switch_theme': '_onSwitchThemeClick',
-        'click .o_switch_mode_button': '_onSwitchButtonClick',
+        'change input[name="viewer"]': '_onSwitchButtonChange',
     }),
     /**
      * @override
@@ -28,53 +27,43 @@ var ThemePreviewController = FormController.extend({
     /**
      * @override
      */
-    autofocus: function () {
-        // force refresh label of button switch
-        this.$switchButton = this._renderSwitchButton();
-        $('.o_switch_mode_button').replaceWith(this.$switchButton);
-        this._super.apply(this, arguments);
-    },
-     /**
-     * @override
-     */
     renderButtons: function ($node) {
         var $previewButton = $(qweb.render('website.ThemePreview.Buttons'));
         $node.html($previewButton);
-        this.$switchButton = this._renderSwitchButton();
-        $node.find('.o_switch_mode_button').replaceWith(this.$switchButton);
     },
-
     // -------------------------------------------------------------------------
     // Private
     // -------------------------------------------------------------------------
-     /**
-     * Return jQuery Element button 'Switch Mode' with correct labelling.
+    /**
+     * Add Switcher View Mobile / Desktop near pager
      *
      * @private
      */
-    _renderSwitchButton: function () {
-        var isMobile = !!this.$('.is_mobile').length;
-        return $(qweb.render('website.ThemePreview.SwitchModeButton', {
-            'icon': isMobile ? 'fa-desktop' : 'fa-refresh',
-            'PreviewType': isMobile ? _t('Desktop') : _t('Mobile'),
-        }));
+    _updatePager: function () {
+        this._super(...arguments);
+
+        const $buttonSwitch = $(qweb.render('website.ThemePreview.SwitchModeButton'));
+        if (!this.$switcherButton) {
+            $buttonSwitch.appendTo(this.pager.$el);
+        } else {
+            this.$switcherButton.replaceWith($buttonSwitch);
+        }
+        this.$switcherButton = $buttonSwitch;
     },
+
     // -------------------------------------------------------------------------
     // Handlers
     // -------------------------------------------------------------------------
     /**
-     * Handler called when user click on 'Desktop/Mobile preview' button in forw view.
+     * Handler called when user click on 'Desktop/Mobile' switcher button.
      *
      * @private
      */
-    _onSwitchButtonClick: function () {
+    _onSwitchButtonChange: function () {
         this.$('.o_preview_frame').toggleClass('is_mobile');
-        const $switchButton = this.$switchButton;
-        this.$switchButton = this._renderSwitchButton();
-        $switchButton.replaceWith(this.$switchButton);
     },
     /**
-     * Handler called when user click on 'Choose another theme' button in forw view.
+     * Handler called when user click on 'Choose another theme' button.
      *
      * @private
      */