From 9a9fad67df2a8ef0aa39d14b9c177ddaa01f1a3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cmoda=E2=80=9D?= <moda@odoo.com>
Date: Mon, 23 Oct 2023 09:52:27 +0200
Subject: [PATCH] [IMP] pos_self_order: change layout of
 res_config_settings_views

Some layout change of res_config_settings_views.xml to make it more
readable.

Now, important parameters are on the top of the page.

closes odoo/odoo#139287

Signed-off-by: Joseph Caburnay (jcb) <jcb@odoo.com>
---
 .../models/res_config_settings.py             |  4 +--
 .../product_list_page/product_list_page.scss  |  7 ++--
 .../product_list_page/product_list_page.xml   | 21 ++++--------
 .../views/res_config_settings_views.xml       | 33 ++++++++++---------
 4 files changed, 28 insertions(+), 37 deletions(-)

diff --git a/addons/pos_self_order/models/res_config_settings.py b/addons/pos_self_order/models/res_config_settings.py
index 4bf89082c8c..fd8b5681363 100644
--- a/addons/pos_self_order/models/res_config_settings.py
+++ b/addons/pos_self_order/models/res_config_settings.py
@@ -1,6 +1,6 @@
-# -*- codingimport base64
+# -*- coding: utf-8 -*-
+
 import qrcode
-import base64
 import zipfile
 from io import BytesIO
 
diff --git a/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.scss b/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.scss
index e6b6ffe435c..8e056026ac5 100644
--- a/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.scss
+++ b/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.scss
@@ -11,12 +11,9 @@
         &.active {
             color: $headings-color;
 
-            &.active-no-image{
-                outline: 1px solid $o-action;
-            }
-
-            img {
+            div {
                 outline: 1px solid $o-action;
+                border-radius: 0.25rem;
             }
         }
     }
diff --git a/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.xml b/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.xml
index b5d8e6c9f21..cb97667b817 100644
--- a/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.xml
+++ b/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.xml
@@ -11,27 +11,20 @@
                         t-key="category.id"
                         t-ref="category_{{category.id}}"
                         t-attf-class="nav-link category-item flex-shrink-0 p-0"
-                        t-att-class="{
-                            'active-no-image border border-sm rounded p-1 d-flex align-items-center': !category.has_image
-                        }"
                         t-attf-href="#scrollspy_{{category.id}}">
-                        <div t-if="category.has_image" class="ratio ratio-1x1 mb-1">
-                            <div class="placeholder-glow">
-                                <div class="placeholder w-100 h-100 bg-300 rounded"/>
+                        <div class="ratio ratio-1x1 mb-1">
+                            <div t-att-class="{'placeholder-glow': category.has_image}">
+                                <div class="w-100 h-100 bg-200 rounded d-flex align-items-center justify-content-center" t-att-class="{'placeholder': category.has_image}">
+                                    <small class="d-block fw-bold text-white text-center" t-esc="category.name"/>
+                                </div>
                             </div>
-                            <img class="rounded w-100 h-100"
+                            <img t-if="category.has_image"  class="rounded w-100 h-100"
                                 t-attf-src="/pos-self/get-category-image/{{ category.id }}"
                                 alt="Product image"
                                 loading="lazy"
                                 onerror="this.remove()" />
                         </div>
-                        <small
-                            class="d-block fw-bold text-center"
-                            t-att-class="{
-                                'py-2' : !category.has_image,
-                                'text-truncate' : category.has_image,
-                            }"
-                            t-esc="category.name"/>
+                        <small class="d-block fw-bold text-center" t-esc="category.name"/>
                     </a>
                 </nav>
 
diff --git a/addons/pos_self_order/views/res_config_settings_views.xml b/addons/pos_self_order/views/res_config_settings_views.xml
index c3df9068b11..7e6b78c70e3 100644
--- a/addons/pos_self_order/views/res_config_settings_views.xml
+++ b/addons/pos_self_order/views/res_config_settings_views.xml
@@ -12,8 +12,11 @@
             </xpath>
             <block id="restaurant_section" position="after">
                 <block title="Mobile self-order &amp; Kiosk" id="self_ordering_section">
