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

[FIX] pos: Move "back" button in the action pad

Browse Source 
When you clicked on "Review", there were not enough space to
properly check the order lines.
The "back" button took a lot of space in this screen.
Additionally, it shouldn't be the primary button in this view...

It's why this button has been moved in the action pad, next to the
payment button.

Task ID: 2453679

X-original-commit: 1418c9f10c80bea6393b47d5ffc1e0217ad1d4ba
Part-of: odoo/odoo#79448
Co-authored-by: Adrien Dieudonné <adr@odoo.com>
This commit is contained in:
Romain Estievenart
2021-11-05 19:44:47 +00:00
committed by Adrien Dieudonne
co-authored by Adrien Dieudonné
parent 7334cd3086
commit a4b617dd95
6 changed files with 30 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/point_of_sale/static/src/css/pos.css
+9 -3
View File
@@ -698,9 +698,10 @@ td {
flex-grow: 1;
}
.pos .actionpad .button {
--btn-height-size: 54px;
position: relative;
display: block;
height: 54px;
height: var(--btn-height-size);
width: 100%;
font-weight: bold;
vertical-align: middle;
@@ -732,12 +733,17 @@ td {
border-bottom-left-radius: 4px;
}
.pos .actionpad .button.pay {
height: 162px;
height: calc(var(--btn-height-size) * 3);
}
@media screen and (max-width: 768px) {
.pos .actionpad .button.pay {
height: calc(var(--btn-height-size) * 2);
}
}
.pos .actionpad .button.pay .pay-circle {
display: block;
font-size: 32px;
line-height: 54px;
line-height: var(--btn-height-size);
padding-top: 6px;
background: rgb(86, 86, 86);
color: white;
addons/point_of_sale/static/src/js/Misc/MobileOrderWidget.js
-1
View File
@@ -7,7 +7,6 @@ odoo.define('point_of_sale.MobileOrderWidget', function(require) {
class MobileOrderWidget extends PosComponent {
constructor() {
super(...arguments);
this.pane = this.props.pane;
this.update();
}
get order() {
addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductScreen.js
+5 -10
View File
@@ -39,8 +39,10 @@ odoo.define('point_of_sale.ProductScreen', function(require) {
// We don't do this in the `mounted` lifecycle method because it is called before
// the callbacks in `onMounted` hook.
onMounted(() => NumberBuffer.reset());
this.state = useState({ numpadMode: 'quantity' });
this.mobile_pane = this.props.mobile_pane || 'right';
this.state = useState({
numpadMode: 'quantity',
mobile_pane: this.props.mobile_pane || 'right',
});
}
mounted() {
if(this.env.pos.config.cash_control && this.env.pos.pos_session.state == 'opening_control') {
@@ -360,14 +362,7 @@ odoo.define('point_of_sale.ProductScreen', function(require) {
this.showScreen('PaymentScreen');
}
switchPane() {
if (this.mobile_pane === "left") {
this.mobile_pane = "right";
this.render();
}
else {
this.mobile_pane = "left";
this.render();
}
this.state.mobile_pane = this.state.mobile_pane === "left" ? "right" : "left";
}
}
ProductScreen.template = 'ProductScreen';
addons/point_of_sale/static/src/xml/Misc/MobileOrderWidget.xml
+8 -13
View File
@@ -3,19 +3,14 @@
<t t-name="MobileOrderWidget" owl="1">
<div class="switchpane">
<t t-if="pane === 'right'">
<button class="btn-switchpane" t-on-click="trigger('click-pay')">
<h1>Pay</h1>
<span><t t-esc="total" /></span>
</button>
<button class="btn-switchpane secondary" t-on-click="trigger('switchpane')">
<h1>Review</h1>
<span><t t-esc="items_number"/> items</span>
</button>
</t>
<t t-if="pane === 'left'">
<button class="btn-switchpane" t-on-click="trigger('switchpane')"><h1>Back</h1></button>
</t>
<button class="btn-switchpane" t-on-click="trigger('click-pay')">
<h1>Pay</h1>
<span><t t-esc="total" /></span>
</button>
<button class="btn-switchpane secondary" t-on-click="trigger('switchpane')">
<h1>Review</h1>
<span><t t-esc="items_number"/> items</span>
</button>
</div>
</t>
addons/point_of_sale/static/src/xml/Screens/ProductScreen/ActionpadWidget.xml
+4
View File
@@ -19,6 +19,10 @@
</div>
<t t-esc="props.actionName" />
</button>
<button t-if="env.isMobile" class="button back-button" t-on-click="trigger('switchpane')">
<i class="fa fa-angle-double-left"/>
Back
</button>
</div>
</t>
addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductScreen.xml
+4 -9
View File
@@ -4,7 +4,7 @@
<t t-name="ProductScreen" owl="1">
<div class="product-screen screen" t-att-class="{ oe_hidden: !props.isShown }">
<div class="screen-full-width">
<div class="leftpane pane-border" t-if="!env.isMobile || mobile_pane === 'left'">
<div class="leftpane pane-border" t-if="!env.isMobile || state.mobile_pane === 'left'">
<OrderWidget/>
<div class="pads">
<div class="control-buttons">
@@ -14,19 +14,14 @@
</div>
<div class="subpads">
<t t-set="_actionName">Payment</t>
<ActionpadWidget client="client" actionName="_actionName" />
<ActionpadWidget client="client" actionName="_actionName" t-on-switchpane="switchPane" />
<NumpadWidget activeMode="state.numpadMode" />
</div>
</div>
<t t-if="env.isMobile">
<MobileOrderWidget pane="mobile_pane" t-on-switchpane="switchPane"/>
</t>
</div>
<div class="rightpane" t-if="!env.isMobile || mobile_pane === 'right'">
<div class="rightpane" t-if="!env.isMobile || state.mobile_pane === 'right'">
<ProductsWidget mobileSearchBarIsShown="props.mobileSearchBarIsShown"/>
<t t-if="env.isMobile">
<MobileOrderWidget pane="mobile_pane" t-on-switchpane="switchPane"/>
</t>
<MobileOrderWidget t-if="env.isMobile" pane="state.mobile_pane" t-on-switchpane="switchPane"/>
</div>
</div>
</div>