admin.suherdy/pos_ui_optimization
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement mobile-responsive portrait mode layout for PoS screens with tab-based navigation

Browse Source
This commit is contained in:
Suherdy Yacob 2026-05-26 08:43:33 +07:00
parent 43e908ce7d
commit 945db1d0c2
9 changed files with 726 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
.gitignore vendored
View File

@ -1,6 +1,42 @@
*.pyc
*~
# Python
__pycache__/
.DS_Store
*.py[cod]
*.pyo
*.pyd
*.egg-info/
*.egg
*.pyc
# Odoo
.odoo_module_info
# Editor / IDE
.vscode/
.idea/
*.swp
*.swo
*~
# OS
.DS_Store
.DS_Store?
._*
.Spotlight-V500
.Trashes
ehthumbs.db
Thumbs.db
# Node / npm (if any frontend tooling)
node_modules/
npm-debug.log*
yarn-error.log
# Logs
*.log
# Git merge artifacts
*.orig
*.rej
# Compiled / generated assets (Odoo builds these at runtime)
/static/description/index.html

136
README.md
View File

@ -1,27 +1,131 @@
# POS UI Optimization
This Odoo 19 module optimizes the Point of Sale (POS) user interface for low-RAM devices (e.g., Android tablets with 2GB RAM).
**Odoo 19 | Custom Addon**
Optimizes the Point of Sale UI for resource-constrained devices and adds a **switchable portrait display mode** designed for 6-inch touchscreen terminals.
---
## Features
- **Product List Incremental Loading**: Renders products in batches of 40 as you scroll, significantly reducing memory usage in categories with many products.
- **Order Cart Incremental Loading**: Efficiently handles large orders by rendering order lines incrementally as you scroll through the cart.
- **Improved Responsiveness**: Keeps the browser DOM light and prevents "white blank" screens caused by memory exhaustion.
- **Legacy Browser Support**: Designed without modern ES2020 JavaScript syntax (like optional chaining `?.`) to ensure compatibility with older Android browser engines found on specific legacy POS hardware.
### 1. Incremental Product Rendering
Prevents low-RAM devices from freezing when the product catalogue is large.
- Only **40 products** are rendered on initial load
- More products load automatically as the user scrolls down
- Resets the counter when the search word or category changes
### 2. Incremental Order Line Rendering
Same approach for the order/cart display.
- Only **20 order lines** rendered initially
- Scrolling loads more lines progressively
- Ensures the selected line is always visible (expands count if needed)
### 3. Portrait Mode (6-inch Display)
A dedicated compact layout for portrait-orientation small screens. Designed for devices like 6-inch Android POS terminals where the standard Odoo two-column layout clutters the screen.
#### Layout
```
┌──────────────────────────────┐
│ Navbar (compact) │
├──────────────────────────────┤
│ │
│ Active tab pane: │
│ Products / Cart / Numpad │
│ │
├──────────────────────────────┤
│ TOTAL: Rp X,XXX [Send][Pay]│ ← always visible
├──────────────────────────────┤
│ [Products] [Cart] [Numpad]│ ← bottom tab bar
└──────────────────────────────┘
```
#### Key Differences from Standard Mode
| Feature | Standard | Portrait |
|---|---|---|
| Layout | Two-column (order left, products right) | Single pane with bottom tabs |
| Product grid | `auto-fill minmax(115px)` | Fixed 2 columns |
| Product images | Full aspect ratio | Capped at 90px height |
| Numpad | Shown inline in left pane | Dedicated "Numpad" tab |
| Pay/Send | Inside left pane action pad | Always-visible bottom strip |
| Navbar | Full labels | Compact with smaller padding |
#### Auto-Activation
Portrait mode **auto-activates** when the browser viewport width is **< 400 px** on first load. A manual override is always available via the burger menu (☰ → Switch to Portrait/Standard Mode). The choice is saved to `localStorage`.
#### Send Button Behavior
The **Send** button appears only when:
1. The POS is in restaurant mode (`module_pos_restaurant = True`)
2. At least one **Preparation Category** is configured in POS → Kitchen Printers settings
3. The current order has unsent changes (`nbrOfChanges > 0`)
4. The order is not a direct sale / refund
This mirrors Odoo's standard restaurant `swapButton` logic exactly.
---
## Installation
1. Place the `pos_ui_optimization` folder in your Odoo custom addons directory.
2. Restart your Odoo server.
3. In Odoo, activate **Developer Mode**.
4. Go to **Apps** -> **Update Apps List**.
5. Search for `POS UI Optimization`.
6. Click **Install**.
1. Copy the `pos_ui_optimization` folder into your `customaddons` directory
2. Restart the Odoo server
3. Go to **Apps** → search for **POS UI Optimization** → Install
4. Reload your POS session
## Technical Details
## Upgrade
This module uses Odoo's JavaScript patching mechanism (`patch` from `@web/core/utils/patch`) to extend the core POS components:
- `ProductScreen`: Adds `displayedProductsCount` state via `owl`'s `useEffect` and an overridden `onScroll` hook to the product container.
- `OrderDisplay`: Adds `displayedCount` state and a scroll listener to the combo sorted order lines container.
```bash
./odoo-bin -u pos_ui_optimization -d <your_database>
```
No core Odoo files are modified.
---
## Compatibility
| Item | Value |
|---|---|
| Odoo version | 19.0 |
| Depends on | `point_of_sale` |
| Compatible with | `pos_restaurant`, `pos_custom_access`, `pos_kitchen_printer` |
| License | LGPL-3 |
---
## File Structure
```
pos_ui_optimization/
├── __manifest__.py
├── README.md
├── static/
│ └── src/
│ ├── app/
│ │ ├── components/
│ │ │ ├── navbar/
│ │ │ │ ├── navbar_patch.js # Display Mode toggle in burger menu
│ │ │ │ └── navbar_patch.xml
│ │ │ └── order_display/
│ │ │ ├── order_display_patch.js # Incremental order line rendering
│ │ │ └── order_display_patch.xml
│ │ ├── screens/
│ │ │ └── product_screen/
│ │ │ ├── portrait_mode_patch.js # Tab state (products/cart/numpad)
│ │ │ ├── portrait_screen.xml # Portrait layout XML patch
│ │ │ ├── product_screen_patch.js # Incremental product rendering
│ │ │ └── product_screen_patch.xml
│ │ └── services/
│ │ └── portrait_mode.js # Auto-detect + localStorage service
│ └── scss/
│ └── portrait.scss # All portrait CSS (scoped to .pos-portrait)
```
---
## Author
**Suherdy Yacob**

