odoo
/
odoo
2
0
Fork 0
Code Pull Requests Releases Activity

[IMP] view_form radio button with div inline-block 

bzr revid: chm@openerp.com-20130321150405-fz61r51opx2m9kmt
This commit is contained in:
Christophe Matthieu 2013-03-21 16:04:05 +01:00
parent cad21aff66
commit 7d5ea8896e
4 changed files with 52 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
addons/web/static/src/css/base.css
View File

@ -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;

16
addons/web/static/src/css/base.sass
View File

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

69
addons/web/static/src/js/view_form.js
View File

@ -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");
}
});

22
addons/web/static/src/xml/base.xml
View File

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