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

[IMP] point_of_sale: misc ui changes product_screen

Browse Source 
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>
This commit is contained in:
Loukas Wets (lowe)
2023-10-27 11:35:00 +00:00
parent 75b3282246
commit 3c632bbac3
12 changed files with 39 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/point_of_sale/static/src/app/generic_components/category_selector/category_selector.xml
+1 -1
View File
@@ -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"
addons/point_of_sale/static/src/app/pos_app.scss
+12
View File
@@ -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;
}
addons/point_of_sale/static/src/app/screens/payment_screen/payment_screen.xml
+2 -2
View File
@@ -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>
addons/point_of_sale/static/src/app/screens/product_screen/product_list/control_panel/control_panel.scss
-3
View File
@@ -1,3 +0,0 @@
.h-12 {
height: 12%;
}
addons/point_of_sale/static/src/app/screens/product_screen/product_list/control_panel/control_panel.xml
+1 -1
View File
@@ -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)"
addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.scss
-4
View File
@@ -11,7 +11,3 @@
.button-no-demo {
color: #017e84 !important;
}
.h-12 {
height: 12%;
}
addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.xml
+2 -2
View File
@@ -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'}"
addons/point_of_sale/static/src/app/screens/product_screen/product_screen.scss
+3
View File
@@ -0,0 +1,3 @@
.w-60 {
width: 60%;
}
addons/point_of_sale/static/src/app/screens/product_screen/product_screen.xml
+2 -2
View File
@@ -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>
addons/point_of_sale/static/src/app/screens/receipt_screen/receipt_screen.xml
+4 -4
View File
@@ -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>
addons/point_of_sale/static/src/overrides/ui_service.js
+10
View File
@@ -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;
},
});
addons/pos_restaurant/static/src/overrides/components/product_screen/product_screen.xml
+2 -2
View File
@@ -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>