[IMP] website: make it more noticeable when a page is unpublished

Before this commit, 2 usability issues were reported:
1. Some people would get stuck with unpublished content without even knowing it
   since they would not understand the page is unpublished.
2. People would have a hard time finding the publish button (small toggle on
   the navbar).

Now:
1. We now display a red ribbon on the top right corner specifying the page is
   unpublished. Hopefully it can't be missed.
2. This publish button will be more visible for unpublished content since it
   will be red (danger) color. Hopefully people will notice it at first look.
   Note: It is implemented in a generic way so any 'o_switch' can be turned
   into this version by simply adding the 'o_switch_danger' class to it.

task-44005
Closes #23282

addons/web_editor/static/src/less/web_editor.ui.components.less

@@ -28,7 +28,7 @@
                 width: @o-switch-size - 0.2;
                 height: @o-switch-size - 0.2;
                 margin-top: 0.1ex;
-                margin-left: 0.3ex;
+                margin-left: 0.1ex;
                 border-radius: 100rem;
                 .transition(all 0.3s @o-we-md-ease);
                 box-shadow: 0 1px 1px darken(@o-switch-inactive-color,35%), inset 0 0 0 1px lighten(@o-switch-inactive-color,10%);
@@ -44,6 +44,14 @@
             }
         }
     }
+    &.o_switch_danger {
+        > input {
+            &:not(:checked) + span {
+                box-shadow: none;
+                .o-linear-gradient(0deg, lighten(@brand-danger, 5%), darken(@brand-danger, 5%));
+            }
+        }
+    }
 }
 
 .dropdown-menu label .o_switch {

addons/website/static/src/js/content/website_root.js

@@ -232,6 +232,7 @@ var WebsiteRoot = BodyManager.extend({
         })
         .done(function (result) {
             $data.toggleClass("css_unpublished css_published");
+            $(".ribbon-publish.ribbon-wrapper").toggleClass("css_unpublished css_published");
             $data.find('input').prop("checked", result);
             $data.parents("[data-publish]").attr("data-publish", +result ? 'on' : 'off');
         })

addons/website/static/src/less/website.ui.components.less

@@ -481,4 +481,37 @@ body .modal {
             opacity: 0.5;
         }
     }
-}
+}
+
+// Unpublished page's ribbon
+.ribbon-publish.ribbon-wrapper {
+    width: 200px;
+    height: 200px;
+    z-index: 5;
+    position: absolute;
+    right: 0;
+    overflow: hidden;
+    &.css_published {
+        display:none;
+    }
+    &.css_unpublished {
+        display:block;
+    }
+}
+.ribbon-publish .ribbon {
+    font: bold 15px Sans-Serif;
+    color: white;
+    text-align: center;
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    position: relative;
+    padding: 7px 65px;
+    right: 27px;
+    top: 44px;
+    width: 300px;
+    cursor: default;
+    white-space: unset;
+    word-wrap:break-word;
+}

addons/website/views/website_navbar_templates.xml

@@ -5,6 +5,11 @@
         <xpath expr="//t[@t-set='html_data']" position="after">
             <t t-set="body_classname" t-value="'o_connected_user' if env['ir.ui.view'].user_has_groups('base.group_user') else None"/>
         </xpath>
+        <xpath expr="//div[@id='wrapwrap']//header" position="after">
+            <div t-if="'website_published' in main_object.fields_get()" t-attf-class="ribbon-publish ribbon-wrapper #{main_object.website_published and 'css_published' or 'css_unpublished'}">
+                <div class="ribbon btn btn-danger">Unpublished</div>
+            </div>
+        </xpath>
         <xpath expr="//div[@id='wrapwrap']" position="before">
             <nav groups="base.group_user" t-if="website and menu_data" id="oe_main_menu_navbar" class="o_main_navbar">
                 <ul id="oe_applications">
@@ -61,7 +66,7 @@
                 <ul class="o_menu_systray hidden-xs" groups="website.group_website_publisher">
                     <li t-if="'website_published' in main_object.fields_get()" t-attf-class="js_publish_management #{main_object.website_published and 'css_published' or 'css_unpublished'}" t-att-data-id="main_object.id" t-att-data-object="main_object._name" t-att-data-controller="publish_controller">
                         <a>
-                            <label class="o_switch js_publish_btn" for="id" >
+                            <label class="o_switch o_switch_danger js_publish_btn" for="id" >
                                 <input type="checkbox" t-att-checked="main_object.website_published" id="id"/>
                                 <span/>
                                 <span class="css_publish">Unpublished</span>