pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] pos,pos_restaurant: Improve UX on Search products on small screen

Browse Source 
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é <adr@odoo.com>
This commit is contained in:
Romain Estievenart
2021-11-05 19:44:46 +00:00
committed by Adrien Dieudonne
co-authored by Adrien Dieudonné
parent 3a9bd22ffb
commit 7594c055de
9 changed files with 53 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/point_of_sale/static/src/css/pos.css
+11 -2
View File
@@ -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 {
addons/point_of_sale/static/src/js/Chrome.js
+19
View File
@@ -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') {
addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidget.js
+1
View File
@@ -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');
addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidgetControlPanel.js
+3
View File
@@ -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;
addons/point_of_sale/static/src/xml/Chrome.xml
+3 -3
View File
@@ -13,9 +13,9 @@
<TicketButton isTicketScreenShown="isTicketScreenShown" />
</div>
<div class="pos-rightheader">
<TicketButton isTicketScreenShown="isTicketScreenShown" t-if="env.isMobile" />
<TicketButton isTicketScreenShown="isTicketScreenShown" t-if="env.isMobile and !state.mobileSearchBarIsShown" />
<div class="search-bar-portal" />
<div class="status-buttons-portal" />
<div class="status-buttons-portal" t-att-class="{ oe_hidden: state.mobileSearchBarIsShown }"/>
</div>
</div>
<t t-if="state.uiState === 'READY'">
@@ -35,7 +35,7 @@
<div class="subwindow-container">
<div class="subwindow-container-fix screens">
<t isShown="!tempScreen.isShown" t-component="mainScreen.component"
t-props="mainScreenProps" t-key="mainScreen.name" />
t-props="mainScreenPropsFielded" t-key="mainScreen.name" />
<t t-if="tempScreen.isShown" t-component="tempScreen.component"
t-props="tempScreenProps" t-key="tempScreen.name" />
</div>
addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductScreen.xml
+1 -1
View File
@@ -23,7 +23,7 @@
</t>
</div>
<div class="rightpane" t-if="!env.isMobile || mobile_pane === 'right'">
<ProductsWidget/>
<ProductsWidget mobileSearchBarIsShown="props.mobileSearchBarIsShown"/>
<t t-if="env.isMobile">
<MobileOrderWidget pane="mobile_pane" t-on-switchpane="switchPane"/>
</t>
addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidget.xml
+1 -1
View File
@@ -3,7 +3,7 @@
<t t-name="ProductsWidget" owl="1">
<div class="products-widget">
<ProductsWidgetControlPanel breadcrumbs="breadcrumbs" subcategories="subcategories" hasNoCategories="hasNoCategories" />
<ProductsWidgetControlPanel mobileSearchBarIsShown="props.mobileSearchBarIsShown" breadcrumbs="breadcrumbs" subcategories="subcategories" hasNoCategories="hasNoCategories" />
<ProductList products="productsToDisplay" searchWord="searchWord" />
</div>
</t>
addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml
+13 -8
View File
@@ -38,16 +38,21 @@
</t>
<Portal target="'.pos .search-bar-portal'">
<div class="search-box">
<span class="icon"><i class="fa fa-search"></i></span>
<span t-on-click="clearSearch" class="clear-icon">
<i class="fa fa-times" aria-hidden="true"></i>
<span t-if="env.isMobile" class="icon" t-on-click="_toggleMobileSearchbar">
<i t-attf-class="fa {{props.mobileSearchBarIsShown ? 'fa-arrow-left' : 'fa-search'}}"/>
</span>
<span class="database-icon">
<i class="fa fa-database" t-on-click="loadProductFromDB"/>
<span t-else="" class="icon">
<i class="fa fa-search"/>
</span>
<input t-ref="search-word-input" type="text" placeholder="Search Products..." t-on-keyup="updateSearch" />
<t t-if="!env.isMobile || props.mobileSearchBarIsShown">
<span t-on-click="clearSearch" class="clear-icon">
<i class="fa fa-times" aria-hidden="true"/>
</span>
<span class="database-icon">
<i class="fa fa-database" t-on-click="loadProductFromDB"/>
</span>
<input t-ref="search-word-input" autofocus="autofocus" type="text" placeholder="Search Products..." t-on-keyup="updateSearch" />
</t>
</div>
</Portal>
</div>
addons/pos_restaurant/static/src/xml/Chrome.xml
+1 -1
View File
@@ -3,7 +3,7 @@
<t t-name="Chrome" t-inherit="point_of_sale.Chrome" t-inherit-mode="extension" owl="1">
<xpath expr="//div[hasclass('search-bar-portal')]" position="before">
<BackToFloorButton />
<BackToFloorButton t-att-class="{ oe_hidden: state.mobileSearchBarIsShown }"/>
</xpath>
</t>