From a96478037fe89d035a5402b37238d6312b627c78 Mon Sep 17 00:00:00 2001
From: Romain Estievenart <res@odoo.com>
Date: Mon, 24 Feb 2020 11:53:45 +0000
Subject: [PATCH] [FIX] web: mobile quick search view issues
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Steps to reproduce:
1. Open sales on mobile
2. Click on the search icon (with breadcrumb)

    Issue #1:
    The displayed cross on the right suggests to users that it's
    used to close the facets but it's not.
    We replace it by a back arrow to close the search like in other
    apps.

3. Click on create 'Create'
4. Select a customer (Without breadcrumb)

   Issue #2:
   We don't have any breadcrumb inside the control_panel,
   so we should always display the search. There is no
   need to open/close it.

Task ID: 2200099

closes odoo/odoo#46086

Related: odoo/enterprise#9486
Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
---
 .../mobile_control_panel_renderer.js          | 29 ++++++++++++++-----
 addons/web/static/src/scss/control_panel.scss |  9 +++---
 addons/web/static/src/scss/search_view.scss   |  2 +-
 addons/web/static/src/xml/base.xml            |  2 +-
 .../tests/views/mobile_control_panel_tests.js |  2 +-
 5 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/addons/web/static/src/js/views/control_panel/mobile_control_panel_renderer.js b/addons/web/static/src/js/views/control_panel/mobile_control_panel_renderer.js
index 2110fcb2ca1c..b3055a25907b 100644
--- a/addons/web/static/src/js/views/control_panel/mobile_control_panel_renderer.js
+++ b/addons/web/static/src/js/views/control_panel/mobile_control_panel_renderer.js
@@ -46,14 +46,15 @@ ControlPanelRenderer.include({
      * @private
      * @override
      */
-    _renderSearchBar: function () {
-        var self = this;
-        return this._super.apply(this, arguments).then(function () {
-            self._renderSearchviewInput();
-        });
+    _renderSearchBar: async function () {
+        await this._super.apply(this, arguments);
+        this._renderSearchviewInput();
+        if (!this.withBreadcrumbs) {
+            this._mobileQuickSearchView();
+        }
     },
     _renderSearchviewInput: function () {
-        if (this.$('.o_toggle_searchview_full').is(':visible') && !this.$('.o_mobile_search').is(':visible')) {
+        if (!this.withBreadcrumbs || (this.$('.o_toggle_searchview_full').is(':visible') && !this.$('.o_mobile_search').is(':visible'))) {
             this.$('.o_toggle_searchview_full').toggleClass('btn-secondary', !!this.state.query.length);
             this.searchBar.$el.detach().insertAfter(this.$('.o_mobile_search'));
         } else {
@@ -69,6 +70,18 @@ ControlPanelRenderer.include({
         this.$('.o_mobile_search').toggleClass('o_hidden');
         this._renderSearchviewInput();
     },
+    /**
+     * Display mobile quick search on screen
+     */
+    _mobileQuickSearchView() {
+        this.$('.o_cp_searchview').addClass('o_searchview_quick');
+        this.$('.breadcrumb').addClass('o_hidden');
+        this.$('.o_toggle_searchview_full')
+            .removeClass('o_hidden')
+            .toggleClass('btn-secondary', !!this.state.query.length);
+        this._renderSearchviewInput();
+        this.$('.o_enable_searchview').hide();
+    },
     /**
      * Toggles mobile quick search view on screen.
      *
@@ -82,7 +95,9 @@ ControlPanelRenderer.include({
             .toggleClass('o_hidden')
             .toggleClass('btn-secondary', !!this.state.query.length);
         this._renderSearchviewInput();
-        this.$('.o_enable_searchview').toggleClass("fa-search").toggleClass("fa-close");
+        this.$('.o_enable_searchview')
+            .toggleClass("fa-search")
+            .toggleClass("fa-arrow-left")
     },
 
     //--------------------------------------------------------------------------
diff --git a/addons/web/static/src/scss/control_panel.scss b/addons/web/static/src/scss/control_panel.scss
index 801f0b96d6f9..215323030b0c 100644
--- a/addons/web/static/src/scss/control_panel.scss
+++ b/addons/web/static/src/scss/control_panel.scss
@@ -27,10 +27,11 @@
         min-height: $o-cp-breadcrumb-height;
     }
 
-    .btn.o_enable_searchview {
-        margin-left: 2%;
-        padding: 0px;
-        background: white;
+    .btn.o_enable_searchview{
+        color: $gray-600;
+        &:hover {
+            color: $gray-600;
+        }
     }
 
     .o_cp_left {
diff --git a/addons/web/static/src/scss/search_view.scss b/addons/web/static/src/scss/search_view.scss
index 3a4aaae28dca..ad1f53a93bad 100644
--- a/addons/web/static/src/scss/search_view.scss
+++ b/addons/web/static/src/scss/search_view.scss
@@ -54,7 +54,7 @@
             }
         }
         .o_searchview_input {
-            width: 100px;
+            width: 75px;
             flex: 1 0 auto;
         }
 
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 6a02c62e0a0f..8a90c35f1454 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1197,9 +1197,9 @@
 
 <div t-name="SearchView" class="o_searchview" role="search" aria-autocomplete="list">
     <t t-if="widget.isMobile">
+        <button class="o_enable_searchview btn btn-link fa fa-search"/>
         <t t-call="MobileSearchView"/>
         <button class="o_toggle_searchview_full o_hidden btn fa fa-filter"/>
-        <button class="o_enable_searchview btn btn-link fa fa-search"/>
     </t>
     <t t-else="">
         <span class="o_searchview_more fa" title="Advanced Search..." role="img" aria-label="Advanced Search..."/>
diff --git a/addons/web/static/tests/views/mobile_control_panel_tests.js b/addons/web/static/tests/views/mobile_control_panel_tests.js
index be0d197ef445..83b29b729b7b 100644
--- a/addons/web/static/tests/views/mobile_control_panel_tests.js
+++ b/addons/web/static/tests/views/mobile_control_panel_tests.js
@@ -83,7 +83,7 @@ QUnit.module('Mobile Search view Screen', {
         await testUtils.nextTick();
 
         // close quick search
-        await testUtils.dom.click($('button.o_enable_searchview.fa-close'));
+        await testUtils.dom.click($('button.o_enable_searchview.fa-arrow-left'));
         assert.deepEqual($('.o_toggle_searchview_full:visible').length, 0,
             "Expand icon shoud be hidden");
         assert.deepEqual($('.o_searchview_input_container:visible').length, 0,