[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

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>