Skip to content
Permalink
Browse files

[IMP] web: SearchView - Allow user to quickly search on same screen w…

…hen on mobile

- Added Filter icon so user can select filters and group by
- When filter applied, filter color will be primary
- Allow to expand control panel when user add new facet inline on mobile

Closes #30290
  • Loading branch information...
dpr-odoo committed Jan 11, 2019
1 parent 6af61e8 commit 60abf9941a4408fd0edc59b7055022966d6c32b1
@@ -11,7 +11,8 @@ 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 .o_mobile_search_close, .o_mobile_search_show_result, .o_toggle_searchview_full': '_toggleMobileSearchView',
'click .o_enable_searchview' : '_toggleMobileQuickSearchView',
'click': '_onOpenMobileSearchView',
'click .o_mobile_search_clear_facets': '_onEmptyAll',
'show.bs.dropdown .o_mobile_search_filter .o_dropdown': '_onDropdownToggle',
@@ -48,18 +49,40 @@ ControlPanelRenderer.include({
*/
_renderSearchBar: function () {
var self = this;
this.$input = this.$("input.o_mobile_quick_search");
return this._super.apply(this, arguments).then(function () {
self.searchBar.$el.detach().insertAfter(self.$('.o_mobile_search_header'));
self._renderSearchviewInput();
});
},
_renderSearchviewInput: function () {
if(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_toggle_searchview_full"));
} else {
this.searchBar.$el.detach().insertAfter(this.$(".o_mobile_search_header"));
}
},
/**
* Toggles mobile search view screen.
*
* @private
*/
_toggleMobileSearchView: function () {
this.$('.o_enable_searchview').toggleClass('btn-secondary', !!this.state.query.length);
this.$('.o_mobile_search').toggleClass('o_hidden');
this._renderSearchviewInput();
},
/**
* Toggles mobile quick search view on screen.
*
* @private
*/
_toggleMobileQuickSearchView: function () {
this.$('.o_cp_searchview').toggleClass("o_searchview_quick");
this.$('.breadcrumb').toggleClass('o_hidden', this.$(".o_cp_searchview").hasClass("o_searchview_quick"));
this.$(".o_toggle_searchview_full")
.toggleClass("o_hidden")
.toggleClass('btn-secondary', !!this.state.query.length);
this._renderSearchviewInput();
},

//--------------------------------------------------------------------------
@@ -1,4 +1,62 @@
.o_web_client {
.o_control_panel {
.o_cp_searchview {
.o_mobile_quick_search {
padding-left: 16px;
position: relative;
}
&.o_searchview_quick {
display: block;
width: 100%;
overflow: visible;
border-bottom: 1px solid $o-brand-secondary;
margin-right: 10px;
.o_searchview {
position: relative;
left: 0px;
width: 100%;
display: block;

button.o_enable_searchview {
padding-right: 0px;
}
}
.o_searchview_autocomplete {
width: 90%;
}
}
.o_searchview {
padding-right: 0px;
.o_mobile_quick_search {
padding-left: 0px;
display: flex;
flex-direction: row-reverse;
align-items: baseline;
button {
padding-top: 0px;
padding-bottom: 0px;
margin: 0px;
&:focus {
box-shadow: none;
}
&.btn-secondary {
color: $o-brand-primary !important;
}
}
.o_searchview_input_container {
flex: 1;
position: static;
.o_searchview_autocomplete li {
padding: 10px 10px 10px 15px;
.o-expand {
padding: 0px;
}
}
}
}
}
}
}
.o_mobile_search {
position: fixed;
top: 0;
@@ -21,20 +79,16 @@
}
.o_searchview_input_container {
display: flex;
padding: 15px 20px 0 20px;
padding: 5px 20px 0 20px;
position: relative;
.o_searchview_input {
width: 100%;
margin-bottom: 15px;
border-bottom: 1px solid $o-brand-secondary;
}
.o_searchview_facet {
border-radius: 10px;
.o_searchview_facet {
display: inline-flex;
order:1;
.o_searchview_facet_label {
border-radius: 2em 0em 0em 2em;
}
order: 1;
}
.o_searchview_autocomplete {
top:100%;
@@ -49,7 +103,6 @@
width: 100%;
margin: 15px 5px 0px 5px;
border: solid 1px darken(gray('200'), 20%);

}
.o_dropdown_toggler_btn {
width: 100%;
@@ -59,7 +112,6 @@
display: none;
}
}

// We disable the backdrop in this case because it prevents any
// interaction outside of a dropdown while it is open.
.dropdown-backdrop {
@@ -1347,7 +1347,10 @@

<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_quick_search">
<button class="o_enable_searchview btn fa fa-search"/>
<button class="o_toggle_searchview_full o_hidden btn fa fa-filter"/>
</div>
<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">
@@ -40,7 +40,7 @@ QUnit.module('Mobile Search view Screen', {
},
}, function () {
QUnit.test('can activate a filter with mobile search view', async function (assert) {
assert.expect(3);
assert.expect(5);

var filterActiveFlag = false;

@@ -61,9 +61,16 @@ QUnit.module('Mobile Search view Screen', {

assert.ok(!$('.o_mobile_search').is(':visible'),
'mobile search view is not visible');

// open the search view
await testUtils.dom.click($('button.o_enable_searchview'));

assert.deepEqual($(".o_mobile_quick_search").children().length, 3,
"Quick search input and filter icon added");

// open the search view
await testUtils.dom.click($(".o_toggle_searchview_full"));

assert.ok($('.o_mobile_search').is(':visible'),
'mobile search view is visible');

@@ -75,6 +82,21 @@ QUnit.module('Mobile Search view Screen', {
// click on Active filter
await testUtils.dom.click($('.o_filters_menu a:contains(Active)'));

// Closing search view
testUtils.dom.click($('.o_mobile_search_close'));

filterActiveFlag = false;

// quick search with input
$("input.o_mobile_quick_search")
.val("Active")
.trigger($.Event('keydown', {which: $.ui.keyCode.ENTER}));

assert.deepEqual($(".o_searchview_input_container > .o_searchview_facet").length, 1,
"Quick search facet are added");

// hide quick search input
testUtils.dom.click($('button.o_enable_searchview'));
actionManager.destroy();
});

0 comments on commit 60abf99

Please sign in to comment.
You can’t perform that action at this time.