[FIX] web: status indicator next to the breadcrumb

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#107397

Task-id: 3067691
X-original-commit: 24b0987
Signed-off-by: Pierre Paridans (app) <app@odoo.com>
Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>

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;

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 {

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>

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"/>

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">

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"

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>

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");