From 8ed0add2db46f27f847ff6e13d5d41524c1828b8 Mon Sep 17 00:00:00 2001
From: Minh Tran <mit@openerp.com>
Date: Mon, 19 Dec 2011 10:49:14 +0100
Subject: [PATCH] [IMP] Relooking of the product kanban view

bzr revid: mit@openerp.com-20111219094914-jujvrugfnl220f23
---
 addons/stock/__openerp__.py           |  1 +
 addons/stock/product_view.xml         | 62 +++++++++++-------------
 addons/stock/static/src/css/stock.css | 68 +++++++++++++++++++++++++++
 3 files changed, 97 insertions(+), 34 deletions(-)
 create mode 100644 addons/stock/static/src/css/stock.css

diff --git a/addons/stock/__openerp__.py b/addons/stock/__openerp__.py
index 8e116fa7adb..ca25e2c0770 100644
--- a/addons/stock/__openerp__.py
+++ b/addons/stock/__openerp__.py
@@ -91,6 +91,7 @@ Thanks to the double entry management, the inventory controlling is powerful and
     'application': True,
     'active': False,
     'certificate': '0055421559965',
+    "css": [ 'static/src/css/stock.css' ],
 }
 
 # vim:expandtab:smartindent:tabstop=4:softtabstop=4:shiftwidth=4:
diff --git a/addons/stock/product_view.xml b/addons/stock/product_view.xml
index b11fe36d8d8..c8d71c8bf9a 100644
--- a/addons/stock/product_view.xml
+++ b/addons/stock/product_view.xml
@@ -132,40 +132,34 @@
             <field name="type">kanban</field>
             <field name="arch" type="xml">
                 <kanban>
-                    <field name="color"/>
-                    <field name="type"/>
-                    <field name="product_image"/>
-                    <field name="list_price"/>
-                    <templates>
-                        <t t-name="kanban-box">
-                            <t t-if="record.type.raw_value!='service' and record.qty_available.raw_value lte 0" t-set="border">oe_kanban_color_red</t>
-                            <div t-attf-class="#{kanban_color(record.color.raw_value)} #{border || ''}">
-                                <div class="oe_kanban_box oe_kanban_color_border">
-                                    <div class="oe_kanban_box_header oe_kanban_color_bgdark oe_kanban_color_border oe_kanban_draghandle oe_kanban_title">
-                                        <field name="name"/>
-                                    </div>
-                                    <div class="oe_kanban_box_content oe_kanban_color_bglight oe_kanban_box_show_onclick_trigger">
-                                        <img t-att-src="kanban_image('product.product', 'product_image', record.id.value)" width="48" style="float: left; padding: 0 4px 4px 0"/>
-                                        <div t-if="record.type.raw_value == 'service'">No Stock</div>
-                                        <t t-if="record.type.raw_value != 'service'">
-                                            <div>Stock: <field name="qty_available"/> on hand, <field name="virtual_available"/> available</div>
-                                            <div t-if="record.list_price.raw_value != 0">Public Price: <field name="lst_price"/></div>
-                                            <div>Cost : <field name="standard_price"/></div>
-                                        </t>
-                                        <div class="oe_kanban_clear"/>
-                                    </div>
-                                    <div class="oe_kanban_buttons_set oe_kanban_color_border oe_kanban_color_bglight oe_kanban_box_show_onclick">
-                                        <div class="oe_kanban_left">
-                                            <a string="Edit" icon="gtk-edit" type="edit"/>
-                                            <a string="Change Color" icon="color-picker" type="color" name="color"/>
-                                            <a string="Update Stock" name="%(stock.action_view_change_product_quantity)d" icon="gtk-execute" type="action"/>
-                                        </div>
-                                        <div class="oe_kanban_clear"/>
-                                    </div>
-                                </div>
-                            </div>
-                        </t>
-                    </templates>
+                  <field name="color"/>
+                  <field name="type"/>
+                  <field name="product_image"/>
+                  <field name="list_price"/>
+                  <templates>
+                    <t t-name="kanban-box">
+
+                      <div class="oe_product_vignette">
+                        <div class="oe_product_img">
+                          <a type="edit"><img t-att-src="kanban_image('product.product', 'product_image', record.id.value)" class="oe_product_photo"/></a>
+                        </div>
+                        <div class="oe_product_desc">
+                          <h4><a type="edit"><field name="name"></field></a></h4>
+                          <ul>
+                            <li t-if="record.type.raw_value != 'service'">Stock on hand: <field name="qty_available"></field></li>
+                            <li t-if="record.type.raw_value != 'service'">Stock available: <field name="virtual_available"></field></li>
+                            <li>Price: <field name="lst_price"></field></li>
+                            <li>Cost: <field name="standard_price"></field></li>
+                          </ul>
+                        </div>
+                      </div>
+
+                      <script>
+                        $('.oe_product_photo').load(function() { if($(this).width() > $(this).height()) { $(this).addClass('oe_product_photo_wide') } });
+                      </script>
+                      <div></div>
+                    </t>
+                  </templates>
                 </kanban>
             </field>
         </record>
diff --git a/addons/stock/static/src/css/stock.css b/addons/stock/static/src/css/stock.css
new file mode 100644
index 00000000000..a6565d676f1
--- /dev/null
+++ b/addons/stock/static/src/css/stock.css
@@ -0,0 +1,68 @@
+.oe_product_vignette {
+  padding: 8px 0;
+  min-height: 100px;
+}
+
+.oe_product_img, .oe_product_desc {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.oe_product_img {
+  width: 100px;
+  height: 100px;
+  text-align: center;
+  overflow: hidden;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -o-border-radius: 3px;
+  -ms-border-radius: 3px;
+  border-radius: 3px;
+  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+  -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+  -box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+}
+
+.oe_product_photo {
+  width: 100px;
+  height: auto;
+  clip: rect(5px, 100px, 105px, 0px);
+}
+
+.oe_product_photo_wide {
+  height: 100px;
+  width: auto;
+  clip: rect(0px, 110px, 100px, 10px);
+}
+
+.oe_product_desc {
+  width: 220px;
+  font-size: 13px;
+  padding: 2px 5px;
+  color: #4c4c4c;
+  min-height: 120px;
+}
+
+.oe_product_desc h4 {
+  margin: 0;
+  font-size: 13px;
+}
+
+.oe_product_desc h4 a {
+  color: #4c4c4c;
+}
+
+.oe_product_desc h4 a:hover {
+  text-decoration: underline;
+}
+
+.oe_product_desc ul {
+  margin: 3px 0 5px;
+  padding: 0;
+  list-style: none;
+}
+
+.oe_product_desc li {
+  margin: 2px 0;
+}