diff --git a/addons/point_of_sale/static/src/app/navbar/navbar.js b/addons/point_of_sale/static/src/app/navbar/navbar.js index f56139be1e0..3df9be05c6a 100644 --- a/addons/point_of_sale/static/src/app/navbar/navbar.js +++ b/addons/point_of_sale/static/src/app/navbar/navbar.js @@ -9,9 +9,10 @@ import { HeaderButton } from "@point_of_sale/js/ChromeWidgets/HeaderButton"; import { ProxyStatus } from "@point_of_sale/js/ChromeWidgets/ProxyStatus"; import { SaleDetailsButton } from "@point_of_sale/js/ChromeWidgets/SaleDetailsButton"; import { SyncNotification } from "@point_of_sale/js/ChromeWidgets/SyncNotification"; +import { BackendButton } from "@point_of_sale/js/ChromeWidgets/BackendButton"; import { CashMovePopup } from "./cash_move_popup/cash_move_popup"; import { TicketScreen } from "@point_of_sale/js/Screens/TicketScreen/TicketScreen"; -import { Component } from "@odoo/owl"; +import { Component, useState, useExternalListener } from "@odoo/owl"; export class Navbar extends Component { static template = "point_of_sale.Navbar"; @@ -23,6 +24,7 @@ export class Navbar extends Component { ProxyStatus, SaleDetailsButton, SyncNotification, + BackendButton, }; static props = { showCashMoveButton: Boolean, @@ -33,7 +35,16 @@ export class Navbar extends Component { this.popup = useService("popup"); this.notification = useService("pos_notification"); this.hardwareProxy = useService("hardware_proxy"); + this.state = useState({ isMenuOpened: false }); + useExternalListener(window, "mouseup", this.onOutsideClick); } + + onOutsideClick() { + if (this.state.isMenuOpened) { + this.state.isMenuOpened = false; + } + } + get customerFacingDisplayButtonIsShown() { return this.env.pos.config.iface_customer_facing_display; } @@ -81,4 +92,16 @@ export class Navbar extends Component { } return 0; } + + isBurgerMenuClosed() { + return !this.state.isMenuOpened; + } + + closeMenu() { + this.state.isMenuOpened = false; + } + + openMenu() { + this.state.isMenuOpened = true; + } } diff --git a/addons/point_of_sale/static/src/app/navbar/navbar.xml b/addons/point_of_sale/static/src/app/navbar/navbar.xml index 4a96a0235a7..5c692b92ba7 100644 --- a/addons/point_of_sale/static/src/app/navbar/navbar.xml +++ b/addons/point_of_sale/static/src/app/navbar/navbar.xml @@ -6,16 +6,6 @@
-
- - Cash In/Out -
-
-
- -
-
Orders
-
@@ -24,7 +14,33 @@ - +
+
+ +
+
+
    +
  • + +
      +
    • +
      + Orders +
      +
      • +
    • + Cash In/Out +
      • + +
      + +
      + +
      +
      +
    +
    • +
