[FIX] web: show the form status indicator with long breadcrumb

Since commit, odoo/odoo@f2b71d51aa
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>
This commit is contained in:
Romeo Fragomeli
2022-10-28 15:19:56 +02:00
parent 9f5819e0fd
commit 5f6443fa87
4 changed files with 12 additions and 8 deletions
+2 -2
View File
@@ -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">
@@ -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;
@@ -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"/>
@@ -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"