[MERGE] radio button: display vertical and horizontal; click on radio label = select the label; click on field label = do nothing; bounce effect on edit in page mode; the goal is replacement of some selection box -> desable other options; not clickable in read only mode

bzr revid: chm@openerp.com-20130328095345-nc5rizcmste0bncp

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

@@ -2309,6 +2309,28 @@
   display: inline-block;
   min-width: 70px;
 }
+.openerp .oe_form_field_radio.oe_horizontal {
+  white-space: nowrap;
+}
+.openerp .oe_form_field_radio.oe_horizontal .oe_radio_header {
+  display: inline-block;
+  text-align: center;
+}
+.openerp .oe_form_field_radio.oe_vertical .oe_radio_header {
+  cursor: pointer;
+}
+.openerp .oe_form_field_radio .oe_radio_input {
+  cursor: pointer;
+  display: inline-block;
+  width: 20px;
+  background: transparent url(/web/static/src/img/icons/input_radio-off.png) no-repeat center center;
+}
+.openerp .oe_form_field_radio .oe_radio_input_on {
+  background: transparent url(/web/static/src/img/icons/input_radio-on.png) no-repeat center center;
+}
+.openerp .oe_form_field_radio .oe_radio_label {
+  cursor: default;
+}
 .openerp .oe_form_field_progressbar.ui-progressbar {
   height: 22px;
   font-size: 10px;

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

@@ -480,7 +480,24 @@ $sheet-padding: 16px
     .oe_tag_dark
         background: $tag-bg-dark
         color: #eee
-
+    .oe_form_field_radio
+        &.oe_horizontal
+            white-space: nowrap
+            .oe_radio_header
+                display: inline-block
+                text-align: center
+        &.oe_vertical
+            .oe_radio_header
+                cursor: pointer
+        .oe_radio_input {
+            cursor: pointer
+            display: inline-block
+            width: 20px
+            background: transparent url(/web/static/src/img/icons/input_radio-off.png) no-repeat center center
+        .oe_radio_input_on
+            background: transparent url(/web/static/src/img/icons/input_radio-on.png) no-repeat center center
+        .oe_radio_label
+            cursor: default
     .oe_tags
         &.oe_inline
             min-width: 250px

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

@@ -2804,6 +2804,40 @@ instance.web.form.FieldSelection = instance.web.form.AbstractField.extend(instan
     }
 });
 
+instance.web.form.FieldRadio = instance.web.form.AbstractField.extend(instance.web.form.ReinitializeFieldMixin, {
+    template: 'FieldRadio',
+    init: function(field_manager, node) {
+        /* Radio button widget: Attributes options:
+        * - "horizontal" to display in column
+        * - "no_radiolabel" don't display text values
+        * - "display_readonly" to display radio button (not clickable) in read only mode
+        */
+        var self = this;
+        this._super(field_manager, node);
+        this.horizontal = +this.options.horizontal;
+        this.no_radiolabel = +this.options.no_radiolabel;
+        this.display_readonly = +this.options.display_readonly;
+    },
+    initialize_content: function () {
+        var self = this;
+        this.$el.on('click', '.oe_radio_input,.oe_radio_header', function (event) {
+            var id = $(event.target).data("id");
+            id = isNaN(+id) ? id : +id;
+            if (id && !self.get("effective_readonly")) {
+                if (!self.field.required && id == self.get_value()) {
+                    self.set_value(false);
+                } else {
+                    self.set_value(id);
+                }
+            }
+        });
+    },
+    render_value: function () {
+        this.$(".oe_radio_input_on").removeClass("oe_radio_input_on");
+        this.$(".oe_radio_input[data-id='" + this.get_value() + "'], .oe_radio_header[data-id='" + this.get_value() + "'] .oe_radio_input").addClass("oe_radio_input_on");
+    }
+});
+
 // jquery autocomplete tweak to allow html and classnames
 (function() {
     var proto = $.ui.autocomplete.prototype,
@@ -5423,6 +5457,7 @@ instance.web.form.widgets = new instance.web.Registry({
     'date' : 'instance.web.form.FieldDate',
     'datetime' : 'instance.web.form.FieldDatetime',
     'selection' : 'instance.web.form.FieldSelection',
+    'radio' : 'instance.web.form.FieldRadio',
     'many2one' : 'instance.web.form.FieldMany2One',
     'many2onebutton' : 'instance.web.form.Many2OneButton',
     'many2many' : 'instance.web.form.FieldMany2Many',

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

@@ -1111,6 +1111,29 @@
         </select>
     </span>
 </t>
+<t t-name="FieldRadio">
+    <span t-attf-class="oe_form_field oe_form_field_radio #{widget.horizontal ? 'oe_horizontal' : 'oe_vertical'}" t-att-style="widget.node.attrs.style">
+        <t t-if="widget.horizontal">
+            <t t-set="width" t-value="Math.floor(100 / widget.field.selection.length)"/>
+            <t t-if="!widget.no_radiolabel">
+                <t t-foreach="widget.field.selection" t-as="selection">
+                    <div class="oe_radio_header" t-att-style="'width: ' + width + '%;'"><t t-esc="selection[1]"/></div>
+                </t>
+                <br/>
+            </t>
+            <t t-foreach="widget.field.selection" t-as="selection">
+                <div class="oe_radio_input" t-att-style="'width: ' + width + '%;'" t-att-data-id="selection[0]">&amp;nbsp;</div>
+            </t>
+        </t>
+        <t t-if="!widget.horizontal">
+            <t t-foreach="widget.field.selection" t-as="selection">
+                <div class="oe_radio_header" t-att-style="'width: ' + width + '%;'" t-att-data-id="selection[0]">
+                    <div class="oe_radio_input">&amp;nbsp;</div><t t-if="!widget.no_radiolabel" t-esc="selection[1]"/>
+                </div>
+            </t>
+        </t>
+    </span>
+</t>
 <t t-name="FieldMany2One">
     <span class="oe_form_field oe_form_field_many2one oe_form_field_with_button" t-att-style="widget.node.attrs.style">
         <t t-if="widget.get('effective_readonly')">