[FIX] pos: Improve status-buttons UX on small screen

- 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

@@ -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);
 }
 

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';

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" />

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>
 

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>
 

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>