[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

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