diff --git a/addons/point_of_sale/static/src/js/ChromeWidgets/BackendButton.js b/addons/point_of_sale/static/src/js/ChromeWidgets/BackendButton.js new file mode 100644 index 00000000000..75f9cebdd59 --- /dev/null +++ b/addons/point_of_sale/static/src/js/ChromeWidgets/BackendButton.js @@ -0,0 +1,17 @@ +/** @odoo-module */ + +import { useService } from "@web/core/utils/hooks"; +import { Component } from "@odoo/owl"; + +export class BackendButton extends Component { + static template = "BackendButton"; + + setup() { + super.setup(...arguments); + this.pos = useService("pos"); + } + + async onClick() { + this.pos.closePos(); + } +} diff --git a/addons/point_of_sale/static/src/scss/pos.scss b/addons/point_of_sale/static/src/scss/pos.scss index 5b9d70ac8af..c578546fa61 100644 --- a/addons/point_of_sale/static/src/scss/pos.scss +++ b/addons/point_of_sale/static/src/scss/pos.scss @@ -363,18 +363,12 @@ td { cursor: pointer; } -.pos .ticket-button { - display: flex; -} - /* b) The right part of the top-bar */ .pos .pos-rightheader { flex-grow: 1; height:100%; display: flex; - overflow : hidden; - overflow-x: auto; } .pos .pos-rightheader > * { border-right: 1px solid $o-brand-odoo; @@ -394,11 +388,17 @@ td { padding: 0 10px; /*$dropdown-item-padding-x * .5*/ } +.pos .status-buttons .cashier-name { + display: flex; + align-items: center; + gap: 5px; +} + .pos .status-buttons i.fa { font-size: large; } -.pos .status-buttons .avatar, .pos .status-buttons i.fa-sign-out { +.pos .status-buttons .avatar { vertical-align: middle; } @@ -480,20 +480,6 @@ td { flex: 1; } -/* c) The session buttons */ - -.pos .pos-rightheader .header-button { - cursor: pointer; - - -webkit-transition-property: background; - -webkit-transition-duration: 0.2s; - -webkit-transition-timing-function: ease-out; -} -.pos .pos-rightheader .header-button:active{ - background: rgba(0,0,0,0.2); - color:#EEE; -} - /* c) The notifications indicator */ .pos .oe_status{ @@ -3411,28 +3397,6 @@ td { transition: all 300ms linear; } -.ticket-button { - display: flex; - align-items: center; - padding: 0 15px; - font-size: medium; - color: white; -} - -.ticket-button.highlight { - background: rgba(0, 0, 0, .08); -} - -.ticket-button:hover { - background: rgba(0, 0, 0, .08); - cursor: pointer; -} - -.ticket-button .with-badge { - margin-right: 0.7em; - font-size: larger; -} - [badge] { position: relative; } @@ -3447,8 +3411,8 @@ td { padding: 2px; position: absolute; text-align: center; - left: 0.6em; - bottom: 0.6em; + left: 5em; + bottom: 0; } [badge^="-"]:after, @@ -3457,7 +3421,7 @@ td { display: none; } -.cash-move-button { +.navbar-button { display: flex; align-items: center; padding: 0 15px; @@ -3465,7 +3429,7 @@ td { color: white; } -.cash-move-button:hover { +.navbar-button:hover { background: rgba(0, 0, 0, .08); cursor: pointer; } @@ -3783,3 +3747,36 @@ td { transform: translate(24px, 0); } } + +.menu { + color: white; + z-index: 1000; + font-size: medium; + + &-item { + display: flex; + position: relative; + + .sub-menu { + position: absolute; + top: 33px; + right: -16px; + width: 216px; + display: flex; + flex-direction: column; + background-color: white; + z-index: 9999; + align-items: stretch; + + .menu-item { + padding: 10px; + + span, i { + color: black; + inline-size: 196px; + overflow-wrap: break-word; + } + } + } + } +} diff --git a/addons/point_of_sale/static/src/xml/ChromeWidgets/BackendButton.xml b/addons/point_of_sale/static/src/xml/ChromeWidgets/BackendButton.xml new file mode 100644 index 00000000000..f3192e3e2b5 --- /dev/null +++ b/addons/point_of_sale/static/src/xml/ChromeWidgets/BackendButton.xml @@ -0,0 +1,12 @@ + + + + +
  • + + Backend + +
    • +     + +     diff --git a/addons/point_of_sale/static/src/xml/ChromeWidgets/CashierName.xml b/addons/point_of_sale/static/src/xml/ChromeWidgets/CashierName.xml index 33f45ac1476..5a0a76c929a 100644 --- a/addons/point_of_sale/static/src/xml/ChromeWidgets/CashierName.xml +++ b/addons/point_of_sale/static/src/xml/ChromeWidgets/CashierName.xml @@ -3,7 +3,7 @@
    - +
    diff --git a/addons/point_of_sale/static/src/xml/ChromeWidgets/CustomerFacingDisplayButton.xml b/addons/point_of_sale/static/src/xml/ChromeWidgets/CustomerFacingDisplayButton.xml index 68d210ce50a..2e699e932be 100644 --- a/addons/point_of_sale/static/src/xml/ChromeWidgets/CustomerFacingDisplayButton.xml +++ b/addons/point_of_sale/static/src/xml/ChromeWidgets/CustomerFacingDisplayButton.xml @@ -2,7 +2,7 @@ -
    +
  • @@ -12,8 +12,9 @@
    -
    -
    • + + Customer Screen +     diff --git a/addons/point_of_sale/static/src/xml/ChromeWidgets/HeaderButton.xml b/addons/point_of_sale/static/src/xml/ChromeWidgets/HeaderButton.xml index d1a883c84ac..df358d34545 100644 --- a/addons/point_of_sale/static/src/xml/ChromeWidgets/HeaderButton.xml +++ b/addons/point_of_sale/static/src/xml/ChromeWidgets/HeaderButton.xml @@ -2,9 +2,11 @@ -
    - Close -
    +
  • + + Close Session + +
    • diff --git a/addons/point_of_sale/static/src/xml/Popups/ClosePosPopup.xml b/addons/point_of_sale/static/src/xml/Popups/ClosePosPopup.xml index fcca0f7a265..3c47004a2ac 100644 --- a/addons/point_of_sale/static/src/xml/Popups/ClosePosPopup.xml +++ b/addons/point_of_sale/static/src/xml/Popups/ClosePosPopup.xml @@ -80,7 +80,6 @@