From 3a9bd22ffb24343ffa31478530123eefe0c813b2 Mon Sep 17 00:00:00 2001
From: Romain Estievenart <res@odoo.com>
Date: Tue, 30 Mar 2021 11:49:23 +0000
Subject: [PATCH] [FIX] pos: Improve status-buttons UX on small screen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Show user avatar logo on desktop and mobile.
  We are now able to know which employee is currently connected on mobile.
  The user name is still shown on desktop but didn't appear for small device.

- Add "sign-out" icon on desktop and mobile.

- Remove label strings like "Close", "Orders" and the username to
  gain some space; the icons will do the job.

- Remove "close_button" unused class

Task ID: 2453679

X-original-commit: 551ef472ec42965af38f68343b9fe50ea7ec4c88
Part-of: odoo/odoo#79448
Co-authored-by: Adrien Dieudonné <adr@odoo.com>
---
 addons/point_of_sale/static/src/css/pos.css   | 48 +++++++++----------
 .../src/js/ChromeWidgets/CashierName.js       | 13 ++---
 .../point_of_sale/static/src/xml/Chrome.xml   |  4 +-
 .../src/xml/ChromeWidgets/CashierName.xml     |  4 +-
 .../src/xml/ChromeWidgets/HeaderButton.xml    |  4 +-
 .../src/xml/ChromeWidgets/TicketButton.xml    |  2 +-
 6 files changed, 35 insertions(+), 40 deletions(-)

