From bfcea333d69b88d1bf9d6f6912e3bff9a2ae58a4 Mon Sep 17 00:00:00 2001
From: Romain Estievenart <res@odoo.com>
Date: Fri, 25 Jun 2021 09:53:52 +0000
Subject: [PATCH] [FIX] pos_restaurant: Allow scroll on Floor screen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 addons/pos_restaurant/static/src/css/restaurant.css         | 6 +++---
 .../static/src/js/Screens/FloorScreen/FloorScreen.js        | 3 +++
 .../static/src/xml/Screens/FloorScreen/EditBar.xml          | 2 +-
 .../static/src/xml/Screens/FloorScreen/FloorScreen.xml      | 5 +++--
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/addons/pos_restaurant/static/src/css/restaurant.css b/addons/pos_restaurant/static/src/css/restaurant.css
index 60ee27f5bcf..e882e97629f 100644
--- a/addons/pos_restaurant/static/src/css/restaurant.css
+++ b/addons/pos_restaurant/static/src/css/restaurant.css
@@ -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;
diff --git a/addons/pos_restaurant/static/src/js/Screens/FloorScreen/FloorScreen.js b/addons/pos_restaurant/static/src/js/Screens/FloorScreen/FloorScreen.js
index c878643f552..5095d88bd3a 100644
--- a/addons/pos_restaurant/static/src/js/Screens/FloorScreen/FloorScreen.js
+++ b/addons/pos_restaurant/static/src/js/Screens/FloorScreen/FloorScreen.js
@@ -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);
diff --git a/addons/pos_restaurant/static/src/xml/Screens/FloorScreen/EditBar.xml b/addons/pos_restaurant/static/src/xml/Screens/FloorScreen/EditBar.xml
index 00e96d951b5..0d47a5c4a1f 100644
--- a/addons/pos_restaurant/static/src/xml/Screens/FloorScreen/EditBar.xml
+++ b/addons/pos_restaurant/static/src/xml/Screens/FloorScreen/EditBar.xml
@@ -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>
diff --git a/addons/pos_restaurant/static/src/xml/Screens/FloorScreen/FloorScreen.xml b/addons/pos_restaurant/static/src/xml/Screens/FloorScreen/FloorScreen.xml
index 0f3dc40680a..818f2d83dc0 100644
--- a/addons/pos_restaurant/static/src/xml/Screens/FloorScreen/FloorScreen.xml
+++ b/addons/pos_restaurant/static/src/xml/Screens/FloorScreen/FloorScreen.xml
@@ -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>