From 7d5ea8896ea71fc4031dbe8f2e8f34888a117aed Mon Sep 17 00:00:00 2001
From: Christophe Matthieu <chm@openerp.com>
Date: Thu, 21 Mar 2013 16:04:05 +0100
Subject: [PATCH] [IMP] view_form radio button with div inline-block

bzr revid: chm@openerp.com-20130321150405-fz61r51opx2m9kmt
---
 addons/web/static/src/css/base.css    | 13 +++--
 addons/web/static/src/css/base.sass   | 16 +++++--
 addons/web/static/src/js/view_form.js | 69 ++++-----------------------
 addons/web/static/src/xml/base.xml    | 22 ++++++++-
 4 files changed, 52 insertions(+), 68 deletions(-)

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 3d1769bf345..368218b1293 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -2283,17 +2283,24 @@
   display: inline-block;
   min-width: 70px;
 }
-.openerp .oe_form_field_radio td, .openerp .oe_form_field_radio th {
+.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 0px 0px;
+  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 0px 0px;
+  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;
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index a809e77f62a..5ff3c91442f 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -477,15 +477,21 @@ $sheet-padding: 16px
         background: $tag-bg-dark
         color: #eee
     .oe_form_field_radio
-        td,th
-            text-align: center
-        .oe_radio_input
+        &.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 0px 0px
+            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 0px 0px
+            background: transparent url(/web/static/src/img/icons/input_radio-on.png) no-repeat center center
         .oe_radio_label
             cursor: default
     .oe_tags
diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index 28d6c38fcd3..ce0f0ab23e7 100644
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -2791,72 +2791,23 @@ instance.web.form.FieldRadio = instance.web.form.AbstractField.extend(instance.w
         this.no_radiolabel = +node.attrs.no_radiolabel;
         this.display_readonly = +node.attrs.display_readonly;
     },
-    _action_click: function ($tag, value) {
+    initialize_content: function () {
         var self = this;
-        $tag.on('click', $tag, function (event) {
-            if (!self.get("effective_readonly")) {
-                if (!self.field.required && value[0] == self.get_value()) {
-                    self.set_value(undefined);
+        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(value[0]);
+                    self.set_value(id);
                 }
             }
         });
     },
-    _render_input: function (value) {
-        var check = value[0] == this.get_value();
-        var $input = $('<span class="oe_radio_input ' + (check ? 'oe_radio_input_on' : '') + '">&nbsp;</span>');
-        this._action_click($input, value);
-        return $input;
-    },
-    _render_label: function (value, width) {
-        $label = $('<th class="oe_radio_label" ' + (width ? 'style="width:' + width + '%"' : '') + '>' + value[1] + '</th>');
-        this._action_click($label, value);
-        return $label;
-    },
     render_value: function () {
-        var self = this;
-        this.$el.empty();
-        if (self.get("effective_readonly") && !self.display_readonly) {
-            var value = _.find(this.field.selection, function (val) { return val[0] == self.get_value() });
-            this.$el.append(value ? value[1] : "");
-        }
-        else if (this.horizontal) {
-            this.$table = $('<table width="100%"/>');
-            this.$el.append(this.$table);
-            var width = Math.floor(100 / this.field.selection.length);
-            if (!this.no_radiolabel) {
-                var $tr = $('<tr class="oe_radio_header"/>');
-                _.each(this.field.selection, function (value) {
-                    $tr.append(self._render_label(value, width));
-                });
-                this.$table.append($tr);
-            }
-
-            var $tr = $('<tr/>');
-            _.each(this.field.selection, function (value) {
-                var $td = $('<td/>');
-                $td.append(self._render_input(value));
-                $tr.append($td);
-            });
-            this.$table.append($tr);
-        }
-        else {
-            this.$table = $('<table width="100%"/>');
-            this.$el.append(this.$table);
-            _.each(this.field.selection, function (value) {
-                var $tr = $('<tr/>');
-                var $td = $('<td width="20"/>');
-                $td.append(self._render_input(value));
-                $tr.append($td);
-                if (!self.no_radiolabel) {
-                    var $td = $('<td/>');
-                    $td.append(self._render_label(value));
-                    $tr.append($td);
-                }
-                self.$table.append($tr);
-            });
-        }
+        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");
     }
 });
 
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 68973632dab..02129b2fb9a 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1088,7 +1088,27 @@
     </span>
 </t>
 <t t-name="FieldRadio">
-    <span class="oe_form_field oe_form_field_radio" t-att-style="widget.node.attrs.style"></span>
+    <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-raw="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-raw="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">