diff --git a/addons/point_of_sale/static/src/css/pos.css b/addons/point_of_sale/static/src/css/pos.css
index 66b81720ceb..4e9f4b352f7 100644
--- a/addons/point_of_sale/static/src/css/pos.css
+++ b/addons/point_of_sale/static/src/css/pos.css
@@ -385,7 +385,27 @@ td {
 .pos .status-buttons {
     display: flex;
     justify-content: flex-end;
-    flex: 1;
+    height: 100%;
+    color: white;
+}
+
+.pos .status-buttons > div {
+    display: flex;
+    align-items: center;
+    padding: 0 10px; /*$dropdown-item-padding-x * .5*/
+}
+
+.pos .status-buttons i.fa {
+    font-size: large;
+}
+
+.pos .status-buttons .avatar, .pos .status-buttons i.fa-sign-out {
+    vertical-align: middle;
+}
+
+.pos .status-buttons .avatar {
+    width: 25px;
+    border-radius: 50%;
 }
 
 .pos .order-button{
@@ -474,25 +494,13 @@ td {
 
 /*  c) The session buttons */
 
-.pos .pos-rightheader .header-button{
-    float: right;
-    height: 48px;
-    padding-left: 16px;
-    padding-right: 16px;
-    border-right: 1px solid #875A7B;
-    border-left: 1px solid #875A7B;
-    color: #DDD;
-    line-height: 48px;
-    text-align: center;
+.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:last-child{
-    border-left:  1px solid #875A7B;
-}
 .pos .pos-rightheader .header-button:active{
     background: rgba(0,0,0,0.2);
     color:#EEE;
@@ -501,22 +509,12 @@ td {
 /*  c) The notifications indicator */
 
 .pos .oe_status{
-    float:right;
-    color: rgba(255,255,255,0.4);
-    padding: 14px;
-    line-height: 20px;
-    font-size: 20px;
-    vertical-align:middle;
-    font-style: italic;
     cursor:pointer;
 }
 .pos .oe_status.oe_inactive{
     cursor: default;
 }
 .pos .oe_status .oe_icon{
-    display:inline-block;
-    cursor:pointer;
-    width:20px; height:16px;
     color: white;
 }
 .pos .oe_status .oe_red,
@@ -3627,7 +3625,7 @@ td {
     font-size: 17px;
 }
 
-.pos .pos-topheader .oe_status:hover {
+.pos .pos-topheader .status-buttons > div:hover {
     background: rgb(104,69,95);
 }
 
diff --git a/addons/point_of_sale/static/src/js/ChromeWidgets/CashierName.js b/addons/point_of_sale/static/src/js/ChromeWidgets/CashierName.js
index 02e6196794d..e1816840076 100644
--- a/addons/point_of_sale/static/src/js/ChromeWidgets/CashierName.js
+++ b/addons/point_of_sale/static/src/js/ChromeWidgets/CashierName.js
@@ -7,12 +7,13 @@ odoo.define('point_of_sale.CashierName', function(require) {
     // Previously UsernameWidget
     class CashierName extends PosComponent {
         get username() {
-            const cashier = this.env.pos.get_cashier();
-            if (cashier) {
-                return cashier.name;
-            } else {
-                return '';
-            }
+            const { name } = this.env.pos.get_cashier();
+            return name ? name : '';
+        }
+        get avatar() {
+            const { user_id } = this.env.pos.get_cashier();
+            const id = user_id && user_id.length ? user_id[0] : -1;
+            return `/web/image/res.users/${id}/avatar_128`;
         }
     }
     CashierName.template = 'CashierName';
diff --git a/addons/point_of_sale/static/src/xml/Chrome.xml b/addons/point_of_sale/static/src/xml/Chrome.xml
index b6e51950e57..088f1f27663 100644
--- a/addons/point_of_sale/static/src/xml/Chrome.xml
+++ b/addons/point_of_sale/static/src/xml/Chrome.xml
@@ -21,9 +21,7 @@
             <t t-if="state.uiState === 'READY'">
                 <Portal target="'.pos .status-buttons-portal'">
                     <div class="status-buttons">
-                        <t t-if="!env.isMobile">
-                            <CashierName />
-                        </t>
+                        <CashierName />
                         <SaleDetailsButton t-if="env.pos.proxy.printer" />
                         <ProxyStatus t-if="env.pos.config.use_proxy" />
                         <ClientScreenButton t-if="clientScreenButtonIsShown" />
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 41b7ee69d82..25864a52cde 100644
--- a/addons/point_of_sale/static/src/xml/ChromeWidgets/CashierName.xml
+++ b/addons/point_of_sale/static/src/xml/ChromeWidgets/CashierName.xml
@@ -3,9 +3,7 @@
 
     <t t-name="CashierName" owl="1">
         <div class="oe_status">
-            <span class="username">
-                <t t-esc="username" />
-            </span>
+            <span><img t-att-src="avatar" t-att-alt="username" class="avatar"/> <span t-if="!env.isMobile" t-esc="username" class="username"/></span>
         </div>
     </t>
 
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 db30ad680d6..d1a883c84ac 100644
--- a/addons/point_of_sale/static/src/xml/ChromeWidgets/HeaderButton.xml
+++ b/addons/point_of_sale/static/src/xml/ChromeWidgets/HeaderButton.xml
@@ -2,8 +2,8 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="HeaderButton" owl="1">
-        <div class="header-button close_button" t-on-click="onClick">
-            Close
+        <div class="header-button" t-on-click="onClick">
+            <span><i class="fa fa-sign-out" role="img"/> <t t-if="!env.isMobile">Close</t></span>
         </div>
     </t>
 
diff --git a/addons/point_of_sale/static/src/xml/ChromeWidgets/TicketButton.xml b/addons/point_of_sale/static/src/xml/ChromeWidgets/TicketButton.xml
index 8a1a3a3250c..a18774428d9 100644
--- a/addons/point_of_sale/static/src/xml/ChromeWidgets/TicketButton.xml
+++ b/addons/point_of_sale/static/src/xml/ChromeWidgets/TicketButton.xml
@@ -6,7 +6,7 @@
             <div class="with-badge" t-att-badge="count">
                 <i class="fa fa-ticket" aria-hidden="true"></i>
             </div>
-            <div>Orders</div>
+            <div t-if="!env.isMobile">Orders</div>
         </div>
     </t>