[IMP] improved CSS, XML

bzr revid: fp@openerp.com-20120528172114-dc950hkrmn9wthnd
This commit is contained in:
Fabien Pinckaers 2012-05-28 19:21:14 +02:00
parent 23b63eaf8a
commit 9d7d7f668b
4 changed files with 133 additions and 134 deletions

View File

@ -1607,6 +1607,11 @@
top: -4px; top: -4px;
padding: 0 2px; padding: 0 2px;
} }
.openerp .oe_form h2 input {
font-size: 20px;
font-weight: bold;
height: 30px;
}
.openerp .oe_form textarea { .openerp .oe_form textarea {
resize: vertical; resize: vertical;
} }
@ -1767,6 +1772,7 @@
.openerp .oe_form .oe-binary-file-set { .openerp .oe_form .oe-binary-file-set {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
display: inline-block;
width: 45px; width: 45px;
height: 30px; height: 30px;
} }
@ -1895,11 +1901,6 @@
.openerp .oe-select-create-popup-view-form > .oe_formview > .oe_form_pager { .openerp .oe-select-create-popup-view-form > .oe_formview > .oe_form_pager {
display: none; display: none;
} }
.openerp .oe_form .oe_form_title, .openerp .oe_form .oe_form_title input {
font-size: 20px;
font-weight: bold;
height: 30px;
}
.openerp .oe_form .oe_form_group_odd_border > tbody > tr.oe_form_group_row > td.oe_form_group_cell:nth-child(odd), .openerp .oe_form .oe_form_group_odd_border > tbody > tr.oe_form_group_row > td.oe_form_group_cell:nth-child(odd),
.openerp .oe_form .oe_form_group_label_border > tbody > tr.oe_form_group_row > td.oe_form_group_cell_label { .openerp .oe_form .oe_form_group_label_border > tbody > tr.oe_form_group_row > td.oe_form_group_cell_label {
border-right: 1px solid #dddddd; border-right: 1px solid #dddddd;

View File

@ -1305,6 +1305,10 @@ $colour4: #8a89ba
// }}} // }}}
// FormView.fields {{{ // FormView.fields {{{
.oe_form .oe_form
h2 input
font-size: 20px
font-weight: bold
height: 30px
textarea textarea
resize: vertical resize: vertical
input[type="text"], input[type="text"],
@ -1448,6 +1452,7 @@ $colour4: #8a89ba
.oe-binary-file-set .oe-binary-file-set
overflow: hidden overflow: hidden
position: relative position: relative
display: inline-block
width: 45px width: 45px
height: 30px height: 30px
input.oe-binary-file input.oe-binary-file
@ -1567,10 +1572,6 @@ $colour4: #8a89ba
// }}} // }}}
// FormView.classes for openerp views {{{ // FormView.classes for openerp views {{{
.oe_form .oe_form
.oe_form_title, .oe_form_title input
font-size: 20px
font-weight: bold
height: 30px
.oe_form_group_odd_border > tbody > tr.oe_form_group_row > td.oe_form_group_cell:nth-child(odd), .oe_form_group_odd_border > tbody > tr.oe_form_group_row > td.oe_form_group_cell:nth-child(odd),
.oe_form_group_label_border > tbody > tr.oe_form_group_row > td.oe_form_group_cell_label .oe_form_group_label_border > tbody > tr.oe_form_group_row > td.oe_form_group_cell_label
border-right: 1px solid #ddd border-right: 1px solid #ddd

View File

@ -1023,6 +1023,11 @@ instance.web.form.FormRenderingEngine = instance.web.form.FormRenderingEngineInt
} }
this.process($new_form, layout); this.process($new_form, layout);
}, },
/*
* Used by direct <field> children of a <group> tag only
* This method will add the implicit <label...> for every field
* in the <group>
*/
preprocess_field: function($field) { preprocess_field: function($field) {
var self = this; var self = this;
var name = $field.attr('name'), var name = $field.attr('name'),
@ -1056,17 +1061,20 @@ instance.web.form.FormRenderingEngine = instance.web.form.FormRenderingEngineInt
return $label; return $label;
}, },
process_field: function($field, layout) { process_field: function($field, layout) {
var $label = this.preprocess_field($field); // Note FP: No implicit labels for normal fields, only for <group> children
if ($label) // var $label = this.preprocess_field($field);
this.process($label, layout); // if ($label)
// this.process($label, layout);
this.fields_to_init.push($field); this.fields_to_init.push($field);
return $field; return $field;
}, },
process_group: function($group, layout) { process_group: function($group, layout) {
var self = this; var self = this;
if ($group.parent().is('.oe_form_group_cell')) { // Note FP: not clean to do such a hack, commenting it
$group.parent().addClass('oe_form_group_nested'); // if ($group.parent().is('.oe_form_group_cell')) {
} // $group.parent().addClass('oe_form_group_nested');
// }
$group.children('field').each(function() { $group.children('field').each(function() {
self.preprocess_field($(this)); self.preprocess_field($(this));
}); });
@ -1077,7 +1085,10 @@ instance.web.form.FormRenderingEngine = instance.web.form.FormRenderingEngineInt
} else { } else {
$table = $new_group.find('table:first'); $table = $new_group.find('table:first');
} }
// Note FP: why don't we put that in the QWeb template ?
$table.addClass('oe_form_group'); $table.addClass('oe_form_group');
var $tr, $td, var $tr, $td,
cols = parseInt($group.attr('col') || 4, 10), cols = parseInt($group.attr('col') || 4, 10),
row_cols = cols; row_cols = cols;
@ -1089,6 +1100,8 @@ instance.web.form.FormRenderingEngine = instance.web.form.FormRenderingEngineInt
var tagName = $child[0].tagName.toLowerCase(); var tagName = $child[0].tagName.toLowerCase();
var $td = $('<td/>').addClass('oe_form_group_cell').attr('colspan', colspan); var $td = $('<td/>').addClass('oe_form_group_cell').attr('colspan', colspan);
var newline = tagName === 'newline'; var newline = tagName === 'newline';
// Note FP: looks like a hack to avoid
if ($tr && row_cols > 0 && (newline || row_cols < colspan)) { if ($tr && row_cols > 0 && (newline || row_cols < colspan)) {
$tr.addClass('oe_form_group_row_incomplete'); $tr.addClass('oe_form_group_row_incomplete');
if (newline) { if (newline) {
@ -1119,57 +1132,58 @@ instance.web.form.FormRenderingEngine = instance.web.form.FormRenderingEngineInt
$group.before($new_group).remove(); $group.before($new_group).remove();
// Now compute width of cells // Now compute width of cells
$table.find('> tbody > tr').each(function() { // Note FP: It would be better to remove this, using width="50%" rather than colspan="2"
var to_compute = [], // $table.find('> tbody > tr').each(function() {
row_cols = cols, // var to_compute = [],
total = 100; // row_cols = cols,
$(this).children().each(function() { // total = 100;
var $td = $(this), // $(this).children().each(function() {
$child = $td.children(':first'); // var $td = $(this),
switch ($child[0].tagName.toLowerCase()) { // $child = $td.children(':first');
case 'separator': // switch ($child[0].tagName.toLowerCase()) {
if ($child.attr('orientation') === 'vertical') { // case 'separator':
$td.addClass('oe_vertical_separator').attr('width', '1'); // if ($child.attr('orientation') === 'vertical') {
$td.empty(); // $td.addClass('oe_vertical_separator').attr('width', '1');
row_cols--; // $td.empty();
} // row_cols--;
break; // }
case 'label': // break;
if ($child.attr('for')) { // case 'label':
$td.attr('width', '1%').addClass('oe_form_group_cell_label'); // if ($child.attr('for')) {
row_cols--; // $td.attr('width', '1%').addClass('oe_form_group_cell_label');
total--; // row_cols--;
} // total--;
break; // }
default: // break;
var width = _.str.trim($child.attr('width') || ''), // default:
iwidth = parseInt(width, 10); // var width = _.str.trim($child.attr('width') || ''),
if (iwidth) { // iwidth = parseInt(width, 10);
if (width.substr(-1) === '%') { // if (iwidth) {
total -= iwidth; // if (width.substr(-1) === '%') {
width = iwidth + '%'; // total -= iwidth;
} else { // width = iwidth + '%';
// Absolute width // } else {
$td.css('min-width', width + 'px'); // // Absolute width
} // $td.css('min-width', width + 'px');
$td.attr('width', width); // }
$child.removeAttr('width'); // $td.attr('width', width);
row_cols--; // $child.removeAttr('width');
} else { // row_cols--;
to_compute.push($td); // } else {
} // to_compute.push($td);
// }
} // }
}); // });
var unit = Math.floor(total / row_cols); // var unit = Math.floor(total / row_cols);
if (!$(this).is('.oe_form_group_row_incomplete')) { // if (!$(this).is('.oe_form_group_row_incomplete')) {
_.each(to_compute, function($td, i) { // _.each(to_compute, function($td, i) {
var width = parseInt($td.attr('colspan'), 10) * unit; // var width = parseInt($td.attr('colspan'), 10) * unit;
$td.attr('width', ((i == to_compute.length - 1) ? total : width) + '%'); // $td.attr('width', ((i == to_compute.length - 1) ? total : width) + '%');
total -= width; // total -= width;
}); // });
} // }
}); // });
_.each(children, function(el) { _.each(children, function(el) {
self.process($(el)); self.process($(el));
}); });

View File

@ -786,18 +786,10 @@
<t t-name="FormRenderingSheet" t-extend="FormRenderingForm"> <t t-name="FormRenderingSheet" t-extend="FormRenderingForm">
</t> </t>
<t t-name="FormRenderingGroup"> <t t-name="FormRenderingGroup">
<t t-set="table">
<table border="0" cellpadding="0" cellspacing="0" width="100%" t-att-class="classnames"/>
</t>
<t t-if="string"> <t t-if="string">
<fieldset class="oe_group_box"> <separator t-attf="#{string}"/>
<legend><t t-esc="string"/></legend>
<t t-raw="table"/>
</fieldset>
</t>
<t t-if="!string">
<t t-raw="table"/>
</t> </t>
<table border="0" cellpadding="0" cellspacing="0" width="100%" t-att-class="classnames"/>
</t> </t>
<t t-name="FormRenderingNotebook"> <t t-name="FormRenderingNotebook">
<div> <div>
@ -1075,70 +1067,61 @@
</div> </div>
</t> </t>
<t t-name="FieldStatus.content"> <t t-name="FieldStatus.content">
<ul class="oe-arrow-list"> <div class="oe_right">
<t t-set="size" t-value="widget.to_show.length"/>
<t t-foreach="_.range(size)" t-as="i"> <ul class="oe-arrow-list">
<li t-att-class="widget.to_show[i][0] === widget.selected_value ? 'oe-arrow-list-selected' : ''"> <t t-set="size" t-value="widget.to_show.length"/>
<span class="oe-arrow-list-before" t-if="i &gt; 0"></span><span><t t-esc="widget.to_show[i][1]"/></span><span class="oe-arrow-list-after" t-if="i &lt; size - 1"></span> <t t-foreach="_.range(size)" t-as="i">
</li> <li t-att-class="widget.to_show[i][0] === widget.selected_value ? 'oe-arrow-list-selected' : ''">
</t> <span class="oe-arrow-list-before" t-if="i &gt; 0"></span><span><t t-esc="widget.to_show[i][1]"/></span><span class="oe-arrow-list-after" t-if="i &lt; size - 1"></span>
</ul> </li>
</t>
</ul>
</div>
<div class="oe_clear"/>
</t> </t>
<t t-name="FieldStatus.content"> <t t-name="FieldStatus.content">
<ul class="oe_form_steps"> <div class="oe_right">
<t t-set="size" t-value="widget.to_show.length"/> <ul class="oe_form_steps">
<t t-foreach="_.range(size)" t-as="i"> <t t-set="size" t-value="widget.to_show.length"/>
<li t-att-class="widget.to_show[i][0] === widget.selected_value ? 'oe_form_steps_active' : ''"> <t t-foreach="_.range(size)" t-as="i">
<t t-esc="widget.to_show[i][1]"/> <li t-att-class="widget.to_show[i][0] === widget.selected_value ? 'oe_form_steps_active' : ''">
<img t-att-src='_s + "/web/static/src/img/form_steps.png"' class="oe_form_steps_arrow" t-if="i &lt; size - 1"/> <t t-esc="widget.to_show[i][1]"/>
</li> <img t-att-src='_s + "/web/static/src/img/form_steps.png"' class="oe_form_steps_arrow" t-if="i &lt; size - 1"/>
</t> </li>
</ul> </t>
</ul>
</div>
<div class="oe_clear"/>
</t> </t>
<t t-name="FieldBinaryImage"> <t t-name="FieldBinaryImage">
<table cellpadding="0" cellspacing="0" border="0" width="100%"> <div class="oe_binary_image">
<tr> <div class="oe_form_field-binary-image-placeholder"></div>
<td class="oe_form_field-binary-image-placeholder" align="center"> <div class="oe-binary">
<div class="oe-binary-file-set">
</td> <form class="oe-binary-form" t-att-target="widget.iframe"
</tr> method="post" enctype="multipart/form-data" action="/web/binary/upload">
<tr> <input type="hidden" name="session_id" value=""/>
<td align="center" valign="bottom" height="25"> <input type="hidden" name="callback" t-att-value="widget.iframe"/>
<div class="oe-binary"> <button class="oe_button" type="button" title="Set Image">
<table cellspacing="0" cellpadding="0" border="0"> <img t-att-src='_s + "/web/static/src/img/icons/STOCK_DIRECTORY.png"'/>
<tr> </button>
<td> <input type="file" class="oe-binary-file" name="ufile"
<div class="oe-binary-file-set"> t-att-tabindex="widget.node.attrs.tabindex"
<form class="oe-binary-form" t-att-target="widget.iframe" t-att-autofocus="widget.node.attrs.autofocus"
method="post" enctype="multipart/form-data" action="/web/binary/upload"> />
<input type="hidden" name="session_id" value=""/> </form>
<input type="hidden" name="callback" t-att-value="widget.iframe"/>
<button class="oe_button" type="button" title="Set Image">
<img t-att-src='_s + "/web/static/src/img/icons/STOCK_DIRECTORY.png"'/>
</button>
<input type="file" class="oe-binary-file" name="ufile"
t-att-tabindex="widget.node.attrs.tabindex"
t-att-autofocus="widget.node.attrs.autofocus"
/>
</form>
</div>
</td>
<td>
<button class="oe_button oe-binary-file-clear" type="button" title="Clear">
<img t-att-src='_s + "/web/static/src/img/icons/STOCK_MISSING_IMAGE.png"'/>
</button>
</td>
</tr>
</table>
</div> </div>
<div class="oe-binary-progress" style="display: none"> <button class="oe_button oe-binary-file-clear" type="button" title="Clear">
<img t-att-src='_s + "/web/static/src/img/throbber.gif"' width="16" height="16"/> <img t-att-src='_s + "/web/static/src/img/icons/STOCK_MISSING_IMAGE.png"'/>
<b>Uploading ...</b> </button>
</div> </div>
<iframe t-att-id="widget.iframe" t-att-name="widget.iframe" style="display: none"/> <div class="oe-binary-progress" style="display: none">
</td> <img t-att-src='_s + "/web/static/src/img/throbber.gif"' width="16" height="16"/>
</tr> <b>Uploading ...</b>
</table> </div>
<iframe t-att-id="widget.iframe" t-att-name="widget.iframe" style="display: none"/>
</div>
</t> </t>
<t t-name="FieldBinaryImage-img"> <t t-name="FieldBinaryImage-img">
<img t-att-src='url' class="oe-binary-image field_image" <img t-att-src='url' class="oe-binary-image field_image"