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

[FIX] pos_restaurant: Allow scroll on Floor screen

Browse Source 
Steps to reproduce:

1. On small screen like mobile devices, open the pos app
   and start a bar/restaurant session;
2. You can't navigate on Floor screen => bug

To fix that we allow scroll on Floor screen

Task ID: 2453679

closes odoo/odoo#73333

X-original-commit: 15fea6aa56ec132734c21418798b7dd5903b10bf
Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
This commit is contained in:
Romain Estievenart
2021-07-06 16:57:26 +00:00
parent 2b34cea21c
commit bfcea333d6
4 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/pos_restaurant/static/src/css/restaurant.css
+3 -3
View File
@@ -46,7 +46,7 @@
box-shadow: 0px 6px 0px -3px rgba(0,0,0,0.07) inset;
background: #D8D7D7;
background-repeat: no-repeat;
overflow: hidden;
overflow: auto;
background-size: cover;
transition: all 300ms ease-in-out;
}
@@ -121,7 +121,7 @@
margin-left: -12px;
}
.floor-map .edit-button.editing {
position: absolute;
position: fixed;
top: 0;
right: 0;
font-size: 20px;
@@ -139,7 +139,7 @@
color: white;
}
.floor-map .edit-bar {
position: absolute;
position: fixed;
top: 0;
right: 40px;
margin: 8px;
addons/pos_restaurant/static/src/js/Screens/FloorScreen/FloorScreen.js
+3
View File
@@ -33,17 +33,20 @@ odoo.define('pos_restaurant.FloorScreen', function (require) {
selectedTableId: null,
isEditMode: false,
floorBackground: floor.background_color,
floorMapScrollTop: 0,
});
this.floorMapRef = useRef('floor-map-ref');
}
patched() {
this.floorMapRef.el.style.background = this.state.floorBackground;
this.state.floorMapScrollTop = this.floorMapRef.el.getBoundingClientRect().top;
}
mounted() {
if (this.env.pos.table) {
this.env.pos.set_table(null);
}
this.floorMapRef.el.style.background = this.state.floorBackground;
this.state.floorMapScrollTop = this.floorMapRef.el.getBoundingClientRect().top;
// call _tableLongpolling once then set interval of 5sec.
this._tableLongpolling();
this.tableLongpolling = setInterval(this._tableLongpolling.bind(this), 5000);
addons/pos_restaurant/static/src/xml/Screens/FloorScreen/EditBar.xml
+1 -1
View File
@@ -2,7 +2,7 @@
<templates id="template" xml:space="preserve">
<t t-name="EditBar" owl="1">
<div class="edit-bar">
<div class="edit-bar" t-attf-style="top:{{props.floorMapScrollTop}}px;">
<span class="edit-button" t-on-click.stop="trigger('create-table')">
<i class="fa fa-plus" role="img" aria-label="Add" title="Add"></i>
</span>
addons/pos_restaurant/static/src/xml/Screens/FloorScreen/FloorScreen.xml
+3 -2
View File
@@ -25,10 +25,11 @@
<EditableTable t-else="" table="table" />
</t>
</div>
<span t-if="env.pos.user.role == 'manager'" class="edit-button editing" t-att-class="{ active: state.isEditMode }" t-on-click.stop="toggleEditMode">
<span t-if="env.pos.user.role == 'manager'" class="edit-button editing" t-att-class="{ active: state.isEditMode }" t-on-click.stop="toggleEditMode"
t-attf-style="top:{{state.floorMapScrollTop}}px;">
<i class="fa fa-pencil" role="img" aria-label="Edit" title="Edit"></i>
</span>
<EditBar t-if="state.isEditMode" selectedTable="selectedTable" />
<EditBar t-if="state.isEditMode" selectedTable="selectedTable" floorMapScrollTop="state.floorMapScrollTop"/>
</div>
</div>
</div>