From 92a84bc37bf904a836f768b2a31a2ac298764ad1 Mon Sep 17 00:00:00 2001
From: Sylvain LE GAL <sylvain.legal@grap.coop>
Date: Thu, 18 Dec 2014 13:10:18 +0100
Subject: [PATCH] [IMP] better display of attributes values; [FIX] overflow
 bug;

---
 pos_product_template/static/src/css/ppt.css | 46 +++++++++++++++++++--
 pos_product_template/static/src/xml/ppt.xml | 13 ++++--
 2 files changed, 53 insertions(+), 6 deletions(-)

diff --git a/pos_product_template/static/src/css/ppt.css b/pos_product_template/static/src/css/ppt.css
index fcea88dd..638e52c2 100644
--- a/pos_product_template/static/src/css/ppt.css
+++ b/pos_product_template/static/src/css/ppt.css
@@ -40,7 +40,7 @@
 
 .pos .modal-dialog .popup-select-variant .container-attribute-list{
     width:100%;
-    height:30%; /*FIXME */
+    height:40%;
     overflow: hidden;
     overflow-y: auto;
     border-bottom: 1px dashed #444;
@@ -49,9 +49,10 @@
 
 .pos .modal-dialog .popup-select-variant .container-variant-list{
     width:100%;
-    height:60%; /*FIXME */
+    height:50%;
     overflow: hidden;
     overflow-y: auto;
+
     -webkit-overflow-scrolling: touch;
 }
 
@@ -65,20 +66,22 @@
 .pos .attribute {
     position:relative;
     width: 100%;
-    height:50px;
     vertical-align: top;
     display: inline-block;
 }
 
 .pos .attribute .attribute-name{
     float: left;
+    font-size: 13px;
     width: 20%;
+    overflow:hidden;
 }
 
 .pos .attribute .value-list-container{
     width:78%;
     float: left;
 }
+
 .pos .attribute .selected{
     background-color: white;
 }
@@ -86,7 +89,44 @@
 .pos .attribute .attribute-value {
     float: left;
     width: 150px;
+    padding-left: 15px;
+}
+
+.pos .attribute .attribute-value .button{
+    width: 100%;
+}
+
+.pos .attribute .attribute-value .attribute-value-header{
+    width: 100%;
+    height: 15px;
+    text-align: right;
+
 }
+.pos .attribute .attribute-value .attribute-value-name{
+    width: 100%;
+    height: 25px;
+    line-height:25px;
+    overflow: hidden;
+    font-size: 10px;
+    text-align: left;
+    font-weight: normal;
+    padding: 2px;
+}
+
+.pos .attribute .attribute-value .variant-quantity{
+    position: relative;
+    top: 2px;
+    right: 0px;
+    vertical-align: top;
+    color: #FFF;
+    line-height: 13px;
+    background: none repeat scroll 0% 0% #7F82AC;
+    padding: 2px 5px;
+    border-radius: 2px;
+    font-size: 9px;
+    margin-right:3px;
+}
+
 
 /*  ********* Variant Display  ********************************************* */
 /* This part is a copy past from Odoo Project, with some values changed      */
diff --git a/pos_product_template/static/src/xml/ppt.xml b/pos_product_template/static/src/xml/ppt.xml
index 2c217fc6..03a2ad7e 100644
--- a/pos_product_template/static/src/xml/ppt.xml
+++ b/pos_product_template/static/src/xml/ppt.xml
@@ -27,7 +27,7 @@
         <div class="modal-dialog">
             <div class="popup popup-select-variant">
                 <div class="variant-title">
-                    Variants Selection of <span id="variant-title-name" />
+                    Variant Selection of <span id="variant-title-name" />
                     <span id="variant-popup-cancel" class="button">
                         Cancel
                     </span>
@@ -89,8 +89,15 @@
 
     <t t-name="AttributeValueWidget">
         <span class='attribute-value' t-att-data-attribute-id="value.attribute_id[0]" t-att-data-attribute-value-id="value.id">
-            <div class="button attribute-value-name">
-                <t t-esc="value.name"/> (<t t-esc="variant_qty"/>)
+            <div class="button">
+                <div class="attribute-value-header">
+                    <span class="variant-quantity">
+                        <t t-esc="variant_qty"/> Variants
+                    </span>
+                </div>
+                <div class="attribute-value-name">
+                    <t t-esc="value.name"/>
+                </div>
             </div>
         </span>
     </t>