From 94cb7ba07df2eb01733c177365079898121c4eed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrien=20Dieudonn=C3=A9?= <adr@odoo.com>
Date: Thu, 1 Dec 2022 10:25:57 +0000
Subject: [PATCH] [FIX] web: status indicator next to the breadcrumb
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before this fix, the '.o_form_status_indicator' was in the right
part of the control panel.
But on desktop, we want it next to the last breadcrumb item
to cognitively attach the "save status" to the record name.

closes odoo/odoo#107397

Task-id: 3067691
X-original-commit: 24b098767b03c97ffe108a7f8aa0f77c08aecef5
Signed-off-by: Pierre Paridans (app) <app@odoo.com>
Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
---
 .../static/src/scss/primary_variables.scss    |  2 ++
 .../search/control_panel/control_panel.scss   | 22 +++++++++++++------
 .../search/control_panel/control_panel.xml    |  5 +++--
 .../form/control_panel/form_control_panel.xml |  4 +++-
 .../static/src/views/form/form_controller.xml |  1 -
 .../form_status_indicator.xml                 |  6 ++---
 .../settings_form_view/settings_form_view.xml |  1 +
 .../tests/views/form/form_view_tests.js       |  6 +++--
 8 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss
index 7bfee4e6c22..9fe7392ad85 100644
--- a/addons/web/static/src/scss/primary_variables.scss
+++ b/addons/web/static/src/scss/primary_variables.scss
@@ -163,6 +163,8 @@ $o-base-settings-mobile-tabs-overflow-gap: 3% !default;
 
 $o-cp-breadcrumb-height: 30px !default;
 
+$o-cp-button-sm-no-border-padding: 0.4rem;
+
 $o-datepicker-week-color: #8f8f8f !default;
 
 $o-card-body-bg-opacity: 0.9 !default;
