[MERGE] merge the last changes to improve the 'stat buttons' support in web

Many small tweaks/css changes to correctly display the stat buttons in
various situations (with/without icons, with/without strings, with sub 
widgets, ...)

bzr revid: ged@openerp.com-20140502145211-ehnb1v66szw7nl01

addons/web/static/lib/fontawesome/css/font-awesome.css

@@ -207,6 +207,9 @@
 .fa-star:before {
   content: "\f005";
 }
+. fa-tasks:before {
+  content: "\f0ae";
+}
 .fa-star-o:before {
   content: "\f006";
 }
@@ -237,6 +240,12 @@
 .fa-search-minus:before {
   content: "\f010";
 }
+.fa-adn:before {
+  content: "\f170";
+}
+. fa-times:before {
+  content: "\f00d";
+}
 .fa-power-off:before {
   content: "\f011";
 }
@@ -308,6 +317,9 @@
 .fa-qrcode:before {
   content: "\f029";
 }
+.fa-calendar:before {
+  content: "\f073";
+}
 .fa-barcode:before {
   content: "\f02a";
 }
@@ -759,6 +771,9 @@
 .fa-pinterest:before {
   content: "\f0d2";
 }
+.fa-pencil-square-o:before {
+  content: "\f044";
+}
 .fa-pinterest-square:before {
   content: "\f0d3";
 }

addons/web/static/src/css/base.css

@@ -79,7 +79,7 @@
   vertical-align: top;
 }
 .openerp .oe_title {
-  width: 50%;
+  width: 38%;
   float: left;
 }
 .openerp .oe_title:after {
@@ -314,56 +314,58 @@
 .openerp .oe_form_dirty button.oe_highlight_on_dirty:hover {
   background: #ed6f6a;
 }
-.openerp .oe_button_box {
+.openerp .oe_stat_button {
-  width: 400px;
-  text-align: left;
-}
-.openerp .oe_button_box .oe_stat_button:hover {
-  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: 132px !important;
-  width: 33% !important;
+  height: 40px;
-  height: 42px;
+  color: #666666;
   margin: 0px -1px -1px 0px;
   padding: 0;
-  color: #666666;
   border: 1px solid #dddddd;
   border-radius: 0;
   box-shadow: none;
   background: white;
 }
-.openerp .oe_button_box .oe_stat_button > div {
+.openerp .oe_stat_button > div {
   display: table-cell;
   vertical-align: middle;
   text-align: left;
   padding: 0;
   line-height: 120%;
 }
-.openerp .oe_button_box .oe_stat_button .stat_button_icon {
+.openerp .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 .oe_form_field_percent_pie {
+.openerp .oe_stat_button .oe_form_field_percent_pie {
   width: 42px;
 }
-.openerp .oe_button_box .oe_stat_button .oe_form_field_bar_chart {
+.openerp .oe_stat_button .oe_form_field_bar_chart {
   width: 42px;
 }
-.openerp .oe_button_box .oe_stat_button svg {
+.openerp .oe_stat_button svg {
   width: 38px;
   height: 38px;
   display: inline;
   vertical-align: middle;
 }
+.openerp .oe_stat_button:hover {
+  background: #7c7bad;
+  color: white;
+}
+.openerp .oe_stat_button:hover .fa {
+  color: white;
+}
+.openerp .oe_button_box {
+  width: 400px;
+  text-align: right;
+}
+.openerp .oe_button_box .oe_stat_button {
+  display: inline-table;
+}
 .openerp .oe_avatar > img {
   max-height: 90px;
   max-width: 90px;

addons/web/static/src/css/base.sass

@@ -190,7 +190,7 @@ $sheet-padding: 16px
     td
         vertical-align: top
     .oe_title
-        width: 50%
+        width: 38%
         float: left    
     .oe_title:after
         content: "."
@@ -330,47 +330,48 @@ $sheet-padding: 16px
             @include box-shadow(none)
             &:hover
                 background: #ED6F6A
+    .oe_stat_button
+        font-weight: normal
+        width: 132px !important
+        height: 40px
+        color: #666
+        margin: 0px -1px -1px 0px
+        padding: 0
+        border: 1px solid #dddddd
+        border-radius: 0
+        box-shadow: none
+        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
+        .oe_form_field_percent_pie
+            width: 42px
+        .oe_form_field_bar_chart
+            width: 42px
+        svg
+            width: 38px
+            height: 38px
+            display: inline
+            vertical-align: middle
+    .oe_stat_button:hover
+        background: #7c7bad
+        color: white
+        .fa
+            color: white
     .oe_button_box
         width: 400px
-        text-align: left
+        text-align: right
-        .oe_stat_button:hover
-            background: #7c7bad
-            color: white
-            .fa
-                color: white
         .oe_stat_button
-            font-weight: normal
             display: inline-table
-            width: 33% !important
-            height: 42px
-            margin: 0px -1px -1px 0px
-            padding: 0
-            color: #666
-            border: 1px solid #dddddd
-            border-radius: 0
-            box-shadow: none
-            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
-            .oe_form_field_percent_pie
-                width: 42px
-            .oe_form_field_bar_chart
-                width: 42px
-            svg
-                width: 38px
-                height: 38px
-                display: inline
-                vertical-align: middle
     .oe_avatar
         > img
             max-height: 90px

addons/web/static/src/js/view_form.js

@@ -1940,7 +1940,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 + " fa-fw\"></span>";
+        this.icon_class = node.attrs.icon && "stat_button_icon fa " + node.attrs.icon + " fa-fw";
         this._super(field_manager, node);
         this.force_disabled = false;
         this.string = (this.node.attrs.string || '').replace(/_/g, '');

addons/web/static/src/xml/base.xml

@@ -1408,7 +1408,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 and widget.icon_class" t-att-class="widget.icon_class"></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>
@@ -1985,6 +1985,5 @@
     <a href="javascript:void(0)"><t t-esc="text"/></a>
 </t>
 <t t-name="StatInfo">
-    <strong><t t-esc="value"/></strong>
+    <strong><t t-esc="value"/></strong><br/><t t-esc="text"/></t>
-    <t t-esc="text"/></t>
 </templates>