From 85eef1ec4d458f8ee5020a5464c74c384cad788a Mon Sep 17 00:00:00 2001
From: Julien Mougenot <jum@odoo.com>
Date: Thu, 23 Apr 2020 08:06:30 +0000
Subject: [FIX] web: properly define control panel layout

Before this commit, some elements in the control panel were not properly encapsulated
in layout-related parent elements and this caused some inconsistencies if some of
the control panel components were not displayed. For example: if the breadrumbs
were missing, the search bar went to the left side instead of the right.

Now, all components are in a grid-like structure (in desktop mode) and should not
overstep their given boundaries. The layout in mobile remains unchanged since the
top part behaves quite differently.

closes odoo/odoo#50057

X-original-commit: 533db5991a5bb871198485cd71a63f75a8c6becf
Related: odoo/enterprise#10148
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
Signed-off-by: Julien Mougenot (jum) <jum@odoo.com>
---
 addons/web/static/src/xml/base.xml | 62 ++++++++++++++++++++------------------
 1 file changed, 33 insertions(+), 29 deletions(-)

(limited to 'addons/web/static/src/xml/base.xml')

diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 99b4588c450..0199aeb8136 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -6,39 +6,43 @@
 <t t-name="web.ControlPanel" owl="1">
     <div class="o_control_panel">
         <div class="o_cp_top">
-            <ol t-if="props.withBreadcrumbs" class="breadcrumb" role="navigation">
-                <li t-foreach="props.breadcrumbs" t-as="bc" t-key="bc.controllerID"
-                    class="breadcrumb-item"
-                    t-att-class="{ o_back_button: bc_index === props.breadcrumbs.length - 1 }"
-                    t-att-accesskey="bc_last and 'b'"
-                    t-on-click.prevent="trigger('breadcrumb-clicked', { controllerID: bc.controllerID })"
+            <div class="o_cp_top_left">
+                <ol t-if="props.withBreadcrumbs" class="breadcrumb" role="navigation">
+                    <li t-foreach="props.breadcrumbs" t-as="bc" t-key="bc.controllerID"
+                        class="breadcrumb-item"
+                        t-att-class="{ o_back_button: bc_index === props.breadcrumbs.length - 1 }"
+                        t-att-accesskey="bc_last and 'b'"
+                        t-on-click.prevent="trigger('breadcrumb-clicked', { controllerID: bc.controllerID })"
+                        >
+                        <a t-if="bc.title" href="#" t-esc="bc.title"/>
+                        <em t-else="" class="text-warning">Unnamed</em>
+                    </li>
+                    <li class="breadcrumb-item active">
+                        <t t-if="props.title" t-esc="props.title"/>
+                        <em t-else="" class="text-warning">Unnamed</em>
+                    </li>
+                </ol>
+            </div>
+            <div class="o_cp_top_right">
+                <div class="o_cp_searchview"
+                    role="search"
+                    t-ref="searchView"
                     >
-                    <a t-if="bc.title" href="#" t-esc="bc.title"/>
-                    <em t-else="" class="text-warning">Unnamed</em>
-                </li>
-                <li class="breadcrumb-item active">
-                    <t t-if="props.title" t-esc="props.title"/>
-                    <em t-else="" class="text-warning">Unnamed</em>
-                </li>
-            </ol>
-            <div class="o_cp_searchview"
-                role="search"
-                t-ref="searchView"
-                >
-                <div t-if="props.withSearchBar" class="o_searchview" role="search" aria-autocomplete="list" >
-                    <i t-if="props.searchMenuTypes.length"
-                        t-attf-class="o_searchview_more fa fa-search-{{ state.displayDropdowns ? 'minus' : 'plus' }}"
-                        title="Advanced Search..."
-                        role="img"
-                        aria-label="Advanced Search..."
-                        t-on-click.prevent="state.displayDropdowns = !state.displayDropdowns"
-                    />
-                    <SearchBar t-if="props.withSearchBar" fields="fields"/>
+                    <div t-if="props.withSearchBar" class="o_searchview" role="search" aria-autocomplete="list" >
+                        <i t-if="props.searchMenuTypes.length"
+                            t-attf-class="o_searchview_more fa fa-search-{{ state.displayDropdowns ? 'minus' : 'plus' }}"
+                            title="Advanced Search..."
+                            role="img"
+                            aria-label="Advanced Search..."
+                            t-on-click.prevent="state.displayDropdowns = !state.displayDropdowns"
+                        />
+                        <SearchBar t-if="props.withSearchBar" fields="fields"/>
+                    </div>
                 </div>
             </div>
         </div>
         <div class="o_cp_bottom">
-            <div class="o_cp_left">
+            <div class="o_cp_bottom_left">
                 <div class="o_cp_buttons" role="toolbar" aria-label="Control panel buttons" t-ref="buttons">
                     <t t-slot="buttons"/>
                 </div>
@@ -46,7 +50,7 @@
                     t-props="props.actionMenus"
                 />
             </div>
-            <div class="o_cp_right">
+            <div class="o_cp_bottom_right">
                 <div class="btn-group o_search_options position-static"
                     role="search"
                     t-ref="searchViewButtons"
-- 
cgit v1.2.3