From 7594c055dece93675aa097bc5f0d5ba483e77f5e Mon Sep 17 00:00:00 2001 From: Romain Estievenart Date: Tue, 6 Apr 2021 07:22:44 +0000 Subject: [PATCH] [FIX] pos,pos_restaurant: Improve UX on Search products on small screen MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The top of POS is too large and must be scrolled to be used. To improve the UX, we remove the current search box and only keep the icon and when the search icon is clicked, the search input is shown. Task ID: 2453679 X-original-commit: e5d54ac1d30eef789ec1604e3a1212f415224ada Part-of: odoo/odoo#79448 Co-authored-by: Adrien Dieudonné --- addons/point_of_sale/static/src/css/pos.css | 13 ++++++++++-- addons/point_of_sale/static/src/js/Chrome.js | 19 +++++++++++++++++ .../Screens/ProductScreen/ProductsWidget.js | 1 + .../ProductsWidgetControlPanel.js | 3 +++ .../point_of_sale/static/src/xml/Chrome.xml | 6 +++--- .../Screens/ProductScreen/ProductScreen.xml | 2 +- .../Screens/ProductScreen/ProductsWidget.xml | 2 +- .../ProductsWidgetControlPanel.xml | 21 ++++++++++++------- .../pos_restaurant/static/src/xml/Chrome.xml | 2 +- 9 files changed, 53 insertions(+), 16 deletions(-) diff --git a/addons/point_of_sale/static/src/css/pos.css b/addons/point_of_sale/static/src/css/pos.css index 4e9f4b352f7..1d5145cb3be 100644 --- a/addons/point_of_sale/static/src/css/pos.css +++ b/addons/point_of_sale/static/src/css/pos.css @@ -3431,19 +3431,21 @@ td { /* Product Screen Search Bar */ -.search-bar-portal { +.search-bar-portal, +.search-bar-portal .search-box { display: flex; + flex: 1; } .search-bar-portal .search-box { font-size: medium; position: relative; - display: flex; align-items: center; margin: 0 15px; } .search-bar-portal .search-box input { + flex: 1; font-size: medium; height: 30px; border: none; @@ -3629,6 +3631,13 @@ td { background: rgb(104,69,95); } +@media screen and (max-width: 768px) { + + .pos .search-bar-portal .search-box .icon .fa-search { + color: #f0f0f0; + } +} + /** CashMovePopup **/ .cash-move { diff --git a/addons/point_of_sale/static/src/js/Chrome.js b/addons/point_of_sale/static/src/js/Chrome.js index 66882855536..673178fc281 100644 --- a/addons/point_of_sale/static/src/js/Chrome.js +++ b/addons/point_of_sale/static/src/js/Chrome.js @@ -31,6 +31,7 @@ odoo.define('point_of_sale.Chrome', function(require) { useExternalListener(window, 'beforeunload', this._onBeforeUnload); useListener('show-main-screen', this.__showScreen); useListener('toggle-debug-widget', debounce(this._toggleDebugWidget, 100)); + useListener('toggle-mobile-searchbar', this._toggleMobileSearchBar); useListener('show-temp-screen', this.__showTempScreen); useListener('close-temp-screen', this.__closeTempScreen); useListener('close-pos', this._closePos); @@ -46,6 +47,7 @@ odoo.define('point_of_sale.Chrome', function(require) { this.state = useState({ uiState: 'LOADING', // 'LOADING' | 'READY' | 'CLOSING' debugWidgetIsShown: true, + mobileSearchBarIsShown: false, hasBigScrollBars: false, sound: { src: null }, notification: { @@ -98,6 +100,16 @@ odoo.define('point_of_sale.Chrome', function(require) { get clientScreenButtonIsShown() { return this.env.pos.config.iface_customer_facing_display; } + + /** + * Used to give the `state.mobileSearchBarIsShown` value to main screen props + */ + get mainScreenPropsFielded() { + return Object.assign({}, this.mainScreenProps, { + mobileSearchBarIsShown: this.state.mobileSearchBarIsShown, + }); + } + /** * Startup screen can be based on pos config so the startup screen * is only determined after pos data is completely loaded. @@ -298,6 +310,13 @@ odoo.define('point_of_sale.Chrome', function(require) { _toggleDebugWidget() { this.state.debugWidgetIsShown = !this.state.debugWidgetIsShown; } + _toggleMobileSearchBar({ detail: isSearchBarEnabled }) { + if (isSearchBarEnabled !== null) { + this.state.mobileSearchBarIsShown = isSearchBarEnabled; + } else { + this.state.mobileSearchBarIsShown = !this.state.mobileSearchBarIsShown; + } + } _onPlaySound({ detail: name }) { let src; if (name === 'error') { diff --git a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidget.js b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidget.js index 10834b3f3c9..8271fb12c96 100644 --- a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidget.js +++ b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidget.js @@ -25,6 +25,7 @@ odoo.define('point_of_sale.ProductsWidget', function(require) { } willUnmount() { this.env.pos.off('change:selectedCategoryId', null, this); + this.trigger('toggle-mobile-searchbar', false); } get selectedCategoryId() { return this.env.pos.get('selectedCategoryId'); diff --git a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidgetControlPanel.js b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidgetControlPanel.js index 819d5ce8cc4..9ebfa77f60a 100644 --- a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidgetControlPanel.js +++ b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidgetControlPanel.js @@ -39,6 +39,9 @@ odoo.define('point_of_sale.ProductsWidgetControlPanel', function(require) { this.trigger('switch-category', 0); this.trigger('update-search', productName); } + _toggleMobileSearchbar() { + this.trigger('toggle-mobile-searchbar'); + } async loadProductFromDB() { if(!this.searchWordInput.el.value) return; diff --git a/addons/point_of_sale/static/src/xml/Chrome.xml b/addons/point_of_sale/static/src/xml/Chrome.xml index 088f1f27663..1708de8bc19 100644 --- a/addons/point_of_sale/static/src/xml/Chrome.xml +++ b/addons/point_of_sale/static/src/xml/Chrome.xml @@ -13,9 +13,9 @@
- +
-
+
@@ -35,7 +35,7 @@
+ t-props="mainScreenPropsFielded" t-key="mainScreen.name" />
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductScreen.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductScreen.xml index ec5a5bfc70b..6a08c9cf08c 100644 --- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductScreen.xml +++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductScreen.xml @@ -23,7 +23,7 @@
- + diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidget.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidget.xml index 3dfd52766fa..fbd056b2f92 100644 --- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidget.xml +++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidget.xml @@ -3,7 +3,7 @@
- +
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml index e44943716af..a763bbf680d 100644 --- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml +++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml @@ -38,16 +38,21 @@
- - - - + + - - + + - - + + +