11
__manifest__.py
View File

@ -8,10 +8,21 @@
'data': [],
'assets': {
'point_of_sale._assets_pos': [
# Incremental rendering patches (existing)
'pos_ui_optimization/static/src/app/components/order_display/order_display_patch.js',
'pos_ui_optimization/static/src/app/components/order_display/order_display_patch.xml',
'pos_ui_optimization/static/src/app/screens/product_screen/product_screen_patch.js',
'pos_ui_optimization/static/src/app/screens/product_screen/product_screen_patch.xml',
# Portrait mode — service must load first
'pos_ui_optimization/static/src/app/services/portrait_mode.js',
# Navbar display-mode toggle
'pos_ui_optimization/static/src/app/components/navbar/navbar_patch.js',
'pos_ui_optimization/static/src/app/components/navbar/navbar_patch.xml',
# ProductScreen portrait tab state + layout
'pos_ui_optimization/static/src/app/screens/product_screen/portrait_mode_patch.js',
'pos_ui_optimization/static/src/app/screens/product_screen/portrait_screen.xml',
# Portrait CSS (must load after all XML patches)
'pos_ui_optimization/static/src/scss/portrait.scss',
],
},
'installable': True,

15
static/src/app/components/navbar/navbar_patch.js Normal file
View File

@ -0,0 +1,15 @@
/** @odoo-module **/
import { Navbar } from "@point_of_sale/app/components/navbar/navbar";
import { patch } from "@web/core/utils/patch";
import { useService } from "@web/core/utils/hooks";
patch(Navbar.prototype, {
setup() {
super.setup();
this.portraitMode = useService("portrait_mode");
},
toggleDisplayMode() {
this.portraitMode.toggle();
},
});

18
static/src/app/components/navbar/navbar_patch.xml Normal file
View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-inherit="point_of_sale.Navbar" t-inherit-mode="extension" owl="1">
<!-- Insert "Display Mode" toggle before the last DropdownItem (Close Register) -->
<xpath expr="//DropdownItem[last()]" position="before">
<DropdownItem onSelected="() => this.toggleDisplayMode()">
<t t-if="portraitMode.isPortrait">
<i class="fa fa-fw fa-desktop me-1 text-primary"/>
<span>Switch to Standard Mode</span>
</t>
<t t-else="">
<i class="fa fa-fw fa-mobile me-1 text-success"/>
<span>Switch to Portrait Mode</span>
</t>
</DropdownItem>
</xpath>
</t>
</templates>

