From 53724aa3cc38043e1362b32e6be85c683404efe1 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Fri, 16 Sep 2022 09:25:00 +0000
Subject: [PATCH] [IMP] website: review frontend mini UI "Edit" button

The mini UI on the frontend as a connected backend user was a bit
confusing: the "Edit" button used the exact same design and wording as
the "Edit" button in the backend but it had not the same effect as it
did not enter edit mode but just redirected the user to the website
preview (client action iframe).

We still want the same behavior, we just needed another button design:

- Change the label from "Edit" to "Editor".

- Change the "pencil" fa icon with the website app icon (same as app
  switcher in enterprise).

- Use a dark color instead of the primary color. This reuses a dark
  color of the website edit mode.

closes odoo/odoo#100355

Signed-off-by: Romain Derie (rde) <rde@odoo.com>
---
 addons/website/static/src/scss/website.ui.scss | 8 +++++++-
 addons/website/views/website_templates.xml     | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss
index 98985f729e4..399128bee8d 100644
--- a/addons/website/static/src/scss/website.ui.scss
+++ b/addons/website/static/src/scss/website.ui.scss
@@ -45,7 +45,7 @@ $-mini-nav-size: 40px;
         overflow: auto;
     }
 
-    @each $-name, $-color in ('edit': $o-enterprise-primary-color, 'apps': $o-enterprise-color) {
+    @each $-name, $-color in ('apps': $o-enterprise-color, 'edit': $o-we-bg-lighter) {
         .o_frontend_to_backend_#{$-name}_btn {
             background-color: $-color;
 
@@ -55,6 +55,12 @@ $-mini-nav-size: 40px;
         }
     }
 
+    .o_frontend_to_backend_edit_btn > img {
+        height: 1.8em;
+        margin-right: 0.5em;
+        border-radius: 0.25rem;
+    }
+
     &:hover {
         &:before, .o_frontend_to_backend_icon {
             transform: scale(.3);
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 9a0f493ac2e..b22195fa04a 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -192,7 +192,7 @@
                        t-attf-href="/web#menu_id=#{menu['id']}&amp;action=#{menu['action'] and menu['action'].split(',')[1] or ''}"/>
                 </div>
                 <a groups="website.group_website_restricted_editor" href="#" title="Edit this content" class="o_frontend_to_backend_edit_btn px-3 d-flex align-items-center justify-content-center text-decoration-none">
-                    <i class="fa fa-pencil me-1"/>Edit
+                    <img src="/website/static/description/icon.png"/>Editor
                 </a>
             </div>
         </div>