From 3c632bbac32be850892f18ad3ce8bc9e6872008d Mon Sep 17 00:00:00 2001
From: "Loukas Wets (lowe)" <lowe@odoo.com>
Date: Fri, 20 Oct 2023 16:26:13 +0200
Subject: [PATCH] [IMP] point_of_sale: misc ui changes product_screen

This commit contains the following changes:
- Mobile view for devices with a width under 'SIZE.MD'
- Align mobile view bottom buttons
- Reduce size of category bar when images

closes odoo/odoo#139686

Signed-off-by: Joseph Caburnay (jcb) <jcb@odoo.com>
---
 .../category_selector/category_selector.xml          |  2 +-
 addons/point_of_sale/static/src/app/pos_app.scss     | 12 ++++++++++++
 .../app/screens/payment_screen/payment_screen.xml    |  4 ++--
 .../product_list/control_panel/control_panel.scss    |  3 ---
 .../product_list/control_panel/control_panel.xml     |  2 +-
 .../product_screen/product_list/product_list.scss    |  4 ----
 .../product_screen/product_list/product_list.xml     |  4 ++--
 .../app/screens/product_screen/product_screen.scss   |  3 +++
 .../app/screens/product_screen/product_screen.xml    |  4 ++--
 .../app/screens/receipt_screen/receipt_screen.xml    |  8 ++++----
 .../point_of_sale/static/src/overrides/ui_service.js | 10 ++++++++++
 .../components/product_screen/product_screen.xml     |  4 ++--
 12 files changed, 39 insertions(+), 21 deletions(-)
 delete mode 100644 addons/point_of_sale/static/src/app/screens/product_screen/product_list/control_panel/control_panel.scss
 create mode 100644 addons/point_of_sale/static/src/app/screens/product_screen/product_screen.scss
 create mode 100644 addons/point_of_sale/static/src/overrides/ui_service.js

diff --git a/addons/point_of_sale/static/src/app/generic_components/category_selector/category_selector.xml b/addons/point_of_sale/static/src/app/generic_components/category_selector/category_selector.xml
index 600948af9d1..fd0167520a3 100644
--- a/addons/point_of_sale/static/src/app/generic_components/category_selector/category_selector.xml
+++ b/addons/point_of_sale/static/src/app/generic_components/category_selector/category_selector.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
     <t t-name="point_of_sale.CategorySelector">
         <div t-attf-class="{{props.class}} d-flex overflow-auto w-100 flex-grow-1">
-            <div class="d-flex flex-fill gap-3 align-content-start p-2 bg-view overflow-auto">
+            <div class="d-flex flex-fill gap-3 align-content-start p-1 bg-view overflow-auto">
                 <div t-foreach="props.categories" t-as="category" t-key="category.id"
                     class="d-flex align-items-center">
                     <i  t-if="category.separator"
diff --git a/addons/point_of_sale/static/src/app/pos_app.scss b/addons/point_of_sale/static/src/app/pos_app.scss
index d64e8613f57..3d4d67672b0 100644
--- a/addons/point_of_sale/static/src/app/pos_app.scss
+++ b/addons/point_of_sale/static/src/app/pos_app.scss
@@ -69,3 +69,15 @@ input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }
+
+.h-12{
+    height: 12%;
+}
+
+.h-8{
+    height: 8%;
+}
+
+.min-h-50 {
+    min-height: 50px;
+}
diff --git a/addons/point_of_sale/static/src/app/screens/payment_screen/payment_screen.xml b/addons/point_of_sale/static/src/app/screens/payment_screen/payment_screen.xml
index 340300fc18b..42e68764125 100644
--- a/addons/point_of_sale/static/src/app/screens/payment_screen/payment_screen.xml
+++ b/addons/point_of_sale/static/src/app/screens/payment_screen/payment_screen.xml
@@ -44,8 +44,8 @@
 
     <t t-name="point_of_sale.PaymentScreenValidate">
         <t t-if="ui.isSmall">
