diff options
6 files changed, 143 insertions, 65 deletions
diff --git a/addons/web/static/src/js/views/control_panel/control_panel_renderer.js b/addons/web/static/src/js/views/control_panel/control_panel_renderer.js index 677f0733bc5..bdde2827e96 100644 --- a/addons/web/static/src/js/views/control_panel/control_panel_renderer.js +++ b/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 = {}; 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 23852abcf53..95b5c577587 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 @@ -9,9 +9,9 @@ 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', @@ -49,17 +49,40 @@ ControlPanelRenderer.include({ _renderSearchBar: function () { var self = this; 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_mobile_search')); + } 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(); + this.$('.o_enable_searchview').toggleClass("fa-search").toggleClass("fa-close"); }, //-------------------------------------------------------------------------- diff --git a/addons/web/static/src/scss/control_panel.scss b/addons/web/static/src/scss/control_panel.scss index dd74c8ac010..c08695fc28d 100644 --- a/addons/web/static/src/scss/control_panel.scss +++ b/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 { diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml index 733bd37c211..1e131c9fc8b 100644 --- a/addons/web/static/src/xml/base.xml +++ b/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> - <div class="o_cp_left"> - <div class="o_cp_buttons" role="toolbar" aria-label="Control panel toolbar"/> - <aside class="o_cp_sidebar"/> + <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_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,14 @@ </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_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..."/> + </t> </div> <div t-name="SearchView.SearchBar" class="o_searchview_input_container"> @@ -1233,40 +1244,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> - -<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-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> + <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> 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 19226741474..be0d197ef44 100644 --- a/addons/web/static/tests/views/mobile_control_panel_tests.js +++ b/addons/web/static/tests/views/mobile_control_panel_tests.js @@ -39,8 +39,61 @@ QUnit.module('Mobile Search view Screen', { }; }, }, function () { - QUnit.test('can activate a filter with mobile search view', async function (assert) { - assert.expect(3); + QUnit.test('can activate a filter with mobile search view in quick search mode', async function (assert) { + assert.expect(7); + + var searchRPCFlag = false; + + var actionManager = await createActionManager({ + actions: this.actions, + archs: this.archs, + data: this.data, + mockRPC: function (route, args) { + if (searchRPCFlag) { + assert.deepEqual(args.domain, [['foo', 'ilike', 'A']], + "domain should have been properly transferred to list view"); + } + return this._super.apply(this, arguments); + }, + }); + + await actionManager.doAction(1); + + assert.strictEqual($('button.o_enable_searchview.fa-search').length, 1, + "should display a button to open the searchview"); + assert.deepEqual($('.o_searchview_input_container:visible').length, 0, + "Quick search input should be hidden"); + + // open the search view + await testUtils.dom.click($('button.o_enable_searchview')); + assert.deepEqual($('.o_toggle_searchview_full:visible').length, 1, + "should display a button to expand the searchview"); + assert.deepEqual($('.o_searchview_input_container:visible').length, 1, + "Quick search input should now be visible"); + + searchRPCFlag = true; + + // use quick search input + $('.o_searchview_input') + .val("A") + .trigger($.Event('keypress', { which: 65, keyCode: 65 })); + await testUtils.nextTick(); + actionManager.$('.o_searchview_input') + .trigger($.Event('keydown', { which: $.ui.keyCode.ENTER, keyCode: $.ui.keyCode.ENTER })); + await testUtils.nextTick(); + + // close quick search + await testUtils.dom.click($('button.o_enable_searchview.fa-close')); + assert.deepEqual($('.o_toggle_searchview_full:visible').length, 0, + "Expand icon shoud be hidden"); + assert.deepEqual($('.o_searchview_input_container:visible').length, 0, + "Quick search input should be hidden"); + + actionManager.destroy(); + }); + + QUnit.test('can activate a filter with mobile search view in full screen mode', async function (assert) { + assert.expect(4); var filterActiveFlag = false; @@ -61,20 +114,25 @@ 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')); - + // open it in full screen + await testUtils.dom.click($('.o_toggle_searchview_full')); assert.ok($('.o_mobile_search').is(':visible'), 'mobile search view is visible'); // open filter sub menu await testUtils.dom.click($('button.o_dropdown_toggler_btn').first()); - filterActiveFlag = true; - // click on Active filter await testUtils.dom.click($('.o_filters_menu a:contains(Active)')); + // closing search view + await testUtils.dom.click($('.o_mobile_search_close')); + assert.ok(!$('.o_mobile_search').is(':visible'), + 'mobile search view is not visible'); + actionManager.destroy(); }); diff --git a/odoo/addons/test_main_flows/static/tests/tours/main_flow.js b/odoo/addons/test_main_flows/static/tests/tours/main_flow.js index 1344c41822b..334223e4901 100644 --- a/odoo/addons/test_main_flows/static/tests/tours/main_flow.js +++ b/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" }, { |