-                    <setting string="QR menu &amp; Kiosk activation" help="Let your customers order using their mobile or a kiosk.">
-                        <field name="pos_self_ordering_mode" />
+                    <setting string="QR menu &amp; Kiosk activation" help="Let your customers order using their mobile or a kiosk.">a
+                        <div class="content-group row">
+                            <label for="pos_self_ordering_mode" class="col-lg-4" string="Self Ordering"/>
+                            <field name="pos_self_ordering_mode" />
+                        </div>
                         <div class="d-flex flex-column align-items-start w-50" invisible="pos_self_ordering_mode == 'nothing'">
                             <button class="btn-link p-0" icon="oi-arrow-right" name="preview_self_order_app" type="object" string="Preview Web interface"/>
                             <button class="btn-link p-0" icon="oi-arrow-right" name="custom_link_action" type="object" string="Home buttons"/>
@@ -21,6 +24,18 @@
                             <button class="btn-link p-0" icon="oi-arrow-right" name="generate_qr_codes_zip" type="object" string="Download QR Codes" invisible="not pos_self_ordering_mode in ['consultation', 'mobile']"/>
                             <button groups="base.group_no_one" class="btn-link p-0" icon="oi-arrow-right" name="update_access_tokens" type="object" string="Reset QR Codes" invisible="not pos_self_ordering_mode in ['consultation', 'mobile']"/>
                         </div>
+                        <div class="content-group row mt-4" invisible="not pos_self_ordering_mode in ['kiosk', 'mobile']">
+                            <label for="pos_self_ordering_service_mode" class="col-lg-4" string="Service at" />
+                            <field name="pos_self_ordering_service_mode" readonly="not pos_module_pos_restaurant and pos_self_ordering_mode != 'kiosk'" />
+                        </div>
+                        <div class="content-group row" groups="base.group_no_one" invisible="not pos_self_ordering_mode in ['kiosk', 'mobile']">
+                            <label for="pos_self_ordering_default_user_id" class="col-lg-4" string="Default User"/>
+                            <field name="pos_self_ordering_default_user_id" />
+                        </div>
+                        <div id="self-payment-after" class="content-group row" invisible="not pos_self_ordering_mode in ['kiosk', 'mobile']">
+                            <label string="Pay after" for="pos_self_ordering_pay_after" class="col-lg-4"/>
+                            <field name="pos_self_ordering_pay_after" readonly="pos_self_ordering_mode == 'kiosk' or (pos_self_ordering_service_mode == 'counter' and pos_self_ordering_mode == 'mobile')" widget="upgrade_selection"/>
+                        </div>
                     </setting>
                     <setting string="Splash screens" help="Personalize your splash screen by adding one or multiple images to create a slideshow" invisible="pos_self_ordering_mode == 'nothing'">
                         <field name="pos_self_ordering_image_home_ids" class="w-100" widget="many2many_binary" />
@@ -44,20 +59,6 @@
                         <field name="pos_self_ordering_image_brand_name" invisible ="1"/>
                         <field name="pos_self_ordering_image_brand" class="w-100" filename="pos_self_ordering_image_brand_name"/>
                     </setting>
-                    <setting string="Options" help="All options for your Self devices" invisible="pos_self_ordering_mode in ['nothing', 'consultation']">
-                        <div class="content-group row" invisible="not pos_self_ordering_mode in ['kiosk', 'mobile']">
-                            <label for="pos_self_ordering_service_mode" class="col-lg-4" string="Service at" />
-                            <field name="pos_self_ordering_service_mode" readonly="not pos_module_pos_restaurant and pos_self_ordering_mode != 'kiosk'" />
-                        </div>
-                        <div class="content-group row" invisible="not pos_self_ordering_mode in ['kiosk', 'mobile']">
-                            <label for="pos_self_ordering_default_user_id" class="col-lg-4" string="Default User"/>
-                            <field name="pos_self_ordering_default_user_id" />
-                        </div>
-                        <div id="self-payment-after" class="content-group row" invisible="not pos_self_ordering_mode in ['kiosk', 'mobile']">
-                            <label string="Pay after" for="pos_self_ordering_pay_after" class="col-lg-4"/>
-                            <field name="pos_self_ordering_pay_after" readonly="pos_self_ordering_mode == 'kiosk' or (pos_self_ordering_service_mode == 'counter' and pos_self_ordering_mode == 'mobile')" widget="upgrade_selection"/>
-                        </div>
-                    </setting>
                     <setting string="Eat in / Take out" help="Adjust the tax rate based on whether customers are dining in or opting for takeout." invisible="not pos_self_ordering_mode in ['mobile', 'kiosk']">
                         <field name="pos_self_ordering_takeaway"/>
                         <div class="content-group" invisible="not pos_self_ordering_takeaway">