-            <div class="switchpane d-flex">
-                <button class="btn-switchpane validation-button btn btn-primary flex-fill py-5 rounded-0 fw-bolder"
+            <div class="switchpane d-flex h-12">
+                <button class="btn-switchpane validation-button btn btn-primary flex-fill py-4 rounded-0 fw-bolder fs-1"
                     t-att-class="{ secondary: !(currentOrder.is_paid() and currentOrder._isValidEmptyOrder()) }"
                     t-on-click="() => this.validateOrder()">
                     <span>Validate</span>
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/product_list/control_panel/control_panel.scss b/addons/point_of_sale/static/src/app/screens/product_screen/product_list/control_panel/control_panel.scss
deleted file mode 100644
index 34a86e8a35c..00000000000
--- a/addons/point_of_sale/static/src/app/screens/product_screen/product_list/control_panel/control_panel.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.h-12 {
-    height: 12%;
-}
\ No newline at end of file
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/product_list/control_panel/control_panel.xml b/addons/point_of_sale/static/src/app/screens/product_screen/product_list/control_panel/control_panel.xml
index 8f84609cbc4..8c70e40d222 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/product_list/control_panel/control_panel.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/product_list/control_panel/control_panel.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.ProductsWidgetControlPanel">
-        <div class="products-widget-control d-flex bg-view shadow-sm" t-att-class="{'h-12': categoriesHasImages}" t-ref="products-widget-control">
+        <div class="products-widget-control d-flex bg-view shadow-sm" t-att-class="{'h-8 min-h-50': categoriesHasImages}" t-ref="products-widget-control">
             <CategorySelector
                 categories="getCategories()"
                 onClick="(id) => this.pos.setSelectedCategoryId(id)"
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.scss b/addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.scss
index b47b92c4c24..bd44093e175 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.scss
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.scss
@@ -11,7 +11,3 @@
 .button-no-demo {
     color: #017e84 !important;
 }
-
-.h-12 {
-    height: 12%;
-}
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.xml b/addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.xml
index fe89f8af908..80209ce020c 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.xml
@@ -3,13 +3,13 @@
 
     <t t-name="point_of_sale.ProductsWidget">
         <div class="products-widget d-flex flex-column flex-grow-1 overflow-auto">
-            <div class="products-widget-control d-flex bg-view shadow-sm" t-att-class="{'h-12': categoriesHasImages}">
+            <div class="products-widget-control d-flex bg-view shadow-sm" t-att-class="{'h-8 min-h-50': categoriesHasImages}">
                 <CategorySelector
                     categories="getCategories()"
                     onClick="(id) => this.pos.setSelectedCategoryId(id)"
                 />
                 <Input tModel="[pos, 'searchProductWord']"
-                    class="'ms-auto p-2 m-2'"
+                    class="'ms-auto m-auto p-2'"
                     isSmall="ui.isSmall"
                     placeholder="'Search products...'"
                     icon="{type: 'fa', value: 'fa-search'}"
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/product_screen.scss b/addons/point_of_sale/static/src/app/screens/product_screen/product_screen.scss
new file mode 100644
index 00000000000..2931cb1fa9d
--- /dev/null
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/product_screen.scss
@@ -0,0 +1,3 @@
+.w-60 {
+    width: 60%;
+}
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/product_screen.xml b/addons/point_of_sale/static/src/app/screens/product_screen/product_screen.xml
index 5c65f39ab45..2fc427fc505 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/product_screen.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/product_screen.xml
@@ -43,13 +43,13 @@
                     </div>
                 </div>
             </div>
-            <div class="rightpane overflow-auto d-flex flex-grow-1 flex-column bg-300" t-if="!ui.isSmall || pos.mobile_pane === 'right'">
+            <div class="rightpane overflow-auto d-flex flex-grow-1 flex-column bg-300 w-60" t-if="!ui.isSmall || pos.mobile_pane === 'right'">
                 <ProductsWidget />
                 <t t-if="ui.isSmall">
                     <div class="product-reminder d-flex justify-content-center align-items-center py-1 text-bg-warning bg-opacity-50 fw-bolder" t-if="state.showProductReminder" t-key="animationKey" >
                         <span><t t-esc="selectedOrderlineQuantity"/> <t t-esc="selectedOrderlineDisplayName"/> <t t-esc="selectedOrderlineTotal"/></span>
                     </div>
-                    <div class="switchpane d-flex">
+                    <div class="switchpane d-flex h-12">
                         <button class="btn-switchpane pay-button btn w-50 rounded-0 fw-bolder" t-attf-class="{{ primaryPayButton ? 'btn-primary' : 'btn-secondary' }}" t-on-click="() => currentOrder.pay()">
                             <span class="fs-1 d-block">Pay</span>
                             <span><t t-esc="total" /></span>
