From 0a71d06be3909cfde8e3bd41752af2ba84dae023 Mon Sep 17 00:00:00 2001
From: Gery Debongnie <ged@openerp.com>
Date: Wed, 12 Mar 2014 14:22:13 +0100
Subject: [PATCH 01/12] [IMP] work in progress on stats buttons. The goal is to
 allow buttons with dynamic/statistical informations in form views (addon web)

bzr revid: ged@openerp.com-20140312132213-hclaw6jc87u220zq
---
 addons/web/static/src/css/base.css    | 17 ++++++++++++
 addons/web/static/src/css/base.sass   | 14 ++++++++++
 addons/web/static/src/js/view_form.js | 37 +++++++++++++++++++++++++--
 addons/web/static/src/xml/base.xml    | 10 ++++++++
 4 files changed, 76 insertions(+), 2 deletions(-)

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index e43a2fb654e..263a867390e 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -462,6 +462,23 @@
 .openerp .oe_button_box button {
   margin: 4px;
 }
+.openerp .oe_button_box .oe_stat_button {
+  font-weight: normal;
+  display: inline-table;
+  width: 48% !important;
+  height: 45px;
+  margin: 1px;
+}
+.openerp .oe_button_box .oe_stat_button > div {
+  display: table-cell;
+  vertical-align: middle;
+  padding: 0;
+}
+.openerp .oe_button_box .oe_stat_button .stat_button_icon {
+  color: #7c7bad;
+  font-size: 24px;
+  padding: 4px;
+}
 .openerp .oe_avatar > img {
   max-height: 90px;
   max-width: 90px;
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index b19db9e4ebd..2d5ae82135e 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -433,6 +433,20 @@ $sheet-padding: 16px
         text-align: right
         button
             margin: 4px
+        .oe_stat_button
+            font-weight: normal
+            display: inline-table
+            width: 48% !important
+            height: 45px
+            margin: 1px
+            > div
+                display: table-cell
+                vertical-align: middle
+                padding: 0
+            .stat_button_icon
+                color: #7C7BAD
+                font-size: 24px
+                padding: 4px
     .oe_avatar
         > img
             max-height: 90px
diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index f1fc377fa94..a8973d760fa 100644
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -1218,6 +1218,9 @@ instance.web.form.FormRenderingEngine = instance.web.form.FormRenderingEngineInt
         $('button', doc).each(function() {
             $(this).attr('data-button-type', $(this).attr('type')).attr('type', 'button');
         });
+        $('statbutton', doc).each(function() {
+            $(this).attr('data-button-type', $(this).attr('type')).attr('type', 'button');
+        });
         // IE's html parser is also a css parser. How convenient...
         $('board', doc).each(function() {
             $(this).attr('layout', $(this).attr('style'));
@@ -1277,6 +1280,9 @@ instance.web.form.FormRenderingEngine = instance.web.form.FormRenderingEngineInt
         var defs = [];
         _.each(this.to_replace, function(el) {
             defs.push(el[0].replace(el[1]));
+            if (el[1].children().length) {
+                el[0].$el.append(el[1].children());
+            }
         });
         this.to_replace = [];
         return $.when.apply($, defs);
@@ -1304,7 +1310,7 @@ instance.web.form.FormRenderingEngine = instance.web.form.FormRenderingEngineInt
         var tagname = $tag[0].nodeName.toLowerCase();
         if (this.tags_registry.contains(tagname)) {
             this.tags_to_init.push($tag);
-            return $tag;
+            return (tagname === 'statbutton') ? this.process_statbutton($tag) : $tag;
         }
         var fn = self['process_' + tagname];
         if (fn) {
@@ -1321,6 +1327,17 @@ instance.web.form.FormRenderingEngine = instance.web.form.FormRenderingEngineInt
             return $tag;
         }
     },
+    process_statbutton: function ($button) {
+        var self = this;
+        console.log('yenrst');
+        if ($button.children().length) {
+            $button.children().each(function() {
+                self.process($(this));
+            });
+        } 
+        return $button;
+    },
+
     process_widget: function($widget) {
         this.widgets_to_init.push($widget);
         return $widget;
@@ -1976,7 +1993,6 @@ instance.web.form.WidgetButton = instance.web.form.FormWidget.extend({
         var self = this;
 
         var context = this.build_context();
-
         return this.view.do_execute_action(
             _.extend({}, this.node.attrs, {context: context}),
             this.view.dataset, this.view.datarecord.id, function () {
@@ -1990,6 +2006,22 @@ instance.web.form.WidgetButton = instance.web.form.FormWidget.extend({
     }
 });
 
+instance.web.form.StatButton = instance.web.form.WidgetButton.extend({
+    template: 'StatButton',
+
+    init: function(field_manager, node) {
+        var icon = node.attrs.icon;
+        this._super(field_manager, node);
+
+        // debugger;
+        if (icon) {
+            this.icon = "<span class=\"fa " + icon + "\"></span>";
+        }
+
+    },
+
+});
+
 /**
  * Interface to be implemented by fields.
  *
@@ -5899,6 +5931,7 @@ instance.web.form.widgets = new instance.web.Registry({
  */
 instance.web.form.tags = new instance.web.Registry({
     'button' : 'instance.web.form.WidgetButton',
+    'statbutton' : 'instance.web.form.StatButton',
 });
 
 instance.web.form.custom_widgets = new instance.web.Registry({
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 80b82c1f40b..fa96fe1ac8a 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1360,6 +1360,16 @@
         <span t-if="widget.string"><t t-esc="widget.string"/></span>
     </button>
 </t>
+<t t-name="StatButton">
+    <label type="button" class="oe_stat_button btn btn-default"
+        t-att-style="widget.node.attrs.style"
+        t-att-tabindex="widget.node.attrs.tabindex"
+        t-att-autofocus="widget.node.attrs.autofocus"
+        t-att-accesskey="widget.node.attrs.accesskey">
+        <t t-if="widget.icon"><div class="stat_button_icon"><t t-raw="widget.icon"/></div></t>
+        <span t-if="widget.string"><t t-esc="widget.string"/></span>
+    </label>
+</t>
 <t t-name="WidgetButton.tooltip" t-extend="WidgetLabel.tooltip">
     <t t-jquery="div.oe_tooltip_string" t-operation="replace">
         <div class="oe_tooltip_string" t-if="debug || widget.string">

From ee478106748e52b314ac80a69d34a9b50cc29e4f Mon Sep 17 00:00:00 2001
From: Gery Debongnie <ged@openerp.com>
Date: Wed, 12 Mar 2014 14:45:38 +0100
Subject: [PATCH 02/12] [IMP] css tweaks to stat buttons

bzr revid: ged@openerp.com-20140312134538-7b3o22lakb8qk45a
---
 addons/web/static/src/css/base.css  | 3 ++-
 addons/web/static/src/css/base.sass | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 263a867390e..524bd79cc52 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -467,7 +467,8 @@
   display: inline-table;
   width: 48% !important;
   height: 45px;
-  margin: 1px;
+  margin: 0px;
+  color: #666666;
 }
 .openerp .oe_button_box .oe_stat_button > div {
   display: table-cell;
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index 2d5ae82135e..f81232b7ee8 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -438,7 +438,8 @@ $sheet-padding: 16px
             display: inline-table
             width: 48% !important
             height: 45px
-            margin: 1px
+            margin: 0px
+            color: #666
             > div
                 display: table-cell
                 vertical-align: middle

From d2637811dec84306ab80cc49f40a8b823d7984a6 Mon Sep 17 00:00:00 2001
From: Gery Debongnie <ged@openerp.com>
Date: Thu, 13 Mar 2014 13:48:43 +0100
Subject: [PATCH 03/12] [IMP] adds PercentPie and X2Many widgets to formview. 
 PercentPie takes a field 'float' and displays a read-only pie chart to
 visualize the corresponding percent. X2Many takes a 1tomany or a manytomany
 field and display a read only string '<number of records> <label>'

bzr revid: ged@openerp.com-20140313124843-d4tc5zdz3lx2r8kt
---
 addons/web/static/src/js/view_form.js | 72 ++++++++++++++++++++++++++-
 addons/web/static/src/xml/base.xml    |  8 +++
 2 files changed, 79 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index a8973d760fa..a50eba07259 100644
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -1329,7 +1329,6 @@ instance.web.form.FormRenderingEngine = instance.web.form.FormRenderingEngineInt
     },
     process_statbutton: function ($button) {
         var self = this;
-        console.log('yenrst');
         if ($button.children().length) {
             $button.children().each(function() {
                 self.process($(this));
@@ -2837,6 +2836,52 @@ instance.web.form.FieldProgressBar = instance.web.form.AbstractField.extend({
     }
 });
 
+/**
+    The PercentPie field expect a float from 0 to 100.
+*/
+instance.web.form.FieldPercentPie = instance.web.form.AbstractField.extend({
+    template: 'FieldPercentPie',
+
+    render_value: function() {
+        var value = this.get('value'),
+            formatted_value = Math.round(value || 0) + '%',
+            svg = this.$('svg')[0];
+
+        svg.innerHTML = "";
+        nv.addGraph(function() {
+            var size=43;
+            var chart = nv.models.pieChart()
+                .width(size)
+                .height(size)
+                .margin({top: 0, right: 0, bottom: 0, left: 0})
+                .donut(true) 
+                .showLegend(false)
+                .showLabels(false)
+                .donutRatio(0.62);
+   
+            d3.select(svg)
+                .datum([{'x': 'value', 'y': value}, {'x': 'complement', 'y': 100 - value}])
+                .transition()
+                .call(chart)
+                .attr('width', size)
+                .attr('height',size);
+
+            d3.select(svg)
+                .append("text")
+                .attr("x", size/2)
+                .attr("y", size/2 + 3)
+                .style("font-size", "10px")
+                .style("font-weight", "bold")
+                .attr("text-anchor", "middle")  
+                .text(formatted_value);
+
+            return chart;
+        });
+   
+    }
+});
+
+
 
 instance.web.form.FieldSelection = instance.web.form.AbstractField.extend(instance.web.form.ReinitializeFieldMixin, {
     template: 'FieldSelection',
@@ -5884,6 +5929,29 @@ instance.web.form.X2ManyCounter = instance.web.form.AbstractField.extend(instanc
     }
 });
 
+/**
+    This field can be applied on many2many and one2many. It is a read-only field that will 
+    display a simple string "<number of linked records> <label of the field>" (obviously inspired by X2ManyCounter)
+*/
+instance.web.form.X2Many = instance.web.form.AbstractField.extend(instance.web.form.ReinitializeFieldMixin, {
+    init: function() {
+        this._super.apply(this, arguments);
+        this.set("value", []);
+    },
+    render_value: function() {
+        var text = _.str.sprintf("%d %s", this.val().length, this.string);
+        this.$().html(QWeb.render("X2Many", {text: text}));
+    },
+    val: function() {
+        var value = this.get("value") || [];
+        if (value.length >= 1 && value[0] instanceof Array) {
+            value = value[0][2];
+        }
+        return value;
+    },
+});
+
+
 /**
  * Registry of form fields, called by :js:`instance.web.FormView`.
  *
@@ -5911,6 +5979,7 @@ instance.web.form.widgets = new instance.web.Registry({
     'reference' : 'instance.web.form.FieldReference',
     'boolean' : 'instance.web.form.FieldBoolean',
     'float' : 'instance.web.form.FieldFloat',
+    'percentpie': 'instance.web.form.FieldPercentPie',
     'integer': 'instance.web.form.FieldFloat',
     'float_time': 'instance.web.form.FieldFloat',
     'progressbar': 'instance.web.form.FieldProgressBar',
@@ -5921,6 +5990,7 @@ instance.web.form.widgets = new instance.web.Registry({
     'monetary': 'instance.web.form.FieldMonetary',
     'many2many_checkboxes': 'instance.web.form.FieldMany2ManyCheckBoxes',
     'x2many_counter': 'instance.web.form.X2ManyCounter',
+    'x2many': 'instance.web.form.X2Many',
 });
 
 /**
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index fa96fe1ac8a..5dd94644ff9 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1188,6 +1188,11 @@
         <span></span>
     </span>
 </t>
+<t t-name="FieldPercentPie">
+    <span id="prout" class="oe_form_field oe_form_field_percent_pie" t-att-style="widget.node.attrs.style">
+        <svg></svg>
+    </span>
+</t>
 <t t-name="FieldStatus">
     <ul t-att-class="'oe_form_field_status ' + (widget.options.clickable ? 'oe_form_status_clickable' : 'oe_form_status')" t-att-style="widget.node.attrs.style"/>
 </t>
@@ -1940,4 +1945,7 @@
 <t t-name="X2ManyCounter">
     <a href="javascript:void(0)"><t t-esc="text"/></a>
 </t>
+<t t-name="X2Many">
+    <div><t t-esc="text"/></div>
+</t>
 </templates>

From f4519c11f2a7dc4c003bb6ccf036b5f2c8764676 Mon Sep 17 00:00:00 2001
From: Gery Debongnie <ged@openerp.com>
Date: Thu, 13 Mar 2014 13:48:55 +0100
Subject: [PATCH 04/12] [IMP] css tweaks to stat buttons

bzr revid: ged@openerp.com-20140313124855-h8ez7ajj31u1x9vf
---
 addons/web/static/src/css/base.css  | 22 ++++++++++++++--------
 addons/web/static/src/css/base.sass | 22 ++++++++++++++--------
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 524bd79cc52..0b432d0c145 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -368,6 +368,7 @@
 .openerp .oe_left {
   float: left;
   margin-right: 8px;
+  width: 305px;
 }
 .openerp .oe_right {
   float: right;
@@ -456,29 +457,34 @@
   background: #ed6f6a;
 }
 .openerp .oe_button_box {
-  width: 270px;
-  text-align: right;
-}
-.openerp .oe_button_box button {
-  margin: 4px;
+  width: 400px;
+  text-align: left;
 }
 .openerp .oe_button_box .oe_stat_button {
   font-weight: normal;
   display: inline-table;
-  width: 48% !important;
+  width: 33% !important;
   height: 45px;
-  margin: 0px;
+  margin: 0px -1px -1px 0px;
   color: #666666;
+  border-color: #dddddd;
 }
 .openerp .oe_button_box .oe_stat_button > div {
   display: table-cell;
   vertical-align: middle;
+  text-align: left;
   padding: 0;
 }
 .openerp .oe_button_box .oe_stat_button .stat_button_icon {
   color: #7c7bad;
   font-size: 24px;
-  padding: 4px;
+  padding: 0px;
+  text-align: center;
+  width: 40px;
+}
+.openerp .oe_button_box .oe_stat_button svg {
+  width: 38px;
+  height: 38px;
 }
 .openerp .oe_avatar > img {
   max-height: 90px;
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index f81232b7ee8..336f583e019 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -385,6 +385,7 @@ $sheet-padding: 16px
     .oe_left
         float: left
         margin-right: 8px
+        width: 305px
     .oe_right
         float: right
         margin-left: 8px
@@ -429,25 +430,30 @@ $sheet-padding: 16px
             &:hover
                 background: #ED6F6A
     .oe_button_box
-        width: 270px
-        text-align: right
-        button
-            margin: 4px
+        width: 400px
+        text-align: left
         .oe_stat_button
             font-weight: normal
             display: inline-table
-            width: 48% !important
+            width: 33% !important
             height: 45px
-            margin: 0px
+            margin: 0px -1px -1px 0px
             color: #666
+            border-color: #ddd
             > div
                 display: table-cell
                 vertical-align: middle
-                padding: 0
+                text-align: left
+                padding: 0 
             .stat_button_icon
                 color: #7C7BAD
                 font-size: 24px
-                padding: 4px
+                padding: 0px
+                text-align: center
+                width: 40px
+            svg
+                width: 38px
+                height: 38px
     .oe_avatar
         > img
             max-height: 90px

From 500fc0790c9e4e1853a4457e00a1b87cbcf0011f Mon Sep 17 00:00:00 2001
From: Gery Debongnie <ged@openerp.com>
Date: Thu, 13 Mar 2014 15:12:16 +0100
Subject: [PATCH 05/12] [IMP] chooses better color for the percentpie widget in
 form view

bzr revid: ged@openerp.com-20140313141216-o3w9ykphm0nuo61q
---
 addons/web/static/src/js/view_form.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index a50eba07259..c2349fa1932 100644
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -2857,6 +2857,7 @@ instance.web.form.FieldPercentPie = instance.web.form.AbstractField.extend({
                 .donut(true) 
                 .showLegend(false)
                 .showLabels(false)
+                .color(['#DDD','#7C7BAD'])
                 .donutRatio(0.62);
    
             d3.select(svg)

From d849c6521d21d02e630179a4764888cd105cbe62 Mon Sep 17 00:00:00 2001
From: Gery Debongnie <ged@openerp.com>
Date: Fri, 14 Mar 2014 14:44:56 +0100
Subject: [PATCH 06/12] [IMP] removes the 'stat_button' widget and modifies
 button to fulfill that role.  Now, a button with a class 'oe_stat_button'
 will be displayed differently (look in form views) (addon web).  Also removes
 the useless widget x2many

bzr revid: ged@openerp.com-20140314134456-wy6ya3zz72zx3yo2
---
 addons/web/static/src/js/view_form.js | 61 ++++++++-------------------
 addons/web/static/src/xml/base.xml    | 40 +++++++++---------
 2 files changed, 38 insertions(+), 63 deletions(-)

diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index c2349fa1932..dcb15d3d16d 100644
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -1218,9 +1218,6 @@ instance.web.form.FormRenderingEngine = instance.web.form.FormRenderingEngineInt
         $('button', doc).each(function() {
             $(this).attr('data-button-type', $(this).attr('type')).attr('type', 'button');
         });
-        $('statbutton', doc).each(function() {
-            $(this).attr('data-button-type', $(this).attr('type')).attr('type', 'button');
-        });
         // IE's html parser is also a css parser. How convenient...
         $('board', doc).each(function() {
             $(this).attr('layout', $(this).attr('style'));
@@ -1310,7 +1307,7 @@ instance.web.form.FormRenderingEngine = instance.web.form.FormRenderingEngineInt
         var tagname = $tag[0].nodeName.toLowerCase();
         if (this.tags_registry.contains(tagname)) {
             this.tags_to_init.push($tag);
-            return (tagname === 'statbutton') ? this.process_statbutton($tag) : $tag;
+            return (tagname === 'button') ? this.process_button($tag) : $tag;
         }
         var fn = self['process_' + tagname];
         if (fn) {
@@ -1327,16 +1324,13 @@ instance.web.form.FormRenderingEngine = instance.web.form.FormRenderingEngineInt
             return $tag;
         }
     },
-    process_statbutton: function ($button) {
+    process_button: function ($button) {
         var self = this;
-        if ($button.children().length) {
-            $button.children().each(function() {
-                self.process($(this));
-            });
-        } 
+        $button.children().each(function() {
+            self.process($(this));
+        });
         return $button;
     },
-
     process_widget: function($widget) {
         this.widgets_to_init.push($widget);
         return $widget;
@@ -1922,6 +1916,8 @@ instance.web.form.WidgetButton = instance.web.form.FormWidget.extend({
     template: 'WidgetButton',
     init: function(field_manager, node) {
         node.attrs.type = node.attrs['data-button-type'];
+        this.is_stat_button = node.attrs.class ? _.include(node.attrs.class.split(' '), 'oe_stat_button') : false;
+        this.icon = "<span class=\"fa " + node.attrs.icon + "\"></span>";
         this._super(field_manager, node);
         this.force_disabled = false;
         this.string = (this.node.attrs.string || '').replace(/_/g, '');
@@ -2005,22 +2001,6 @@ instance.web.form.WidgetButton = instance.web.form.FormWidget.extend({
     }
 });
 
-instance.web.form.StatButton = instance.web.form.WidgetButton.extend({
-    template: 'StatButton',
-
-    init: function(field_manager, node) {
-        var icon = node.attrs.icon;
-        this._super(field_manager, node);
-
-        // debugger;
-        if (icon) {
-            this.icon = "<span class=\"fa " + icon + "\"></span>";
-        }
-
-    },
-
-});
-
 /**
  * Interface to be implemented by fields.
  *
@@ -2857,7 +2837,7 @@ instance.web.form.FieldPercentPie = instance.web.form.AbstractField.extend({
                 .donut(true) 
                 .showLegend(false)
                 .showLabels(false)
-                .color(['#DDD','#7C7BAD'])
+                .color(['#7C7BAD','#DDD'])
                 .donutRatio(0.62);
    
             d3.select(svg)
@@ -5931,27 +5911,21 @@ instance.web.form.X2ManyCounter = instance.web.form.AbstractField.extend(instanc
 });
 
 /**
-    This field can be applied on many2many and one2many. It is a read-only field that will 
-    display a simple string "<number of linked records> <label of the field>" (obviously inspired by X2ManyCounter)
+    This widget is intended to be used on stat button numeric fields.  It will display
+    the value   many2many and one2many. It is a read-only field that will 
+    display a simple string "<value of field> <label of the field>"
 */
-instance.web.form.X2Many = instance.web.form.AbstractField.extend(instance.web.form.ReinitializeFieldMixin, {
+instance.web.form.StatInfo = instance.web.form.AbstractField.extend({
     init: function() {
         this._super.apply(this, arguments);
-        this.set("value", []);
+        this.set("value", 0);
     },
     render_value: function() {
-        var text = _.str.sprintf("%d %s", this.val().length, this.string);
-        this.$().html(QWeb.render("X2Many", {text: text}));
+        var text = _.str.sprintf("%d %s", this.get("value") || 0, this.string);
+        this.$().html(QWeb.render("StatInfo", {text: text}));
     },
-    val: function() {
-        var value = this.get("value") || [];
-        if (value.length >= 1 && value[0] instanceof Array) {
-            value = value[0][2];
-        }
-        return value;
-    },
-});
 
+});
 
 /**
  * Registry of form fields, called by :js:`instance.web.FormView`.
@@ -5991,7 +5965,7 @@ instance.web.form.widgets = new instance.web.Registry({
     'monetary': 'instance.web.form.FieldMonetary',
     'many2many_checkboxes': 'instance.web.form.FieldMany2ManyCheckBoxes',
     'x2many_counter': 'instance.web.form.X2ManyCounter',
-    'x2many': 'instance.web.form.X2Many',
+    'statinfo': 'instance.web.form.StatInfo',
 });
 
 /**
@@ -6002,7 +5976,6 @@ instance.web.form.widgets = new instance.web.Registry({
  */
 instance.web.form.tags = new instance.web.Registry({
     'button' : 'instance.web.form.WidgetButton',
-    'statbutton' : 'instance.web.form.StatButton',
 });
 
 instance.web.form.custom_widgets = new instance.web.Registry({
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 5dd94644ff9..b24bd8642cc 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1356,24 +1356,26 @@
     </div>
 </t>
 <t t-name="WidgetButton">
-    <button type="button" class="oe_button oe_form_button"
-        t-att-style="widget.node.attrs.style"
-        t-att-tabindex="widget.node.attrs.tabindex"
-        t-att-autofocus="widget.node.attrs.autofocus"
-        t-att-accesskey="widget.node.attrs.accesskey">
-        <img t-if="widget.node.attrs.icon" t-att-src="_s + widget.node.attrs.icon" width="16" height="16"/>
-        <span t-if="widget.string"><t t-esc="widget.string"/></span>
-    </button>
-</t>
-<t t-name="StatButton">
-    <label type="button" class="oe_stat_button btn btn-default"
-        t-att-style="widget.node.attrs.style"
-        t-att-tabindex="widget.node.attrs.tabindex"
-        t-att-autofocus="widget.node.attrs.autofocus"
-        t-att-accesskey="widget.node.attrs.accesskey">
-        <t t-if="widget.icon"><div class="stat_button_icon"><t t-raw="widget.icon"/></div></t>
-        <span t-if="widget.string"><t t-esc="widget.string"/></span>
-    </label>
+    <t t-if="!widget.is_stat_button">
+        <button type="button" class="oe_button oe_form_button"
+            t-att-style="widget.node.attrs.style"
+            t-att-tabindex="widget.node.attrs.tabindex"
+            t-att-autofocus="widget.node.attrs.autofocus"
+            t-att-accesskey="widget.node.attrs.accesskey">
+            <img t-if="widget.node.attrs.icon" t-att-src="_s + widget.node.attrs.icon" width="16" height="16"/>
+            <span t-if="widget.string"><t t-esc="widget.string"/></span>
+        </button>
+    </t>
+    <t t-if="widget.is_stat_button">
+        <label type="button" class="oe_stat_button btn btn-default"
+            t-att-style="widget.node.attrs.style"
+            t-att-tabindex="widget.node.attrs.tabindex"
+            t-att-autofocus="widget.node.attrs.autofocus"
+            t-att-accesskey="widget.node.attrs.accesskey">
+            <t t-if="widget.icon"><div class="stat_button_icon"><t t-raw="widget.icon"/></div></t>
+            <span t-if="widget.string"><t t-esc="widget.string"/></span>
+        </label>
+    </t>
 </t>
 <t t-name="WidgetButton.tooltip" t-extend="WidgetLabel.tooltip">
     <t t-jquery="div.oe_tooltip_string" t-operation="replace">
@@ -1945,7 +1947,7 @@
 <t t-name="X2ManyCounter">
     <a href="javascript:void(0)"><t t-esc="text"/></a>
 </t>
-<t t-name="X2Many">
+<t t-name="StatInfo">
     <div><t t-esc="text"/></div>
 </t>
 </templates>

From af61fd53bc86583aca872d4d884e976fed885d30 Mon Sep 17 00:00:00 2001
From: Gery Debongnie <ged@openerp.com>
Date: Fri, 14 Mar 2014 15:21:55 +0100
Subject: [PATCH 07/12] [IMP] removes the tooltip when mouse hovers over a
 'percentpie' widget (addon web)

bzr revid: ged@openerp.com-20140314142155-u8suij5tikxwd0zi
---
 addons/web/static/src/js/view_form.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index dcb15d3d16d..c4bddd90f34 100644
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -2837,6 +2837,7 @@ instance.web.form.FieldPercentPie = instance.web.form.AbstractField.extend({
                 .donut(true) 
                 .showLegend(false)
                 .showLabels(false)
+                .tooltips(false)
                 .color(['#7C7BAD','#DDD'])
                 .donutRatio(0.62);
    

From e8198d74b68c3f1fba677b596a2eedf60af8ad83 Mon Sep 17 00:00:00 2001
From: Gery Debongnie <ged@openerp.com>
Date: Mon, 17 Mar 2014 16:27:10 +0100
Subject: [PATCH 08/12] [IMP] various tweaks to stat_button, to fix issues
 mentioned in code review.  This is mostly cosmetic cleanups, only notable
 change is that stat_button is now a proper html button instead of a label
 (addon web)

bzr revid: ged@openerp.com-20140317152710-c33q8kua33o001la
---
 addons/web/static/src/css/base.css    |  9 +++++---
 addons/web/static/src/css/base.sass   | 10 +++++----
 addons/web/static/src/js/view_form.js | 16 ++++++--------
 addons/web/static/src/xml/base.xml    | 31 +++++++++------------------
 4 files changed, 28 insertions(+), 38 deletions(-)

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 0b432d0c145..1d843e7e250 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -460,6 +460,9 @@
   width: 400px;
   text-align: left;
 }
+.openerp .oe_button_box .oe_stat_button:hover {
+  background: #dddddd;
+}
 .openerp .oe_button_box .oe_stat_button {
   font-weight: normal;
   display: inline-table;
@@ -467,7 +470,8 @@
   height: 45px;
   margin: 0px -1px -1px 0px;
   color: #666666;
-  border-color: #dddddd;
+  border: 1px solid #666666;
+  background: white;
 }
 .openerp .oe_button_box .oe_stat_button > div {
   display: table-cell;
@@ -478,9 +482,8 @@
 .openerp .oe_button_box .oe_stat_button .stat_button_icon {
   color: #7c7bad;
   font-size: 24px;
-  padding: 0px;
+  padding: 0px 3px;
   text-align: center;
-  width: 40px;
 }
 .openerp .oe_button_box .oe_stat_button svg {
   width: 38px;
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index 336f583e019..cca0deb4a1f 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -432,6 +432,8 @@ $sheet-padding: 16px
     .oe_button_box
         width: 400px
         text-align: left
+        .oe_stat_button:hover
+            background: #ddd
         .oe_stat_button
             font-weight: normal
             display: inline-table
@@ -439,18 +441,18 @@ $sheet-padding: 16px
             height: 45px
             margin: 0px -1px -1px 0px
             color: #666
-            border-color: #ddd
+            border: 1px solid #666
+            background: white
             > div
                 display: table-cell
                 vertical-align: middle
                 text-align: left
-                padding: 0 
+                padding: 0
             .stat_button_icon
                 color: #7C7BAD
                 font-size: 24px
-                padding: 0px
+                padding: 0px 3px
                 text-align: center
-                width: 40px
             svg
                 width: 38px
                 height: 38px
diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index c4bddd90f34..969e0150737 100644
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -1916,8 +1916,8 @@ instance.web.form.WidgetButton = instance.web.form.FormWidget.extend({
     template: 'WidgetButton',
     init: function(field_manager, node) {
         node.attrs.type = node.attrs['data-button-type'];
-        this.is_stat_button = node.attrs.class ? _.include(node.attrs.class.split(' '), 'oe_stat_button') : false;
-        this.icon = "<span class=\"fa " + node.attrs.icon + "\"></span>";
+        this.is_stat_button = /\boe_stat_button\b/.test(node.attrs['class']);
+        this.icon = node.attrs.icon && "<span class=\"fa " + node.attrs.icon + "\"></span>";
         this._super(field_manager, node);
         this.force_disabled = false;
         this.string = (this.node.attrs.string || '').replace(/_/g, '');
@@ -2845,16 +2845,12 @@ instance.web.form.FieldPercentPie = instance.web.form.AbstractField.extend({
                 .datum([{'x': 'value', 'y': value}, {'x': 'complement', 'y': 100 - value}])
                 .transition()
                 .call(chart)
-                .attr('width', size)
-                .attr('height',size);
+                .attr({width:size, height:size});
 
             d3.select(svg)
                 .append("text")
-                .attr("x", size/2)
-                .attr("y", size/2 + 3)
-                .style("font-size", "10px")
-                .style("font-weight", "bold")
-                .attr("text-anchor", "middle")  
+                .attr({x: size/2, y: size/2 + 3, 'text-anchor': 'middle'})
+                .style({"font-size": "10px", "font-weight": "bold"})
                 .text(formatted_value);
 
             return chart;
@@ -5923,7 +5919,7 @@ instance.web.form.StatInfo = instance.web.form.AbstractField.extend({
     },
     render_value: function() {
         var text = _.str.sprintf("%d %s", this.get("value") || 0, this.string);
-        this.$().html(QWeb.render("StatInfo", {text: text}));
+        this.$el.html(QWeb.render("StatInfo", {text: text}));
     },
 
 });
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index b24bd8642cc..cc56dc2de13 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1189,7 +1189,7 @@
     </span>
 </t>
 <t t-name="FieldPercentPie">
-    <span id="prout" class="oe_form_field oe_form_field_percent_pie" t-att-style="widget.node.attrs.style">
+    <span class="oe_form_field oe_form_field_percent_pie" t-att-style="widget.node.attrs.style">
         <svg></svg>
     </span>
 </t>
@@ -1356,26 +1356,15 @@
     </div>
 </t>
 <t t-name="WidgetButton">
-    <t t-if="!widget.is_stat_button">
-        <button type="button" class="oe_button oe_form_button"
-            t-att-style="widget.node.attrs.style"
-            t-att-tabindex="widget.node.attrs.tabindex"
-            t-att-autofocus="widget.node.attrs.autofocus"
-            t-att-accesskey="widget.node.attrs.accesskey">
-            <img t-if="widget.node.attrs.icon" t-att-src="_s + widget.node.attrs.icon" width="16" height="16"/>
-            <span t-if="widget.string"><t t-esc="widget.string"/></span>
-        </button>
-    </t>
-    <t t-if="widget.is_stat_button">
-        <label type="button" class="oe_stat_button btn btn-default"
-            t-att-style="widget.node.attrs.style"
-            t-att-tabindex="widget.node.attrs.tabindex"
-            t-att-autofocus="widget.node.attrs.autofocus"
-            t-att-accesskey="widget.node.attrs.accesskey">
-            <t t-if="widget.icon"><div class="stat_button_icon"><t t-raw="widget.icon"/></div></t>
-            <span t-if="widget.string"><t t-esc="widget.string"/></span>
-        </label>
-    </t>
+    <button type="button" t-att-class="widget.is_stat_button ? 'oe_stat_button btn btn-default' : 'oe_button oe_form_button'"
+        t-att-style="widget.node.attrs.style"
+        t-att-tabindex="widget.node.attrs.tabindex"
+        t-att-autofocus="widget.node.attrs.autofocus"
+        t-att-accesskey="widget.node.attrs.accesskey">
+        <img t-if="!widget.is_stat_button and widget.node.attrs.icon " t-att-src="_s + widget.node.attrs.icon" width="16" height="16"/>
+        <t t-if="widget.is_stat_button and widget.icon"><div class="stat_button_icon"><t t-raw="widget.icon"/></div></t>
+        <span t-if="widget.string"><t t-esc="widget.string"/></span>
+    </button>
 </t>
 <t t-name="WidgetButton.tooltip" t-extend="WidgetLabel.tooltip">
     <t t-jquery="div.oe_tooltip_string" t-operation="replace">

From 373cb908caf5792367e49050e3d4ae086a097d0c Mon Sep 17 00:00:00 2001
From: Gery Debongnie <ged@openerp.com>
Date: Tue, 18 Mar 2014 09:55:25 +0100
Subject: [PATCH 09/12] [FIX] correctly handle the case where a 'stat button'
 has a string attribute (it needs to be displayed in a div instead of a span)
 (addon web)

bzr revid: ged@openerp.com-20140318085525-vllzeycht9841g41
---
 addons/web/static/src/xml/base.xml | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index cc56dc2de13..508c507d935 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1362,11 +1362,11 @@
         t-att-autofocus="widget.node.attrs.autofocus"
         t-att-accesskey="widget.node.attrs.accesskey">
         <img t-if="!widget.is_stat_button and widget.node.attrs.icon " t-att-src="_s + widget.node.attrs.icon" width="16" height="16"/>
-        <t t-if="widget.is_stat_button and widget.icon"><div class="stat_button_icon"><t t-raw="widget.icon"/></div></t>
-        <span t-if="widget.string"><t t-esc="widget.string"/></span>
+        <div t-if="widget.is_stat_button and widget.icon" class="stat_button_icon"><t t-raw="widget.icon"/></div>
+        <span t-if="widget.string and !widget.is_stat_button"><t t-esc="widget.string"/></span>
+        <div t-if="widget.string and widget.is_stat_button"><t t-esc="widget.string"/></div>
     </button>
-</t>
-<t t-name="WidgetButton.tooltip" t-extend="WidgetLabel.tooltip">
+</t><t t-name="WidgetButton.tooltip" t-extend="WidgetLabel.tooltip">
     <t t-jquery="div.oe_tooltip_string" t-operation="replace">
         <div class="oe_tooltip_string" t-if="debug || widget.string">
             <t t-if="debug">

From f4cfed3f0e89f8841b16ad578dd2c360f01d18ec Mon Sep 17 00:00:00 2001
From: Gery Debongnie <ged@openerp.com>
Date: Wed, 19 Mar 2014 09:57:18 +0100
Subject: [PATCH 10/12] [IMP] improves the look of the stat buttons in form
 view: the statinfo widget displays the information on two lines, the
 padding/margin/width have been adjusted. (addon web)

bzr revid: ged@openerp.com-20140319085718-9v1l3pb43ee6qws6
---
 addons/web/static/src/css/base.css    | 14 +++++++++++---
 addons/web/static/src/css/base.sass   | 13 ++++++++++---
 addons/web/static/src/js/view_form.js |  9 ++++++---
 addons/web/static/src/xml/base.xml    |  5 ++---
 4 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 1d843e7e250..53043f2f4c5 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -461,16 +461,22 @@
   text-align: left;
 }
 .openerp .oe_button_box .oe_stat_button:hover {
-  background: #dddddd;
+  background: #7c7bad;
+  color: white;
+}
+.openerp .oe_button_box .oe_stat_button:hover .fa {
+  color: white;
 }
 .openerp .oe_button_box .oe_stat_button {
   font-weight: normal;
   display: inline-table;
   width: 33% !important;
-  height: 45px;
+  height: 42px;
   margin: 0px -1px -1px 0px;
+  padding: 0;
   color: #666666;
-  border: 1px solid #666666;
+  border: 1px solid #dddddd;
+  border-radius: 0;
   background: white;
 }
 .openerp .oe_button_box .oe_stat_button > div {
@@ -478,11 +484,13 @@
   vertical-align: middle;
   text-align: left;
   padding: 0;
+  line-height: 120%;
 }
 .openerp .oe_button_box .oe_stat_button .stat_button_icon {
   color: #7c7bad;
   font-size: 24px;
   padding: 0px 3px;
+  width: 37px;
   text-align: center;
 }
 .openerp .oe_button_box .oe_stat_button svg {
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index cca0deb4a1f..466f60fa861 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -433,25 +433,32 @@ $sheet-padding: 16px
         width: 400px
         text-align: left
         .oe_stat_button:hover
-            background: #ddd
+            background: #7c7bad
+            color: white
+            .fa
+                color: white
         .oe_stat_button
             font-weight: normal
             display: inline-table
             width: 33% !important
-            height: 45px
+            height: 42px
             margin: 0px -1px -1px 0px
+            padding: 0
             color: #666
-            border: 1px solid #666
+            border: 1px solid #dddddd
+            border-radius: 0
             background: white
             > div
                 display: table-cell
                 vertical-align: middle
                 text-align: left
                 padding: 0
+                line-height: 120%
             .stat_button_icon
                 color: #7C7BAD
                 font-size: 24px
                 padding: 0px 3px
+                width: 37px
                 text-align: center
             svg
                 width: 38px
diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index 969e0150737..5840d718bf8 100644
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -1917,7 +1917,7 @@ instance.web.form.WidgetButton = instance.web.form.FormWidget.extend({
     init: function(field_manager, node) {
         node.attrs.type = node.attrs['data-button-type'];
         this.is_stat_button = /\boe_stat_button\b/.test(node.attrs['class']);
-        this.icon = node.attrs.icon && "<span class=\"fa " + node.attrs.icon + "\"></span>";
+        this.icon = node.attrs.icon && "<span class=\"fa " + node.attrs.icon + " fa-fw\"></span>";
         this._super(field_manager, node);
         this.force_disabled = false;
         this.string = (this.node.attrs.string || '').replace(/_/g, '');
@@ -5918,8 +5918,11 @@ instance.web.form.StatInfo = instance.web.form.AbstractField.extend({
         this.set("value", 0);
     },
     render_value: function() {
-        var text = _.str.sprintf("%d %s", this.get("value") || 0, this.string);
-        this.$el.html(QWeb.render("StatInfo", {text: text}));
+        var options = {
+            value: this.get("value") || 0,
+            text: this.string,
+        };
+        this.$el.html(QWeb.render("StatInfo", options));
     },
 
 });
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 508c507d935..e35d0c977b3 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1362,7 +1362,7 @@
         t-att-autofocus="widget.node.attrs.autofocus"
         t-att-accesskey="widget.node.attrs.accesskey">
         <img t-if="!widget.is_stat_button and widget.node.attrs.icon " t-att-src="_s + widget.node.attrs.icon" width="16" height="16"/>
-        <div t-if="widget.is_stat_button and widget.icon" class="stat_button_icon"><t t-raw="widget.icon"/></div>
+        <div t-if="widget.is_stat_button" class="stat_button_icon"><t t-if="widget.icon" t-raw="widget.icon"/></div>
         <span t-if="widget.string and !widget.is_stat_button"><t t-esc="widget.string"/></span>
         <div t-if="widget.string and widget.is_stat_button"><t t-esc="widget.string"/></div>
     </button>
@@ -1937,6 +1937,5 @@
     <a href="javascript:void(0)"><t t-esc="text"/></a>
 </t>
 <t t-name="StatInfo">
-    <div><t t-esc="text"/></div>
-</t>
+    <strong><t t-esc="value"/></strong><br/><t t-esc="text"/></t>
 </templates>

From 3a0fb1803547c081e90b44bbe4b8e78a32aa3d23 Mon Sep 17 00:00:00 2001
From: Gery Debongnie <ged@openerp.com>
Date: Thu, 20 Mar 2014 09:21:29 +0100
Subject: [PATCH 11/12] [IMP] removes the shadow in stat buttons, to give them
 the 'flat' look (addon web)

bzr revid: ged@openerp.com-20140320082129-o9jrdb962uuso4kb
---
 addons/web/static/src/css/base.css  | 3 ++-
 addons/web/static/src/css/base.sass | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 0bf5a2d437e..66bfaca7c6e 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -1,4 +1,4 @@
-@charset "utf-8";
+@charset "UTF-8";
 @font-face {
   font-family: "mnmliconsRegular";
   src: url("/web/static/src/font/mnmliconsv21-webfont.eot") format("eot");
@@ -477,6 +477,7 @@
   color: #666666;
   border: 1px solid #dddddd;
   border-radius: 0;
+  box-shadow: none;
   background: white;
 }
 .openerp .oe_button_box .oe_stat_button > div {
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index e6749747021..7110349557a 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -447,6 +447,7 @@ $sheet-padding: 16px
             color: #666
             border: 1px solid #dddddd
             border-radius: 0
+            box-shadow: none
             background: white
             > div
                 display: table-cell

From 4afeee59d10485b84740faf4182678a733f24b03 Mon Sep 17 00:00:00 2001
From: Gery Debongnie <ged@openerp.com>
Date: Wed, 2 Apr 2014 10:37:17 +0200
Subject: [PATCH 12/12] [FIX] fixes an alignment issue in the template
 definitions (addon web)

bzr revid: ged@openerp.com-20140402083717-y3p22u2e47d60bbt
---
 addons/web/static/src/xml/base.xml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 1a5721d28f8..23cad2098dc 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1373,7 +1373,8 @@
         <span t-if="widget.string and !widget.is_stat_button"><t t-esc="widget.string"/></span>
         <div t-if="widget.string and widget.is_stat_button"><t t-esc="widget.string"/></div>
     </button>
-</t><t t-name="WidgetButton.tooltip" t-extend="WidgetLabel.tooltip">
+</t>
+<t t-name="WidgetButton.tooltip" t-extend="WidgetLabel.tooltip">
     <t t-jquery="div.oe_tooltip_string" t-operation="replace">
         <div class="oe_tooltip_string" t-if="debug || widget.string">
             <t t-if="debug">