[FIX] web: mobile quick search view issues

Steps to reproduce: 1. Open sales on mobile 2. Click on the search icon (with breadcrumb) Issue OCA#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 OCA#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>
acsone · Mar 25, 2020 · a964780 · a964780
1 parent 428d2dc
commit a964780
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,