From 5f6443fa87ef5ef929fd21a049d12c3a54dde2a7 Mon Sep 17 00:00:00 2001
From: Romeo Fragomeli <rfr@odoo.com>
Date: Thu, 27 Oct 2022 08:55:07 +0000
Subject: [PATCH] [FIX] web: show the form status indicator with long
 breadcrumb
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Since commit, odoo/odoo@f2b71d51aa409eae435f31d433dac4290c2b80ab
the text ellipsis is working again with long breadcrumb.
But in form view when there is a long breadcrumb, the
'form status indicator' (save, discard) is not visible anymore.

In this commit, we move the 'form status indicator' outside the
breadcrumb, so it can't be hidden anymore.

Note: we also changed the `align-items` to `flex-start` to keep all
buttons aligned on the top ('form status indicator', action menu, pager,
create button, send message, ...).

Steps to reproduce:
* Go to Sales
* Select a Quotation
* Click on the customer (to go to customer form view)
* Change its name to have a long breadcrumb
* Go back to the home menu
* Go to Sales
* Select the same Quotation as before
* Click on the customer (to go to customer form view)
* Change some data in the customer form => BUG
  'form status indicator' isn't visible

closes odoo/odoo#104476

X-original-commit: df41c270b2372cd28226a16e089b71db32307159
Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
Signed-off-by: Romeo Fragomeli (rfr) <rfr@odoo.com>
---
 addons/web/static/src/core/pager/pager.xml                | 4 ++--
 .../static/src/search/control_panel/control_panel.scss    | 8 ++++++--
 .../src/views/form/control_panel/form_control_panel.xml   | 2 +-
 .../form/form_status_indicator/form_status_indicator.xml  | 6 +++---
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/addons/web/static/src/core/pager/pager.xml b/addons/web/static/src/core/pager/pager.xml
index 67cc4a26b07..15bf0dff42d 100644
--- a/addons/web/static/src/core/pager/pager.xml
+++ b/addons/web/static/src/core/pager/pager.xml
@@ -5,10 +5,10 @@
         <nav class="o_pager align-items-center d-flex gap-2" aria-label="Pager">
             <span class="o_pager_counter" t-on-click.stop="">
                 <t t-if="state.isEditing">
-                    <input type="text" class="o_pager_value o_input d-inline-block w-auto text-end" size="7" t-ref="autofocus" t-att-value="value" t-on-blur="onInputBlur" t-on-change="onInputChange" t-on-keydown.stop="onInputKeydown" />
+                    <input type="text" class="o_pager_value o_input d-inline-block w-auto text-end mb-n1" size="7" t-ref="autofocus" t-att-value="value" t-on-blur="onInputBlur" t-on-change="onInputChange" t-on-keydown.stop="onInputKeydown" />
                 </t>
                 <t t-else="">
-                    <span class="o_pager_value d-inline-block border-bottom border-transparent" t-esc="value" t-on-click="onValueClick" />
+                    <span class="o_pager_value d-inline-block border-bottom border-transparent mb-n1" t-esc="value" t-on-click="onValueClick" />
                 </t>
                 <span> / </span>
                 <t t-if="props.updateTotal">
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 f8a68cc81dd..9219fee138e 100644
--- a/addons/web/static/src/search/control_panel/control_panel.scss
+++ b/addons/web/static/src/search/control_panel/control_panel.scss
@@ -89,6 +89,7 @@
         @include media-breakpoint-down(md) {
             width: 100%;
             overflow: hidden;
+            flex-wrap: nowrap;
 
             > li {
                 margin: 0;
@@ -98,6 +99,7 @@
                 }
 
                 &.o_back_button {
+                    flex-shrink: 0;
                     &, & ~ li {
                         margin: auto 0;
                     }
@@ -191,11 +193,13 @@
         display: flex;
         flex-wrap: wrap;
         justify-content: flex-end;
-        align-items: center;
+        align-items: flex-start;
         column-gap: $o-horizontal-padding;
+        @include media-breakpoint-down(md) {
+            align-items: center;
+        }
 
         > .o_cp_pager {
-            margin: auto 0 auto auto;
             padding-left: 5px;
             text-align: center;
             user-select: none;
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 69880b7d494..fc1ba5067b9 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
@@ -14,10 +14,10 @@
                                 <t t-call="web.Breadcrumbs" t-if="!env.config.noBreadcrumbs"/>
                             </t>
                         </t>
-                        <t t-slot="control-panel-status-indicator" />
                     </t>
                 </div>
                 <div class="o_cp_bottom_right w-auto flex-shrink-0">
+                    <t t-slot="control-panel-status-indicator" />
                     <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_status_indicator/form_status_indicator.xml b/addons/web/static/src/views/form/form_status_indicator/form_status_indicator.xml
index e3eb409ec82..3bb05bf40c7 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 ms-2 d-flex align-items-center" t-att-class="{ o_form_status_indicator_new_record: props.model.root.isVirtual }">
+        <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_buttons d-flex" t-att-class="{ invisible: !(props.model.root.isVirtual or displayButtons) }">
                 <button
                     type="button"
-                    class="o_form_button_save btn btn-light btn-sm"
+                    class="o_form_button_save btn btn-light"
                     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 btn-sm"
+                    class="o_form_button_cancel btn btn-light"
                     t-att-disabled="props.isDisabled"
                     data-hotkey="j"
                     t-on-click.stop="discard"