[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;
padding: 0 2px;
}
.openerp .oe_form h2 input {
font-size: 20px;
font-weight: bold;
height: 30px;
}
.openerp .oe_form textarea {
resize: vertical;
}
@ -1767,6 +1772,7 @@
.openerp .oe_form .oe-binary-file-set {
overflow: hidden;
position: relative;
display: inline-block;
width: 45px;
height: 30px;
}
@ -1895,11 +1901,6 @@
.openerp .oe-select-create-popup-view-form > .oe_formview > .oe_form_pager {
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_label_border > tbody > tr.oe_form_group_row > td.oe_form_group_cell_label {
border-right: 1px solid #dddddd;

View File

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

View File

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

View File

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