[IMP] website, *: improve published smart button

* = web, website_blog, website_crm_partner_assign, website_event,
website_event_track, website_forum, website_hr_recruitment,
website_livechat, website_partner, website_profile, website_sale,
website_sale_delivery, website_slides

The published button name is a bit ambiguous, now it will clearly state
what it does with a new title : "Go to Website". The "Published",
"Unpublished" state is shown with the globe icon changing color
(green and red) and a title on the button.

Badge and Delivery don't have a website page, the button will then be
a publish/unpublish button in the backend.

task-2002435

closes odoo/odoo#34261

Signed-off-by: Xavier Morel (xmo) <xmo@odoo.com>

3 files changed, 101 insertions, 25 deletions

diff --git a/addons/website/static/src/js/backend/button.js b/addons/website/static/src/js/backend/button.js
index 0f6ea22cb7f..23be7708e5b 100644
--- a/addons/website/static/src/js/backend/button.js
+++ b/addons/website/static/src/js/backend/button.js
@@ -7,14 +7,17 @@ var field_registry = require('web.field_registry');
 
 var _t = core._t;
 
-var WidgetWebsiteButton = AbstractField.extend({
-    template: 'WidgetWebsiteButton',
+var WebsitePublishButton = AbstractField.extend({
+    className: 'o_stat_info',
+    supportedFieldTypes: ['boolean'],
 
     //--------------------------------------------------------------------------
     // Public
     //--------------------------------------------------------------------------
 
     /**
+     * A boolean field is always set since false is a valid value.
+     *
      * @override
      */
     isSet: function () {
@@ -26,19 +29,89 @@ var WidgetWebsiteButton = AbstractField.extend({
     //--------------------------------------------------------------------------
 
     /**
+     * This widget is supposed to be used inside a stat button and, as such, is
+     * rendered the same way in edit and readonly mode.
+     *
      * @override
      * @private
      */
     _render: function () {
+        this.$el.empty();
+        var text = this.value ? _t("Published") : _t("Unpublished");
+        var hover = this.value ? _t("Unpublish") : _t("Publish");
+        var valColor = this.value ? 'text-success' : 'text-danger';
+        var hoverColor = this.value ? 'text-danger' : 'text-success';
+        var $val = $('<span>').addClass('o_stat_text o_not_hover ' + valColor).text(text);
+        var $hover = $('<span>').addClass('o_stat_text o_hover ' + hoverColor).text(hover);
+        this.$el.append($val).append($hover);
+    },
+});
+
+var WidgetWebsiteButtonIcon = AbstractField.extend({
+    template: 'WidgetWebsiteButtonIcon',
+    events: {
+        'click': '_onClick',
+    },
+
+    /**
+    * @override
+    */
+    start: function () {
+        this.$icon = this.$('.o_button_icon');
+        return this._super.apply(this, arguments);
+    },
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    isSet: function () {
+        return true;
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    _render: function () {
         this._super.apply(this, arguments);
 
-        var $value = this.$('.o_value');
-        var published = (this.value === true);
-        $value.html(published ? _t("Published") : _t("Unpublished"))
-              .toggleClass('text-danger', !published)
-              .toggleClass('text-success', published);
+        var published = this.value;
+        var info = published ? _t("Published") : _t("Unpublished");
+        this.$el.attr('aria-label', info)
+                .prop('title', info);
+        this.$icon.toggleClass('text-danger', !published)
+                .toggleClass('text-success', published);
+    },
+
+    //--------------------------------------------------------------------------
+    // Handler
+    //--------------------------------------------------------------------------
+
+    /**
+     * Redirects to the website page of the record.
+     *
+     * @private
+     */
+    _onClick: function () {
+        var self = this;
+        this._rpc({
+            model: this.model,
+            method: 'open_website_url',
+            args: [this.res_id],
+        }).then(function (result) {
+            self.do_action(result);
+        });
     },
 });
 
-field_registry.add('website_button', WidgetWebsiteButton);
+field_registry
+    .add('website_redirect_button', WidgetWebsiteButtonIcon)
+    .add('website_publish_button', WebsitePublishButton);
 });
diff --git a/addons/website/static/src/xml/website.backend.xml b/addons/website/static/src/xml/website.backend.xml
index 25745afb6b8..1063de39fed 100644
--- a/addons/website/static/src/xml/website.backend.xml
+++ b/addons/website/static/src/xml/website.backend.xml
@@ -5,6 +5,15 @@
         <span class="o_stat_text">On Website</span>
     </div>
 
+    <t t-name="WidgetWebsiteButtonIcon">
+        <button type="button" class="btn oe_stat_button">
+            <i class="fa fa-fw o_button_icon fa-globe"/>
+            <div class="o_stat_info">
+                <span class="o_stat_text">Go to<br/>Website</span>
+            </div>
+        </button>
+    </t>
+
     <t t-name="website.WebsiteDashboardMain">
         <div class="o_dashboards">
             <div class="container-fluid o_website_dashboard">
diff --git a/addons/website/static/tests/website_tests.js b/addons/website/static/tests/website_tests.js
index cd7d14a68a3..8d43100b9d5 100644
--- a/addons/website/static/tests/website_tests.js
+++ b/addons/website/static/tests/website_tests.js
@@ -31,22 +31,19 @@ QUnit.module('website', {
             View: FormView,
             model: 'blog_post',
             data: this.data,
-            arch:
-                '<form>' +
+            arch: '<form>' +
                     '<sheet>' +
                         '<div class="oe_button_box" name="button_box">' +
-                            '<button class="oe_stat_button" name="website_publish_button" type="object" icon="fa-globe">' +
-                                '<field name="website_published" widget="website_button"/>' +
-                            '</button>' +
+                            '<field name="website_published" widget="website_redirect_button"/>' +
                         '</div>' +
                     '</sheet>' +
                 '</form>',
             res_id: 1,
         });
-        var selector = '.oe_button_box .oe_stat_button .o_stat_info[name="website_published"] .o_stat_text';
-        assert.containsN(form, selector, 2, "there should be two texts displayed");
-        selector = '.oe_button_box .oe_stat_button .o_stat_info[name="website_published"] .o_stat_text.o_value.text-danger';
-        assert.containsOnce(form, selector, "there should be one text in red");
+        var selector = '.oe_button_box .oe_stat_button[name="website_published"] .o_stat_text';
+        assert.containsN(form, selector, 1, "there should be one text displayed");
+        selector = '.oe_button_box .oe_stat_button[name="website_published"] .o_button_icon.fa-globe.text-danger';
+        assert.containsOnce(form, selector, "there should be one icon in red");
         form.destroy();
     });
     QUnit.test("widget website button: display true value", async function (assert) {
@@ -56,21 +53,18 @@ QUnit.module('website', {
             View: FormView,
             model: 'blog_post',
             data: this.data,
-            arch:
-                '<form>' +
+            arch: '<form>' +
                     '<sheet>' +
                         '<div class="oe_button_box" name="button_box">' +
-                            '<button class="oe_stat_button" name="website_publish_button" type="object" icon="fa-globe">' +
-                                '<field name="website_published" widget="website_button"/>' +
-                            '</button>' +
+                            '<field name="website_published" widget="website_redirect_button"/>' +
                         '</div>' +
                     '</sheet>' +
                 '</form>',
             res_id: 2,
         });
-        var selector = '.oe_button_box .oe_stat_button .o_stat_info[name="website_published"] .o_stat_text';
-        assert.containsN(form, selector, 2, "should be two texts displayed");
-        selector = '.oe_button_box .oe_stat_button .o_stat_info[name="website_published"] .o_stat_text.o_value.text-success';
+        var selector = '.oe_button_box .oe_stat_button[name="website_published"] .o_stat_text';
+        assert.containsN(form, selector, 1, "should be one text displayed");
+        selector = '.oe_button_box .oe_stat_button[name="website_published"] .o_button_icon.fa-globe.text-success';
         assert.containsOnce(form, selector, "there should be one text in green");
         form.destroy();
     });