diff --git a/addons/web/static/src/search/control_panel/control_panel.scss b/addons/web/static/src/search/control_panel/control_panel.scss
index 9219fee138e..72e19f3fbaa 100644
--- a/addons/web/static/src/search/control_panel/control_panel.scss
+++ b/addons/web/static/src/search/control_panel/control_panel.scss
@@ -80,7 +80,7 @@
 
     .breadcrumb {
         font-size: 18px;
-        max-width: 100%;
+        min-width: 0;
 
         > li {
             @include o-text-overflow();
@@ -114,7 +114,7 @@
                     }
 
                     &.btn {
-                        padding: 0.4rem;
+                        padding: $o-cp-button-sm-no-border-padding;
                     }
 
                     > a {
@@ -192,11 +192,19 @@
     .o_cp_bottom_right {
         display: flex;
         flex-wrap: wrap;
-        justify-content: flex-end;
-        align-items: flex-start;
-        column-gap: $o-horizontal-padding;
-        @include media-breakpoint-down(md) {
-            align-items: center;
+        justify-content: space-between;
+        align-items: center;
+
+        @include media-breakpoint-up(md) {
+            column-gap: $o-horizontal-padding;
+        }
+
+        > .o_form_status_indicator {
+            @include media-breakpoint-down(md) {
+                .o_form_status_indicator_buttons > .btn {
+                    padding: $o-cp-button-sm-no-border-padding;
+                }
+            }
         }
 
         > .o_cp_pager {
diff --git a/addons/web/static/src/search/control_panel/control_panel.xml b/addons/web/static/src/search/control_panel/control_panel.xml
index 75c1fc0f003..330c5d04afb 100644
--- a/addons/web/static/src/search/control_panel/control_panel.xml
+++ b/addons/web/static/src/search/control_panel/control_panel.xml
@@ -180,9 +180,10 @@
                         <em t-else="" class="text-warning">Unnamed</em>
                     </a>
                 </li>
-                <li t-else="" class="breadcrumb-item active">
-                    <t t-if="breadcrumb.name" t-esc="breadcrumb.name"/>
+                <li t-else="" class="breadcrumb-item active d-flex align-items-center">
+                    <span class="text-truncate" t-if="breadcrumb.name" t-esc="breadcrumb.name"/>
                     <em t-else="" class="text-warning">Unnamed</em>
+                    <t t-slot="control-panel-status-indicator" />
                 </li>
             </t>
         </ol>
diff --git a/addons/web/static/src/views/form/control_panel/form_control_panel.xml b/addons/web/static/src/views/form/control_panel/form_control_panel.xml
index fc1ba5067b9..1b20b95cbc4 100644
--- a/addons/web/static/src/views/form/control_panel/form_control_panel.xml
+++ b/addons/web/static/src/views/form/control_panel/form_control_panel.xml
@@ -17,7 +17,9 @@
                     </t>
                 </div>
                 <div class="o_cp_bottom_right w-auto flex-shrink-0">
-                    <t t-slot="control-panel-status-indicator" />
+                    <t t-if="env.isSmall">
+                        <t t-slot="control-panel-status-indicator" />
+                    </t>
                     <t t-slot="control-panel-action-menu" t-if="display['bottom-left']"/>
                     <div t-if="pagerProps and pagerProps.total > 0" class="o_cp_pager" role="search">
                         <Pager t-props="pagerProps"/>
diff --git a/addons/web/static/src/views/form/form_controller.xml b/addons/web/static/src/views/form/form_controller.xml
index a8f00f4047d..dcaadc930ea 100644
--- a/addons/web/static/src/views/form/form_controller.xml
+++ b/addons/web/static/src/views/form/form_controller.xml
@@ -25,7 +25,6 @@
                                 onActionExecuted="() => model.load({ resId: model.root.resId, resIds: model.root.resIds })"
                                 shouldExecuteAction.bind="shouldExecuteAction"
                             />
-                            <span class="border-start d-none d-md-inline-block"/>
                         </t>
                     </t>
                     <t t-set-slot="control-panel-status-indicator">
diff --git a/addons/web/static/src/views/form/form_status_indicator/form_status_indicator.xml b/addons/web/static/src/views/form/form_status_indicator/form_status_indicator.xml
index 3bb05bf40c7..f2d595704a6 100644
--- a/addons/web/static/src/views/form/form_status_indicator/form_status_indicator.xml
+++ b/addons/web/static/src/views/form/form_status_indicator/form_status_indicator.xml
@@ -2,11 +2,11 @@
 <templates xml:space="preserve">
 
     <t t-name="web.FormStatusIndicator" owl="1">
-        <div class="o_form_status_indicator" t-att-class="{ o_form_status_indicator_new_record: props.model.root.isVirtual }">
+        <div class="o_form_status_indicator ms-md-1" t-att-class="{ o_form_status_indicator_new_record: props.model.root.isVirtual }">
             <div class="o_form_status_indicator_buttons d-flex" t-att-class="{ invisible: !(props.model.root.isVirtual or displayButtons) }">
                 <button
                     type="button"
-                    class="o_form_button_save btn btn-light"
+                    class="o_form_button_save btn btn-light py-0"
                     t-att-disabled="props.isDisabled"
                     data-hotkey="s"
                     t-on-click.stop="save"
@@ -16,7 +16,7 @@
                 </button>
                 <button
                     type="button"
-                    class="o_form_button_cancel btn btn-light"
+                    class="o_form_button_cancel btn btn-light py-0"
                     t-att-disabled="props.isDisabled"
                     data-hotkey="j"
                     t-on-click.stop="discard"
diff --git a/addons/web/static/src/webclient/settings_form_view/settings_form_view.xml b/addons/web/static/src/webclient/settings_form_view/settings_form_view.xml
index 11dfe5b92ba..194615a3bb0 100644
--- a/addons/web/static/src/webclient/settings_form_view/settings_form_view.xml
+++ b/addons/web/static/src/webclient/settings_form_view/settings_form_view.xml
@@ -16,6 +16,7 @@
                 </div>
             </t>
         </xpath>
+        <xpath expr="//Layout/t[@t-set-slot='control-panel-status-indicator']" position="replace"/>
         <xpath expr="//Layout/t[@t-component='props.Renderer']" position="attributes">
             <attribute name="initialApp">initialApp</attribute>
         </xpath>
diff --git a/addons/web/static/tests/views/form/form_view_tests.js b/addons/web/static/tests/views/form/form_view_tests.js
index 675e26c9c77..1794be5836f 100644
--- a/addons/web/static/tests/views/form/form_view_tests.js
+++ b/addons/web/static/tests/views/form/form_view_tests.js
@@ -4916,7 +4916,8 @@ QUnit.module("Views", (hooks) => {
 
         await editInput(target, ".o_field_widget[name=foo] input", "");
         await click(target.querySelector(".o_pager_next"));
-        assert.strictEqual(target.querySelector(".breadcrumb").innerText, "first record");
+        assert.strictEqual(target.querySelector(".breadcrumb-item > span").innerText, "first record");
+        assert.strictEqual(target.querySelector(".breadcrumb-item > .o_form_status_indicator").innerText.trim(), "Unable to save");
         assert.strictEqual(target.querySelector(".o_pager_value").textContent, "1");
         assert.strictEqual(target.querySelector(".o_pager_limit").textContent, "2");
         assert.hasClass(target.querySelector(".o_field_widget[name=foo]"), "o_field_invalid");
@@ -4946,7 +4947,8 @@ QUnit.module("Views", (hooks) => {
         await editInput(target, ".o_field_widget[name=foo] input", "");
         triggerHotkey("alt+n");
         await nextTick();
-        assert.strictEqual(target.querySelector(".breadcrumb").innerText, "first record");
+        assert.strictEqual(target.querySelector(".breadcrumb-item > span").innerText, "first record");
+        assert.strictEqual(target.querySelector(".breadcrumb-item > .o_form_status_indicator").innerText.trim(), "Unable to save");
         assert.strictEqual(target.querySelector(".o_pager_value").textContent, "1");
         assert.strictEqual(target.querySelector(".o_pager_limit").textContent, "2");
         assert.hasClass(target.querySelector(".o_field_widget[name=foo]"), "o_field_invalid");