From 8e1a4259a406895ce4f95dec185b5e56da7694c1 Mon Sep 17 00:00:00 2001
From: Romain Estievenart <res@odoo.com>
Date: Tue, 20 Apr 2021 08:04:46 +0000
Subject: [PATCH] [IMP] pos: Show categories on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before this commit, users had to use a popup window to change
the product category. It wasn't clear for users who are used
to using a large screen.

This commit adapts the breadcrumb navigation to be the same
as on desktop. This avoids the use of this popup.

We also improve the display of products by taking the entire width
of the screen. This allows us to add some space between the products.

Task ID: 2355025

X-original-commit: 9b7d1d6f9ef1342db5bb0d6a31eafa9d2586d171
Part-of: odoo/odoo#79448
Co-authored-by: Adrien Dieudonné <adr@odoo.com>
---
 addons/point_of_sale/static/src/css/pos.css   | 25 +++++++++----------
 .../ProductsWidgetControlPanel.js             |  3 +++
 .../ProductScreen/HomeCategoryBreadcrumb.xml  | 12 +--------
 .../ProductsWidgetControlPanel.xml            | 16 ++++++------
 4 files changed, 23 insertions(+), 33 deletions(-)

diff --git a/addons/point_of_sale/static/src/css/pos.css b/addons/point_of_sale/static/src/css/pos.css
index facca7d38c6..a3623f8689e 100644
--- a/addons/point_of_sale/static/src/css/pos.css
+++ b/addons/point_of_sale/static/src/css/pos.css
@@ -850,6 +850,7 @@ td {
 /*  ********* The right pane contains the screens and headers ********* */
 
 .pos .rightpane {
+    width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -875,7 +876,8 @@ td {
     background: #d3d3d3;
     text-align: center;
     display: flex;
-    flex-flow: row wrap;
+    overflow-x: auto;
+    overflow-y: hidden;
 }
 
 .pos .green-border-bottom {
@@ -889,11 +891,17 @@ td {
 /*  ********* The product list  ********* */
 
 .pos .product-list {
-    padding: 10px;
-    text-align: left;
-    -webkit-transform: translate3d(0,0,0);
+    padding: 10px 5px;
     display: flex;
     flex-wrap: wrap;
+    gap: 2px;
+}
+@media screen and (max-width: 768px) {
+    .pos .product-list {
+        padding: 0px;
+        gap: 0px;
+        justify-content: space-between;
+    }
 }
 
 .pos .product-list-scroller{
@@ -948,7 +956,6 @@ td {
 @media screen and (max-width: 768px) {
     .pos .breadcrumb-button.breadcrumb-home {
         width: auto;
-        font-size: 13px;
         margin-left: 3px;
     }
 }
@@ -1050,7 +1057,6 @@ td {
     padding: 0px;
     background: #cecece;
     display: flex;
-    flex-flow: row wrap;
     flex: 1;
 }
 
@@ -1132,11 +1138,7 @@ td {
 
 .pos .product {
     position:relative;
-    vertical-align: top;
-    display: inline-block;
     line-height: 100px;
-    font-size: 11px;
-    margin: 8px !important;
     width: 122px;
     height:115px;
     background:#fff;
@@ -1162,9 +1164,6 @@ td {
 }
 
 @media screen and (max-width: 768px) {
-    .pos .product-list {
-        padding: 0px;
-    }
     .pos .product {
         width: 32%;
         height: auto;
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 9ebfa77f60a..1d65174405a 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
@@ -26,6 +26,9 @@ odoo.define('point_of_sale.ProductsWidgetControlPanel', function(require) {
             this.searchWordInput.el.value = '';
             this.trigger('clear-search');
         }
+        get displayCategImages() {
+            return this.env.pos.config.iface_display_categ_images && !this.env.isMobile;
+        }
         updateSearch(event) {
             this.trigger('update-search', event.target.value);
             if (event.key === 'Enter') {
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/HomeCategoryBreadcrumb.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/HomeCategoryBreadcrumb.xml
index 2bfa426e4b6..1f5f6281a01 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/HomeCategoryBreadcrumb.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/HomeCategoryBreadcrumb.xml
@@ -3,19 +3,9 @@
 
     <t t-name="HomeCategoryBreadcrumb" owl="1">
         <span class="breadcrumb">
-            <span t-if="!env.isMobile" class="breadcrumb-button breadcrumb-home"
-                  t-on-click="trigger('switch-category', 0)">
+            <span class="breadcrumb-button breadcrumb-home" t-on-click="trigger('switch-category', 0)">
                 <i class="fa fa-home" role="img" aria-label="Home" title="Home"></i>
             </span>
-            <span t-if="env.isMobile" class="breadcrumb-button breadcrumb-home"
-                  t-on-click="trigger('categ-popup', props.subcategories)">
-                <t t-if="env.pos.get('selectedCategoryId') === 0">
-                    All
-                </t>
-                <t t-else="">
-                    <t t-esc="props.currentCat.name"/>
-                </t>
-            </span>
         </span>
     </t>
 
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 a763bbf680d..e8eb9a4990c 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
@@ -5,26 +5,24 @@
         <div class="products-widget-control">
             <t t-if="!props.hasNoCategories">
                 <div class="rightpane-header" t-att-class="{
-                    'green-border-bottom': !env.pos.config.iface_display_categ_images,
-                    'grey-border-bottom': env.pos.config.iface_display_categ_images,
+                    'green-border-bottom': !displayCategImages,
+                    'grey-border-bottom': displayCategImages,
                 }">
                     <!-- Breadcrumbs -->
                     <div class="breadcrumbs">
                         <HomeCategoryBreadcrumb subcategories="props.subcategories" currentCat="props.breadcrumbs[props.breadcrumbs.length - 1]"/>
-                        <t t-if="!env.isMobile">
-                            <t t-foreach="props.breadcrumbs" t-as="category" t-key="category.id">
-                                <CategoryBreadcrumb category="category" />
-                            </t>
+                        <t t-foreach="props.breadcrumbs" t-as="category" t-key="category.id">
+                            <CategoryBreadcrumb category="category" />
                         </t>
                     </div>
                     <!-- Subcategories -->
-                    <t t-if="props.subcategories.length > 0 and !env.pos.config.iface_display_categ_images and !env.isMobile">
+                    <div t-if="props.subcategories.length > 0 and !displayCategImages"  class="category-list simple">
                         <t t-foreach="props.subcategories" t-as="category" t-key="category.id">
                             <CategorySimpleButton category="category" />
                         </t>
-                    </t>
+                    </div>
                 </div>
-                <t t-if="props.subcategories.length > 0 and env.pos.config.iface_display_categ_images and !env.isMobile">
+                <t t-if="props.subcategories.length > 0 and displayCategImages">
                     <div class="categories">
                         <div class="category-list-scroller">
                             <div class="category-list">