diff --git a/addons/point_of_sale/static/src/app/screens/receipt_screen/receipt_screen.xml b/addons/point_of_sale/static/src/app/screens/receipt_screen/receipt_screen.xml
index c323324ade9..3f3fc8b0cb5 100644
--- a/addons/point_of_sale/static/src/app/screens/receipt_screen/receipt_screen.xml
+++ b/addons/point_of_sale/static/src/app/screens/receipt_screen/receipt_screen.xml
@@ -58,17 +58,17 @@
                         Continue
                     </button>
                 </div>
-                <div t-else="" class="switchpane d-flex">
-                    <div class="btn-switchpane validation-button btn btn-primary flex-fill py-3 rounded-0 fw-bolder" t-att-class="{ highlight: !locked }"
+                <div t-else="" class="switchpane d-flex h-12">
+                    <div class="btn-switchpane validation-button btn btn-primary flex-fill d-flex justify-content-center align-items-center rounded-0 fw-bolder fs-1" t-att-class="{ highlight: !locked }"
                         t-if="!splittedOrder"
                         t-on-click="orderDone" name="done">
                         New Order
                     </div>
-                    <div t-if="isResumeVisible() and !splittedOrder" class="btn-switchpane validation-button btn btn-primary flex-fill py-3 rounded-0 fw-bolder" t-att-class="{ highlight: !locked }"
+                    <div t-if="isResumeVisible() and !splittedOrder" class="btn-switchpane validation-button btn btn-primary flex-fill d-flex justify-content-center align-items-center rounded-0 fw-bolder fs-1" t-att-class="{ highlight: !locked }"
                         t-on-click="resumeOrder" name="resume">
                         Resume Order
                     </div>
-                    <div t-if="splittedOrder" class="btn-switchpane validation-button btn btn-primary flex-fill py-3 rounded-0 fw-bolder" t-att-class="{ highlight: !locked }"
+                    <div t-if="splittedOrder" class="btn-switchpane validation-button btn btn-primary flex-fill d-flex justify-content-center align-items-center rounded-0 fw-bolder fs-1" t-att-class="{ highlight: !locked }"
                         t-on-click="continueSplitting" name="resume">
                         Continue
                     </div>
diff --git a/addons/point_of_sale/static/src/overrides/ui_service.js b/addons/point_of_sale/static/src/overrides/ui_service.js
new file mode 100644
index 00000000000..721bf6837ed
--- /dev/null
+++ b/addons/point_of_sale/static/src/overrides/ui_service.js
@@ -0,0 +1,10 @@
+/** @odoo-module **/
+
+import { SIZES, utils } from "@web/core/ui/ui_service";
+import { patch } from "@web/core/utils/patch";
+
+patch(utils, {
+    isSmall(ui = {}) {
+        return (ui.size || utils.getSize()) <= SIZES.MD;
+    },
+});
diff --git a/addons/pos_restaurant/static/src/overrides/components/product_screen/product_screen.xml b/addons/pos_restaurant/static/src/overrides/components/product_screen/product_screen.xml
index aaaa5db0043..dfcb6fe9b97 100644
--- a/addons/pos_restaurant/static/src/overrides/components/product_screen/product_screen.xml
+++ b/addons/pos_restaurant/static/src/overrides/components/product_screen/product_screen.xml
@@ -5,7 +5,7 @@
         <xpath expr="//button[hasclass('pay-button')]" position="replace">
             <button
                 t-if="this.swapButton"
-                class="btn-switchpane btn flex-fill rounded-0 fw-bolder py-3"
+                class="btn-switchpane btn flex-fill rounded-0 fw-bolder"
                 t-on-click="submitOrder"
                 t-attf-class="{{ primaryOrderButton ? 'btn-primary' : 'btn-secondary' }}">
                 <!-- Replace the payment button by the order button -->
@@ -14,7 +14,7 @@
             </button>
             <t t-else="">
                 <button
-                    class="btn-switchpane btn flex-fill rounded-0 fw-bolder py-3"
+                    class="btn-switchpane btn flex-fill rounded-0 fw-bolder"
                     t-attf-class="{{ primaryPayButton ? 'btn-primary' : 'btn-secondary' }}"
                     t-on-click="() => currentOrder.pay()">
                     <span class="fs-1 d-block">Pay</span>