[REF] web: control_panel: breadcrumb and cp_searchview flexible width

1) The size of the left part of the control panel will take free
space left. Normally, the width is always fixed to 50/50 but
now the breadcrumb can take more or less space if needed.
It will be useful on mobile where the search bar is dynamically
sized.

2) Control panel elements are split into two divs;
- breadcrumb and search bar are grouped to be in the top.
- buttons (o_cp_left) and pager (o_cp_right) in the bottom.
Now we can easily add antoher elements in the top or bottom
part of the control panel.

3) Control panel template is likely the same on mobile so
they are now merged.

4) Before this commit, we always had an empty parent even if
the search bar wasn't rendered. Removing it makes the DOM cleaner.
Because of this, we are not able to expose this area used to add
custom elements. Some code need to be adapted.

Task ID : 1924760

addons/web/static/src/js/views/control_panel/control_panel_renderer.js

@@ -50,6 +50,7 @@ var ControlPanelRenderer = Renderer.extend({
         this.$subMenus = null;
         this.action = params.action;
         this.displaySearchMenu = true;
+        this.isMobile = config.device.isMobile;
         this.menusSetup = false;
         this.searchMenuTypes = params.searchMenuTypes || [];
         this.subMenus = {};

addons/web/static/src/js/views/control_panel/mobile_control_panel_renderer.js

@@ -9,7 +9,6 @@ if (!config.device.isMobile) {
 }
 
 ControlPanelRenderer.include({
-    template:'MobileControlPanel',
     events:_.extend({}, ControlPanelRenderer.prototype.events, {
         'click .o_mobile_search_close, .o_mobile_search_show_result, .o_enable_searchview': '_toggleMobileSearchView',
         'click': '_onOpenMobileSearchView',

addons/web/static/src/scss/control_panel.scss

@@ -1,13 +1,24 @@
 
 .o_control_panel {
-    display: flex;
-    flex-flow: row wrap;
     border-bottom: 1px solid darken($o-control-panel-background-color, 20%);
     @include o-webclient-padding($top: 10px, $bottom: 10px);
     background-color: $o-control-panel-background-color;
 
-    > .breadcrumb {
-        width: 50%;
+    > div {
+        display: flex;
+        justify-content: space-between;
+        min-height: 30px;
+    }
+
+    .breadcrumb, .o_cp_left {
+        flex: 1 1 auto;
+    }
+
+    .o_cp_searchview, .o_cp_right {
+        flex: 0 0 50%;
+    }
+
+    .breadcrumb {
         font-size: 18px;
 
         > li {
@@ -19,8 +30,7 @@
         }
     }
 
-    > .o_cp_searchview {
-        width: 50%;
+    .o_cp_searchview {
         min-height: $o-cp-breadcrumb-height;
     }
 
@@ -30,10 +40,9 @@
         background: white;
     }
 
-    > .o_cp_left {
+    .o_cp_left {
         display: flex;
         justify-content: space-between;
-        width: 50%;
         margin-top: 5px;
 
         > .o_cp_sidebar {
@@ -65,9 +74,8 @@
         }
     }
 
-    > .o_cp_right {
+    .o_cp_right {
         display: flex;
-        width: 50%;
         margin-top: 5px;
 
         > .o_cp_pager {

addons/web/static/src/xml/base.xml

@@ -148,18 +148,22 @@
 
 <t t-name="ControlPanel">
     <div class="o_control_panel">
-        <ol class="breadcrumb" role="navigation"/>
-        <div class="o_cp_searchview" role="search">
-            <t t-call="SearchView"/>
+        <div>
+            <ol class="breadcrumb" role="navigation"/>
+            <div class="o_cp_searchview" role="search">
+                <t t-if="widget.withSearchBar" t-call="SearchView"/>
+            </div>
         </div>
-        <div class="o_cp_left">
-            <div class="o_cp_buttons" role="toolbar" aria-label="Control panel toolbar"/>
-            <aside class="o_cp_sidebar"/>
-        </div>
-        <div class="o_cp_right">
-            <div class="btn-group o_search_options" role="search"/>
-            <nav class="o_cp_pager" role="search" aria-label="Pager"/>
-            <nav class="btn-group o_cp_switch_buttons" role="toolbar" aria-label="View switcher"/>
+        <div>
+            <div class="o_cp_left">
+                <div class="o_cp_buttons" role="toolbar" aria-label="Control panel toolbar"/>
+                <aside class="o_cp_sidebar"/>
+            </div>
+            <div class="o_cp_right">
+                <div class="btn-group o_search_options" role="search"/>
+                <nav class="o_cp_pager" role="search" aria-label="Pager"/>
+                <nav class="btn-group o_cp_switch_buttons" role="toolbar" aria-label="View switcher"/>
+            </div>
         </div>
     </div>
 </t>
@@ -1164,7 +1168,13 @@
 </div>
 
 <div t-name="SearchView" class="o_searchview" role="search" aria-autocomplete="list">
-    <span class="o_searchview_more fa" title="Advanced Search..." role="img" aria-label="Advanced Search..."/>
+    <t t-if="widget.isMobile">
+        <t t-call="MobileSearchView"/>
+        <button class="o_enable_searchview btn fa fa-search"/>
+    </t>
+    <t t-else="">
+        <span class="o_searchview_more fa" title="Advanced Search..." role="img" aria-label="Advanced Search..."/>
+    </t>
 </div>
 
 <div t-name="SearchView.SearchBar" class="o_searchview_input_container">
@@ -1233,40 +1243,17 @@
     </select>
 </t>
 
-<t t-name="MobileControlPanel">
-    <div class="o_control_panel">
-        <ol class="breadcrumb" role="navigation"/>
-        <div class="o_cp_searchview" role="search">
-            <t t-call="MobileSearchView"/>
-        </div>
-        <div class="o_cp_left">
-            <div class="o_cp_buttons" role="toolbar" aria-label="Control panel toolbar"/>
-            <aside class="o_cp_sidebar"/>
-        </div>
-        <div class="o_cp_right">
-            <div class="btn-group o_search_options" role="search"/>
-            <nav class="o_cp_pager" role="search" aria-label="Pager"/>
-            <nav class="btn-group o_cp_switch_buttons" role="toolbar" aria-label="View switcher"/>
-        </div>
+<div t-name="MobileSearchView" class="o_mobile_search o_hidden">
+    <div class="o_mobile_search_header">
+        <span class="o_mobile_search_close float-left mt16 mb16 mr8 ml16">
+            <i class="fa fa-arrow-left"/>
+            <strong class="float-right ml8">FILTER</strong>
+        </span>
+        <span class="float-right o_mobile_search_clear_facets mt16 mr16">CLEAR</span>
     </div>
-</t>
-
-<t t-name="MobileSearchView">
-    <div class="o_searchview" role="search" aria-autocomplete="list">
-        <button class="o_enable_searchview btn fa fa-search"/>
-        <div class="o_mobile_search o_hidden">
-            <div class="o_mobile_search_header">
-                <span class="o_mobile_search_close float-left mt16 mb16 mr8 ml16">
-                    <i class="fa fa-arrow-left"/>
-                    <strong class="float-right ml8">FILTER</strong>
-                </span>
-                <span class="float-right o_mobile_search_clear_facets mt16 mr16">CLEAR</span>
-            </div>
-            <div class="o_mobile_search_filter o_search_options mb8 mt8 ml16 mr16"/>
-            <div class="btn btn-primary o_mobile_search_show_result">SEE RESULT</div>
-        </div>
-    </div>
-</t>
+    <div class="o_mobile_search_filter o_search_options mb8 mt8 ml16 mr16"/>
+    <div class="btn btn-primary o_mobile_search_show_result">SEE RESULT</div>
+</div>
 
 <div t-name="AddNewFavoriteMenu">
     <button type="button" class="dropdown-item o_generator_menu o_add_favorite o_menu_header">Save Current Search</button>

odoo/addons/test_main_flows/static/tests/tours/main_flow.js

@@ -604,7 +604,7 @@ tour.register('main_flow_tour', {
     position: "bottom"
 }, {
     trigger: ".o_data_row:first",
-    extra_trigger: '.o_control_panel > .breadcrumb:contains("Sales Orders")',
+    extra_trigger: '.o_control_panel .breadcrumb:contains("Sales Orders")',
     content: _t("Go to the last sale order"),
     position: "right"
 }, {