2 files changed, 25 insertions, 33 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
      */
diff --git a/addons/website/static/src/xml/theme_preview.xml b/addons/website/static/src/xml/theme_preview.xml
index 87ef87507d0..aaf44620ac1 100644
--- a/addons/website/static/src/xml/theme_preview.xml
+++ b/addons/website/static/src/xml/theme_preview.xml
@@ -9,16 +9,19 @@
                 <button class="btn btn-link o_switch_theme">
                     Choose another theme
                 </button>
-                <button class="o_switch_mode_button"></button>
             </div>
         </div>
     </t>
 
     <t t-name="website.ThemePreview.SwitchModeButton">
-        <button class="o_switch_mode_button btn btn-light d-none d-md-inline">
-            <i t-attf-class="fa #{icon or 'fa-refresh'} mr-1"></i>
-            <t t-esc="PreviewType"/> Preview
-        </button>
+        <div class="btn-group btn-group-toggle ml-1" data-toggle="buttons">
+            <label class="btn btn-secondary active">
+                <input type="radio" name="viewer" data-mode='desktop' autocomplete="off" checked='checked'/> Desktop
+            </label>
+            <label class="btn btn-secondary">
+                <input type="radio" name="viewer" data-mode='mobile' autocomplete="off"/> Mobile
+            </label>
+        </div>
     </t>
     <t t-name="website.ThemePreview.Loader">
         <div class="o_theme_install_loader_container position-fixed fixed-top fixed-left h-100 w-100 bg-white d-flex justify-content-center align-items-center">