[IMP] point_of_sale: order selector now scrolls in case of overflow.

3 files changed, 23 insertions, 5 deletions

diff --git a/addons/point_of_sale/static/src/css/pos.css b/addons/point_of_sale/static/src/css/pos.css
index 4e630488c96..26c2bfbaa66 100644
--- a/addons/point_of_sale/static/src/css/pos.css
+++ b/addons/point_of_sale/static/src/css/pos.css
@@ -54,6 +54,9 @@ td {
 .oe_hidden{
     display: none !important;
 }
+.oe_invisible{
+    visibility: hidden !important;
+}
 .clearfix:after {
     content:" ";
     display: block;
@@ -317,6 +320,11 @@ td {
     right:0;
     top:0;
     height:100%;
+    display: -webkit-flex;
+    display: flex;
+}
+.pos .pos-rightheader > * {
+    border-right: 1px solid #292929;
 }
 
 .pos .order-button{
@@ -347,6 +355,8 @@ td {
     height: 45px;
     border-bottom: solid 1px rgb(196, 196, 196);
     box-shadow: none;
+    -webkit-flex-shrink: 0;
+    flex-shrink: 0;
 }
 
 .pos .order-button .order-sequence{
@@ -383,12 +393,19 @@ td {
 }
 
 .pos .order-selector {
-    display: inline-block;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex: 1;
+    flex: 1;
 }
 .pos .orders {
-    display: inline-block;
+    display: -webkit-flex;
+    display: flex;
     vertical-align: top;
     margin-left: 8px;
+    overflow: hidden;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
 }
 
 /*  c) The session buttons */
diff --git a/addons/point_of_sale/static/src/js/widgets.js b/addons/point_of_sale/static/src/js/widgets.js
index ff3b1795e32..54960345fc9 100644
--- a/addons/point_of_sale/static/src/js/widgets.js
+++ b/addons/point_of_sale/static/src/js/widgets.js
@@ -1015,6 +1015,9 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa
 
             // --------  Misc ---------
 
+            this.notification = new module.SynchNotificationWidget(this,{});
+            this.notification.appendTo(this.$('.pos-rightheader'));
+
             this.close_button = new module.HeaderButtonWidget(this,{
                 label: _t('Close'),
                 action: function(){ 
@@ -1035,8 +1038,6 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa
             });
             this.close_button.appendTo(this.$('.pos-rightheader'));
 
-            this.notification = new module.SynchNotificationWidget(this,{});
-            this.notification.appendTo(this.$('.pos-rightheader'));
 
             if(this.pos.config.use_proxy){
                 this.proxy_status = new module.ProxyStatusWidget(this,{});
diff --git a/addons/point_of_sale/static/src/xml/pos.xml b/addons/point_of_sale/static/src/xml/pos.xml
index 362f1a2da73..21d3fcb78c1 100644
--- a/addons/point_of_sale/static/src/xml/pos.xml
+++ b/addons/point_of_sale/static/src/xml/pos.xml
@@ -12,7 +12,7 @@
                 </div>
                 <div class="pos-rightheader">
                     <div class="order-selector">
-                        <span class="orders"></span>
+                        <span class="orders touch-scrollable"></span>
                         <span class="order-button square neworder-button"><i class='fa fa-plus' /></span>
                         <span class="order-button square deleteorder-button"><i class='fa fa-minus' /></span>
                     </div>