22
static/src/app/screens/product_screen/portrait_mode_patch.js Normal file
View File

@ -0,0 +1,22 @@
/** @odoo-module **/
import { ProductScreen } from "@point_of_sale/app/screens/product_screen/product_screen";
import { patch } from "@web/core/utils/patch";
import { useState } from "@odoo/owl";
import { useService } from "@web/core/utils/hooks";
patch(ProductScreen.prototype, {
setup() {
super.setup();
this.portraitMode = useService("portrait_mode");
this.portraitState = useState({ tab: "products" });
},
get portraitTab() {
return this.portraitState.tab;
},
switchPortraitTab(tab) {
this.portraitState.tab = tab;
},
});

107
static/src/app/screens/product_screen/portrait_screen.xml Normal file
View File

@ -0,0 +1,107 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-inherit="point_of_sale.ProductScreen" t-inherit-mode="extension" owl="1">
<!--
1. Stamp portrait tab classes onto the root product-screen div.
CSS uses these classes to show/hide left vs right pane.
-->
<xpath expr="//div[hasclass('product-screen')]" position="attributes">
<attribute name="t-att-class">{
'is-portrait': portraitMode.isPortrait,
'portrait-tab-products': portraitMode.isPortrait and portraitTab === 'products',
'portrait-tab-cart': portraitMode.isPortrait and portraitTab === 'cart',
'portrait-tab-numpad': portraitMode.isPortrait and portraitTab === 'numpad',
}</attribute>
</xpath>
<!--
2. Inject the portrait footer (pay strip + tab bar) at the bottom
of the product-screen div. Only rendered in portrait mode.
ActionpadWidget from pos_custom_access is NOT duplicated here —
we reuse the existing one inside .leftpane (already patched).
-->
<xpath expr="//div[hasclass('product-screen')]" position="inside">
<div t-if="portraitMode.isPortrait" class="portrait-footer">
<!-- Pay strip: always visible, shows order total + action buttons -->
<div class="portrait-pay-strip d-flex align-items-center gap-2 px-3 py-2">
<div class="d-flex flex-column flex-grow-1 min-w-0">
<small class="text-muted lh-1" style="font-size:0.68rem;letter-spacing:.03em;">TOTAL</small>
<strong class="portrait-total-amount text-truncate lh-1 mt-1" t-esc="currentOrder.isEmpty() ? '—' : total"/>
</div>
<!--
Send button logic mirrors pos_restaurant's swapButton:
swapButton = module_pos_restaurant AND preparationCategories.size > 0
Send shows = swapButton AND !isDirectSale AND nbrOfChanges > 0
-->
<button
t-if="swapButton and !currentOrder.isEmpty() and !currentOrder.isDirectSale and nbrOfChanges"
class="btn btn-primary portrait-send-btn"
t-on-click="() => doSubmitOrder.call()"
t-att-disabled="doSubmitOrder.status === 'loading'">
<i class="fa fa-paper-plane me-1"/>Send
</button>
<!--
Pay button:
- In restaurant+swapButton mode: secondary when there are changes to send, primary when all sent
- In non-restaurant mode: always primary (gated by pos.canPay)
-->
<button
t-if="!currentOrder.isEmpty() and pos.canPay and !pos.scanning"
class="btn portrait-pay-btn"
t-att-class="{
'btn-primary': !swapButton or !nbrOfChanges,
'btn-secondary': swapButton and nbrOfChanges,
}"
t-on-click="() => pos.pay()">
<i class="fa fa-credit-card me-1"/>Pay
</button>
<button
t-elif="!currentOrder.isEmpty()"
class="btn btn-secondary portrait-pay-btn"
disabled="disabled">
<i class="fa fa-credit-card me-1"/>Pay
</button>
<button
t-else=""
class="btn btn-outline-secondary portrait-pay-btn"
disabled="disabled">
<i class="fa fa-credit-card me-1"/>Pay
</button>
</div>
<!-- Bottom tab bar -->
<div class="portrait-tab-bar d-flex">
<button
class="portrait-tab-btn flex-fill"
t-att-class="{'active': portraitTab === 'products'}"
t-on-click="() => this.switchPortraitTab('products')">
<i class="fa fa-th fa-lg"/>
<span>Products</span>
</button>
<button
class="portrait-tab-btn flex-fill position-relative"
t-att-class="{'active': portraitTab === 'cart'}"
t-on-click="() => this.switchPortraitTab('cart')">
<i class="fa fa-shopping-cart fa-lg"/>
<span>Cart</span>
<span t-if="!currentOrder.isEmpty()" class="portrait-badge" t-esc="items"/>
</button>
<button
class="portrait-tab-btn flex-fill"
t-att-class="{'active': portraitTab === 'numpad'}"
t-on-click="() => this.switchPortraitTab('numpad')">
<i class="fa fa-keyboard-o fa-lg"/>
<span>Numpad</span>
</button>
</div>
</div>
</xpath>
</t>
</templates>

