[IMP] web,mail: improve search view for mobile devices

With this commit, we introduce a better screen to manipulate the search
view in a mobile device.

Note: most of this work was initially done by suh-odoo, then was adapted
and moved to community by myself.

task 31464

3 files changed, 128 insertions, 8 deletions

diff --git a/addons/web/static/src/js/chrome/search_menus.js b/addons/web/static/src/js/chrome/search_menus.js
index d33cdce6500..a6548b051f4 100644
--- a/addons/web/static/src/js/chrome/search_menus.js
+++ b/addons/web/static/src/js/chrome/search_menus.js
@@ -1,6 +1,7 @@
 odoo.define('web.FavoriteMenu', function (require) {
 "use strict";
 
+var config = require('web.config');
 var core = require('web.core');
 var data_manager = require('web.data_manager');
 var pyeval = require('web.pyeval');
@@ -38,6 +39,7 @@ return Widget.extend({
         this.action = action;
         this.action_id = action.id;
         this.filters = {};
+        this.isMobile = config.device.isMobile;
         _.each(filters, this.add_filter.bind(this));
     },
     start: function () {
@@ -305,6 +307,7 @@ return Widget.extend({
 odoo.define('web.FilterMenu', function (require) {
 "use strict";
 
+var config = require('web.config');
 var search_filters = require('web.search_filters');
 var search_inputs = require('web.search_inputs');
 var Widget = require('web.Widget');
@@ -333,6 +336,7 @@ return Widget.extend({
     },
     init: function (parent, filters, fields) {
         this._super(parent);
+        this.isMobile = config.device.isMobile;
         this.filters = filters || [];
         this.searchview = parent;
         this.propositions = [];
@@ -409,6 +413,7 @@ return Widget.extend({
 odoo.define('web.GroupByMenu', function (require) {
 "use strict";
 
+var config = require('web.config');
 var core = require('web.core');
 var search_inputs = require('web.search_inputs');
 var Widget = require('web.Widget');
@@ -433,6 +438,7 @@ return Widget.extend({
         var self = this;
         this._super(parent);
         this.searchview = parent;
+        this.isMobile = config.device.isMobile;
         this.groups = groups || [];
         this.groupableFields = [];
         var groupable_types = ['many2one', 'char', 'boolean', 'selection', 'date', 'datetime'];
diff --git a/addons/web/static/src/js/chrome/search_view.js b/addons/web/static/src/js/chrome/search_view.js
index 94087c999b6..8fc3cd73a2b 100644
--- a/addons/web/static/src/js/chrome/search_view.js
+++ b/addons/web/static/src/js/chrome/search_view.js
@@ -326,18 +326,19 @@ var SearchView = Widget.extend({
             .toggleClass('fa-search-plus', !this.visible_filters);
         var menu_defs = [];
         this.prepare_search_inputs();
-        if (this.$buttons) {
+        var $buttons = this._getButtonsElement();
+        if ($buttons) {
             if (!this.options.disable_filters) {
                 this.filter_menu = new FilterMenu(this, this.filters, this.fields);
-                menu_defs.push(this.filter_menu.appendTo(this.$buttons));
+                menu_defs.push(this.filter_menu.appendTo($buttons));
             }
             if (!this.options.disable_groupby) {
                 this.groupby_menu = new GroupByMenu(this, this.groupbys, this.fields);
-                menu_defs.push(this.groupby_menu.appendTo(this.$buttons));
+                menu_defs.push(this.groupby_menu.appendTo($buttons));
             }
             if (!this.options.disable_favorites) {
                 this.favorite_menu = new FavoriteMenu(this, this.query, this.dataset.model, this.action, this.favorite_filters);
-                menu_defs.push(this.favorite_menu.appendTo(this.$buttons));
+                menu_defs.push(this.favorite_menu.appendTo($buttons));
             }
         }
         return $.when.apply($, menu_defs).then(this.set_default_filters.bind(this));
@@ -454,7 +455,7 @@ var SearchView = Widget.extend({
                 return self.$('.o_searchview_input').val().trim();
             },
         });
-        this.autocomplete.appendTo(this.$el);
+        this.autocomplete.appendTo(this.$('.o_searchview_input_container'));
     },
     /**
      * Provide auto-completion result for req.term (an array to `resp`)
@@ -528,11 +529,11 @@ var SearchView = Widget.extend({
 
         this.query.each(function (facet) {
             var f = new FacetView(this, facet);
-            started.push(f.appendTo(self.$el));
+            started.push(f.appendTo(self.$('.o_searchview_input_container')));
             self.input_subviews.push(f);
         }, this);
         var i = new InputView(this);
-        started.push(i.appendTo(self.$el));
+        started.push(i.appendTo(self.$('.o_searchview_input_container')));
         self.input_subviews.push(i);
         _.each(this.input_subviews, function (childView) {
             childView.on('focused', self, self.proxy('childFocused'));
@@ -540,7 +541,12 @@ var SearchView = Widget.extend({
         });
 
         $.when.apply(null, started).then(function () {
-            _.last(self.input_subviews).$el.focus();
+            if (!config.device.isMobile) {
+                // in mobile mode, we would rathor not focusing manually the
+                // input, because it opens up the integrated keyboard, which is
+                // not what you expect when you just selected a filter.
+                _.last(self.input_subviews).$el.focus();
+            }
         });
     },
     childFocused: function () {
@@ -666,6 +672,18 @@ var SearchView = Widget.extend({
     // Private
     //--------------------------------------------------------------------------
 
+
+    /**
+     * Will return $element where Filters, Group By and Favorite buttons are
+     * going to be pushed. This method is overriden by the mobile search view
+     * to add these buttons somewhere else in the dom.
+     *
+     * @private
+     * @returns {jQueryElement}
+     */
+    _getButtonsElement: function () {
+        return this.$buttons;
+    },
     /**
      * Processes a fieldsView in place. In particular, parses its arch.
      *
diff --git a/addons/web/static/src/js/chrome/search_view_mobile.js b/addons/web/static/src/js/chrome/search_view_mobile.js
new file mode 100644
index 00000000000..852a65c0a37
--- /dev/null
+++ b/addons/web/static/src/js/chrome/search_view_mobile.js
@@ -0,0 +1,96 @@
+ odoo.define('web.SearchViewMobile', function (require) {
+"use strict";
+
+var config = require('web.config');
+var SearchView = require('web.SearchView');
+
+if (!config.device.isMobile) {
+    return;
+}
+
+SearchView.include({
+    template:'SearchViewMobile',
+    events:_.extend({}, SearchView.prototype.events, {
+        'click .o_mobile_search_close, .o_mobile_search_show_result, .o_enable_searchview': '_toggleMobileSearchView',
+        'click': '_onOpenMobileSearchView',
+        'click .o_mobile_search_clear_facets': '_onEmptyAll',
+        'show.bs.dropdown .o_mobile_search_filter .o_dropdown': '_onDropdownToggle',
+        'hide.bs.dropdown .o_mobile_search_filter .o_dropdown': '_onDropdownToggle',
+    }),
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    renderFacets: function () {
+        this._super.apply(this, arguments);
+        this.$('.o_mobile_search_clear_facets')
+            .toggleClass('o_hidden', !this.query.length);
+    },
+    /**
+     * @override
+     */
+    toggle_visibility: function (is_visible) {
+        // Do not do anything, toggling visibility of searchview is handled
+        // explicitly for mobile
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    _getButtonsElement: function () {
+        return this.$('.o_mobile_search_filter');
+    },
+    /**
+     * Toggle mobile search view screen
+     *
+     * @private
+     */
+    _toggleMobileSearchView: function () {
+        this.$('.o_enable_searchview').toggleClass('btn-default', !!this.query.length);
+        this.$('.o_mobile_search').toggleClass('o_hidden');
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Toggle the little arrow in main buttons
+     *
+     * @private
+     * @param {BootstrapEvent} ev
+     */
+    _onDropdownToggle: function (ev) {
+        $(ev.currentTarget).find('.fa-chevron-right').toggleClass('fa-chevron-down');
+    },
+    /**
+     * Clears all filters from the search view
+     *
+     * @private
+     * @param {MouseEvent} event
+     */
+    _onEmptyAll: function () {
+        this.query.reset();
+    },
+    /**
+     * Open the mobile search view screen
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onOpenMobileSearchView: function (ev) {
+        if (ev.target === this.el) {
+            this._toggleMobileSearchView();
+        }
+    },
+});
+
+});
\ No newline at end of file