63
static/src/app/services/portrait_mode.js Normal file
View File

@ -0,0 +1,63 @@
/** @odoo-module **/
import { reactive } from "@odoo/owl";
import { registry } from "@web/core/registry";
const AUTO_BREAKPOINT = 400;
const STORAGE_KEY = "posDisplayMode";
const portraitModeService = {
dependencies: [],
start() {
// Determine initial mode: manual preference takes priority, then auto-detect
const stored = localStorage.getItem(STORAGE_KEY);
let isPortrait;
if (stored === "portrait") {
isPortrait = true;
} else if (stored === "standard") {
isPortrait = false;
} else {
// No manual preference — auto-detect from screen width
isPortrait = window.innerWidth < AUTO_BREAKPOINT;
}
const state = reactive({ isPortrait });
const applyClass = () => {
document.body.classList.toggle("pos-portrait", state.isPortrait);
};
applyClass();
// Auto-switch on resize (only when no manual preference is stored)
let resizeTimer;
window.addEventListener("resize", () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
if (!localStorage.getItem(STORAGE_KEY)) {
const autoPortrait = window.innerWidth < AUTO_BREAKPOINT;
if (state.isPortrait !== autoPortrait) {
state.isPortrait = autoPortrait;
applyClass();
}
}
}, 200);
});
return {
get isPortrait() {
return state.isPortrait;
},
toggle() {
state.isPortrait = !state.isPortrait;
localStorage.setItem(
STORAGE_KEY,
state.isPortrait ? "portrait" : "standard"
);
applyClass();
},
};
},
};
registry.category("services").add("portrait_mode", portraitModeService);

331
static/src/scss/portrait.scss Normal file
View File

@ -0,0 +1,331 @@
/**
* Portrait Mode — POS UI for 6-inch portrait devices
* All rules scoped under .pos-portrait to avoid affecting standard mode.
*/
/* ============================================================
NAVBAR — compact, icon-friendly
============================================================ */
.pos-portrait {
.pos-topheader {
min-height: 44px !important;
padding: 4px 6px !important;
.btn {
padding: 5px 10px !important;
font-size: 0.82rem !important;
}
// Shrink search input width
.o_searchview {
max-width: 120px;
}
// Order tabs: shorten
.order-tabs {
max-width: 120px;
overflow: hidden;
}
}
/* ============================================================
PRODUCT SCREEN ROOT — vertical single-pane
============================================================ */
.product-screen {
flex-direction: column !important;
position: relative !important; // anchor for absolute footer
/* ---- LEFT PANE (Cart / Numpad) ---- */
.leftpane {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: 1 1 auto !important;
flex-shrink: 1 !important;
border-right: none !important;
border-bottom: 1px solid #dee2e6;
// Must match portrait-footer height so content is not covered
padding-bottom: 122px !important;
// Hidden by default; tab-switching reveals it
display: none !important;
// In portrait mode the desktop ControlButtons row is hidden
.control-buttons {
display: none !important;
}
// Compact numpad for fat fingers
.numpad {
.numpad-button {
min-height: 54px !important;
font-size: 1.15rem !important;
}
}
// Give OrderSummary room to scroll
.order-container {
// Enough room: screen height minus navbar(44) minus pay-strip(52) minus tab-bar(60) minus numpad+actionpad
max-height: calc(100dvh - 44px - 122px - 220px);
overflow-y: auto;
}
// Keep subpads tight
.subpads {
padding-top: 6px !important;
}
// Hide the ActionpadWidget in leftpane — pay strip handles Pay/Send
// (keeps the restaurant patches active for nbrOfChanges tracking,
// but we show our own buttons in the pay strip)
.actionpad {
display: none !important;
}
}
/* ---- RIGHT PANE (Products) ---- */
.rightpane {
flex: 1 1 auto !important;
width: 100% !important;
max-width: 100% !important;
// Push content above the fixed footer (pay strip ~52px + tab bar ~60px + gap)
padding-bottom: 122px !important;
overflow: hidden;
}
/* ---- 2-COLUMN PRODUCT GRID ---- */
.product-list {
grid-template-columns: repeat(2, 1fr) !important;
gap: 6px !important;
padding: 6px !important;
}
/* ---- COMPACT PRODUCT CARDS ---- */
// Cap the image so cards don't dominate the screen
.product-img {
max-height: 90px !important;
// ratio-4x3 makes it ~75% of width — on 2-col that's ~135px.
// Override the ratio so the image stays <= 90px tall.
--bs-aspect-ratio: 60% !important;
img {
max-height: 90px !important;
object-fit: cover;
}
}
// Minimum card height for no-image products
.rightpane .product:where(.product:not(:has(.product-img))) {
min-height: 4.5rem !important;
}
// Product name: 2 lines max, smaller font
.product-name {
font-size: 0.78rem !important;
-webkit-line-clamp: 2 !important;
&.no-image {
aspect-ratio: 3 / 2 !important;
}
}
/* ---- HIDE ORIGINAL MOBILE SWITCHPANE ---- */
// The standard "Pay | Cart" bottom bar must not show in portrait mode
.switchpane {
display: none !important;
}
/* ============================================================
TAB VISIBILITY — driven by class on .product-screen
============================================================ */
&.portrait-tab-products {
.leftpane { display: none !important; }
.rightpane { display: flex !important; }
}
&.portrait-tab-cart {
.leftpane {
display: flex !important;
// Show full left pane including numpad
.subpads { display: flex; }
}
.rightpane { display: none !important; }
}
&.portrait-tab-numpad {
.leftpane {
display: flex !important;
// Compact order list, expand numpad area
.order-container { max-height: 35vh !important; }
}
.rightpane { display: none !important; }
}
/* ============================================================
PORTRAIT FOOTER — fixed at the bottom of .product-screen
============================================================ */
.portrait-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
flex-direction: column;
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}
/* ---- PAY STRIP ---- */
.portrait-pay-strip {
background: #fff;
border-top: 1px solid #dee2e6;
min-height: 52px;
.portrait-total-amount {
font-size: 1.1rem;
font-weight: 700;
letter-spacing: -0.02em;
}
.portrait-pay-btn,
.portrait-send-btn {
border-radius: 10px;
font-weight: 600;
font-size: 0.9rem;
padding: 8px 14px;
}
.portrait-pay-btn {
min-width: 80px;
}
.portrait-send-btn {
min-width: 80px;
}
}
/* ---- BOTTOM TAB BAR ---- */
.portrait-tab-bar {
background: #fff;
border-top: 2px solid #e9ecef;
height: 60px;
.portrait-tab-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: none;
background: transparent;
font-size: 0.68rem;
font-weight: 500;
color: #6c757d;
gap: 2px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
position: relative;
i {
font-size: 1.15rem;
line-height: 1;
}
span {
line-height: 1;
}
&.active {
color: #6610f2;
background: rgba(102, 16, 242, 0.06);
i { color: #6610f2; }
// Active indicator line at top
&::before {
content: '';
position: absolute;
top: 0;
left: 20%;
right: 20%;
height: 3px;
background: #6610f2;
border-radius: 0 0 3px 3px;
}
}
&:hover:not(.active) {
background: rgba(0, 0, 0, 0.04);
color: #495057;
}
}
}
/* ---- CART BADGE (item count on Cart tab) ---- */
.portrait-badge {
position: absolute;
top: 6px;
right: calc(50% - 16px);
background: #6610f2;
color: #fff;
font-size: 0.6rem;
font-weight: 700;
min-width: 16px;
height: 16px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
line-height: 1;
}
}
/* ============================================================
CATEGORY SELECTOR — compact chips on portrait
============================================================ */
.category-selector {
.category-list {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
gap: 4px !important;
padding: 4px 6px !important;
button {
font-size: 0.75rem !important;
padding: 4px 10px !important;
white-space: nowrap;
flex-shrink: 0;
}
}
}
/* ============================================================
ORDER LINES — compact for small screen
============================================================ */
.orderline {
padding: 6px 8px !important;
.product-name {
font-size: 0.82rem !important;
}
.product-price {
font-size: 0.82rem !important;
}
.qty {
font-size: 0.85rem !important;
}
}
/* ============================================================
ORDER SUMMARY TOTAL ROW
============================================================ */
.order-summary {
font-size: 0.85rem !important;
.fs-3 {
font-size: 1.1rem !important;
}
}
}