[FIX] Make most fields inline(-block) instead of block level elements

bzr revid: fme@openerp.com-20120530212651-eqzd23mvrjw1bgla
This commit is contained in:
Fabien Meghazi 2012-05-30 23:26:51 +02:00
parent 5a65e3459b
commit 950490f792
5 changed files with 145 additions and 137 deletions

View File

@ -1466,6 +1466,7 @@
background: #ed6f6a;
}
.openerp .oe_form_topbar {
position: relative;
border-bottom: 1px solid #cacaca;
background-color: #fcfcfc;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#dedede));
@ -1515,6 +1516,11 @@
.openerp .oe_form_topbar ul li a:hover {
color: black;
}
.openerp .oe_form_topbar .oe_form_steps {
display: inline-block;
position: absolute;
right: 0;
}
.openerp .oe_form_topbar .oe_form_steps img {
margin: 0 8px;
vertical-align: top;
@ -1587,8 +1593,9 @@
.openerp .oe_form .oe_form_group_cell > .oe_form_field_url input,
.openerp .oe_form .oe_form_group_cell > .oe_form_field_float input,
.openerp .oe_form .oe_form_group_cell > .oe_form_field_selection select,
.openerp .oe_form .oe_form_group_cell > div > .oe_datepicker_root,
.openerp .oe_form .oe_form_group_cell > div > .oe_datepicker_root > input.oe_datepicker_master {
.openerp .oe_form .oe_form_group_cell > .oe_form_field_progressbar,
.openerp .oe_form .oe_form_group_cell > span > .oe_datepicker_root,
.openerp .oe_form .oe_form_group_cell > span > .oe_datepicker_root > input.oe_datepicker_master {
width: 100%;
}
.openerp .oe_form .oe_form_label_help[for], .openerp .oe_form .oe_form_label[for] {
@ -1721,17 +1728,6 @@
background-color: #ff6666 !important;
border: 1px solid #dd0000 !important;
}
.openerp .oe_form .oe_button.oe_field_button {
display: block;
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomleft: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
margin-right: -1px;
height: 22px;
}
.openerp .oe_form .oe_input_icon {
cursor: pointer;
margin: 3px 0 0 -21px;
@ -1748,6 +1744,31 @@
.openerp .oe_form .oe_form_group_cell .oe_kanban_view {
position: static;
}
.openerp .oe_form .oe_form_field_with_button {
display: inline-block;
}
.openerp .oe_form .oe_form_field_with_button > .oe_button {
float: right;
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomleft: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
margin-right: -1px;
height: 22px;
}
.openerp .oe_form .oe_form_field_with_button > div {
position: relative;
overflow: hidden;
}
.openerp .oe_form .oe_form_field_with_button > div > input {
line-height: 23px;
margin-right: 0;
}
.openerp .oe_form .oe_form_group_cell .oe_kanban_view {
position: static;
}
.openerp .oe_form .oe_form_button.oe_button {
height: 22px;
color: #4c4c4c;
@ -1786,6 +1807,9 @@
margin: 0;
padding: 0;
}
.openerp .oe_form .oe_binary_image {
display: inline-block;
}
.openerp .oe_horizontal_border {
border-bottom: 1px solid black;
}
@ -1858,6 +1882,10 @@
.openerp .ui-tabs-hide {
display: none;
}
.openerp .oe_form .oe_form_field_progressbar {
display: inline-block;
min-width: 70px;
}
.openerp .oe_form .oe_form_field_progressbar.ui-progressbar {
height: 22px;
font-size: 10px;
@ -1999,7 +2027,7 @@
.openerp .oe-listview-content > tbody > tr > td.oe_list_checkbox:first-child:after, .openerp .oe-listview-content > tbody > tr th.oe_list_checkbox:first-child:after {
border-width: 0;
}
.openerp .oe-listview-content > tbody > tr > td.oe-number {
.openerp .oe-listview-content > tbody > tr > td.oe_number {
text-align: right !important;
}
.openerp .oe-listview-content > tbody > tr:nth-child(odd) {

View File

@ -1184,6 +1184,7 @@ $colour4: #8a89ba
// }}}
// FormView.customdivs {{{
.oe_form_topbar
position: relative
border-bottom: 1px solid #cacaca
@include vertical-gradient(#fcfcfc, #dedede)
padding: 0 8px
@ -1220,10 +1221,13 @@ $colour4: #8a89ba
&:hover
color: black
.oe_form_steps
img
display: inline-block
position: absolute
right: 0
img
margin: 0 8px
vertical-align: top
li
li
border-right: none
padding: 0
&:first-child
@ -1283,8 +1287,9 @@ $colour4: #8a89ba
.oe_form_group_cell > .oe_form_field_url input,
.oe_form_group_cell > .oe_form_field_float input,
.oe_form_group_cell > .oe_form_field_selection select,
.oe_form_group_cell > div > .oe_datepicker_root,
.oe_form_group_cell > div > .oe_datepicker_root > input.oe_datepicker_master
.oe_form_group_cell > .oe_form_field_progressbar,
.oe_form_group_cell > span > .oe_datepicker_root,
.oe_form_group_cell > span > .oe_datepicker_root > input.oe_datepicker_master
width: 100%
// }}}
// FormView.label {{{
@ -1400,16 +1405,6 @@ $colour4: #8a89ba
input, select, textarea
background-color: #F66 !important
border: 1px solid #D00 !important
.oe_button.oe_field_button
display: block
-webkit-border-top-left-radius: 0px
-webkit-border-bottom-left-radius: 0px
-moz-border-radius-topleft: 0px
-moz-border-radius-bottomleft: 0px
border-top-left-radius: 0px
border-bottom-left-radius: 0px
margin-right: -1px
height: 22px
.oe_input_icon
cursor: pointer
margin: 3px 0 0 -21px
@ -1424,6 +1419,28 @@ $colour4: #8a89ba
.oe_form_group_cell .oe_kanban_view
// Hack due to absolute positioning of kanban view messing with o2m
position: static
.oe_form_field_with_button
display: inline-block
> .oe_button
float: right
-webkit-border-top-left-radius: 0px
-webkit-border-bottom-left-radius: 0px
-moz-border-radius-topleft: 0px
-moz-border-radius-bottomleft: 0px
border-top-left-radius: 0px
border-bottom-left-radius: 0px
margin-right: -1px
height: 22px
> div
position: relative
overflow: hidden
> input
line-height: 23px
margin-right: 0
.oe_form_group_cell .oe_kanban_view
// Hack due to absolute positioning of kanban view messing with o2m
position: static
// }}}
// FormView.buttons {{{
.oe_form
@ -1466,6 +1483,8 @@ $colour4: #8a89ba
-ms-filter: "alpha(opacity=0)"
margin: 0
padding: 0
.oe_binary_image
display: inline-block
// }}}
// FormView.separator {{{
.oe_horizontal_border
@ -1528,6 +1547,9 @@ $colour4: #8a89ba
// }}}
// FormView.progressbar {{{
.oe_form
.oe_form_field_progressbar
display: inline-block
min-width: 70px
.oe_form_field_progressbar.ui-progressbar
height: 22px
font-size: 10px
@ -1653,7 +1675,7 @@ $colour4: #8a89ba
width: 17px
&:after
border-width: 0
> td.oe-number
> td.oe_number
text-align: right !important
> tr:nth-child(odd)
background-color: #f0f0fa

View File

@ -2049,7 +2049,7 @@ instance.web.DateWidget = instance.web.DateTimeWidget.extend({
});
instance.web.form.FieldDatetime = instance.web.form.AbstractField.extend(_.extend({}, instance.web.form.ReinitializeFieldMixin, {
template: "EmptyComponent",
tagName: "span",
build_widget: function() {
return new instance.web.DateTimeWidget(this);
},
@ -4089,7 +4089,7 @@ instance.web.form.FieldBinaryImage = instance.web.form.FieldBinary.extend({
});
instance.web.form.FieldStatus = instance.web.form.AbstractField.extend({
template: "EmptyComponent",
tagName: "span",
start: function() {
this._super();
this.selected_value = null;

View File

@ -1338,7 +1338,7 @@ instance.web.ListView.Groups = instance.web.Class.extend( /** @lends instance.we
} else if (column.id in group.aggregates) {
var r = {};
r[column.id] = {value: group.aggregates[column.id]};
$('<td class="oe-number">')
$('<td class="oe_number">')
.html(instance.web.format_cell(
r, column, {process_modifiers: false}))
.appendTo($row);

View File

@ -591,7 +591,7 @@
t-if="!field.attrs.modifiers.tree_invisible"
t-att-data-id="record.id"
t-att-style="color_for(record) + style "
t-attf-class="#{class} #{rank} #{(fields[field.attrs.name].type === 'float') or (fields[field.attrs.name].type === 'integer') ? 'oe-number' : ''}">
t-attf-class="#{class} #{rank} #{(fields[field.attrs.name].type === 'float') or (fields[field.attrs.name].type === 'integer') ? 'oe_number' : ''}">
<span t-if="!field.attrs.modifiers.invisible" >
<t t-esc="render(record[field.attrs.name], fields[field.attrs.name])" />
@ -634,7 +634,7 @@
<tfoot>
<tr>
<td t-if="options.selectable"/>
<td t-foreach="aggregate_columns" t-as="column" class="oe-list-footer oe-number"
<td t-foreach="aggregate_columns" t-as="column" class="oe-list-footer oe_number"
t-att-data-field="column.id" t-att-title="column.label">
</td>
<td t-if="options.deletable"/>
@ -679,7 +679,7 @@
<t t-foreach="columns" t-as="column">
<t t-set="align" t-value="column.type === 'integer' or column.type == 'float'"/>
<td t-if="!column.meta and column.invisible !== '1'" t-att-title="column.help"
t-att-class="'oe-field-cell' + (align ? ' oe-number' : '')
t-att-class="'oe-field-cell' + (align ? ' oe_number' : '')
+ (column.tag === 'button' ? ' oe-button' : '')"
t-att-data-field="column.id">
<t t-raw="render_cell(record, column)"/>
@ -885,71 +885,44 @@
</ul>
</t>
<t t-name="FieldChar">
<t t-if="!widget.get('effective_readonly')">
<div class="oe_form_field_char">
<span class="oe_form_field_char">
<t t-if="!widget.get('effective_readonly')">
<input t-att-type="widget.password ? 'password' : 'text'"
t-att-id="widget.id_for_label"
t-att-tabindex="widget.node.attrs.tabindex"
t-att-autofocus="widget.node.attrs.autofocus"
t-attf-class="field_char #{widget.is_field_number ? 'oe-number' : ''}"
class="field_char"
t-att-placeholder="widget.node.attrs.placeholder"
/><img class="oe_field_translate oe_input_icon" t-if="widget.field.translate" t-att-src='_s + "/web/static/src/img/icons/terp-translate.png"' width="16" height="16" border="0"/>
</div>
</t>
<t t-if="widget.get('effective_readonly')">
<span t-attf-class="oe_form_field_char #{widget.is_field_number ? 'oe-number' : ''}"/>
</t>
</t>
</span>
</t>
<t t-name="FieldEmail">
<t t-if="!widget.get('effective_readonly')">
<table class="oe_form_field_email" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<span class="oe_form_field_email oe_form_field_with_button">
<a t-if="widget.get('effective_readonly')" href="#" class="oe_form_uri"/>
<t t-if="!widget.get('effective_readonly')">
<button class="oe_button" tabindex="-1" type="button" title="Send an e-mail with your default e-mail client">
<img t-att-src='_s + "/web/static/src/img/icons/terp-mail-message-new.png"'/>
</button>
<div>
<input type="text"
t-att-id="widget.id_for_label"
t-att-tabindex="widget.node.attrs.tabindex"
t-att-autofocus="widget.node.attrs.autofocus"
t-att-placeholder="widget.node.attrs.placeholder"
/>
</td>
<td width="16">
<button class="oe_button oe_field_button" tabindex="-1" type="button" title="Send an e-mail with your default e-mail client">
<img t-att-src='_s + "/web/static/src/img/icons/terp-mail-message-new.png"'/>
</button>
</td>
</tr>
</table>
</t>
<t t-if="widget.get('effective_readonly')">
<span>
<a href="#" class="oe_form_uri"/>
</span>
</t>
</div>
</t>
</span>
</t>
<t t-name="FieldUrl">
<t t-if="!widget.get('effective_readonly')">
<table class="oe_form_field_url" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<input type="text"
t-att-id="widget.id_for_label"
t-att-tabindex="widget.node.attrs.tabindex"
t-att-autofocus="widget.node.attrs.autofocus"
t-att-placeholder="widget.node.attrs.placeholder"
/>
</td>
<td width="16">
<button class="oe_button oe_field_button" tabindex="-1" type="button" title="Open this resource">
<img t-att-src='_s + "/web/static/src/img/icons/gtk-ok.png"'/>
</button>
</td>
</tr>
</table>
<t t-name="FieldUrl" t-extend="FieldEmail">
<t t-jquery="span:first">
this.removeClass('oe_form_field_email').addClass('oe_form_field_url');
</t>
<t t-if="widget.get('effective_readonly')">
<span>
<a href="#" class="oe_form_uri"/>
</span>
<t t-jquery="button.oe_button" t-operation="replace">
<button class="oe_button" tabindex="-1" type="button" title="Open this resource">
<img t-att-src='_s + "/web/static/src/img/icons/gtk-ok.png"'/>
</button>
</t>
</t>
<t t-name="FieldText">
@ -967,7 +940,7 @@
</t>
<t t-name="web.datetimepicker">
<t t-set="placeholder" t-value="widget.getParent().node and widget.getParent().node.attrs.placeholder"/>
<div class="oe_datepicker_root oe_form_field_datetime">
<span class="oe_datepicker_root oe_form_field_datetime">
<input type="text" class="oe_datepicker_container" disabled="disabled" style="display: none;"/>
<input type="text"
t-att-name="widget.name"
@ -975,31 +948,29 @@
t-attf-class="oe_datepicker_master field_#{widget.type_of_date} oe_form_field_#{widget.type_of_date}"
/><img class="oe_input_icon oe_datepicker_trigger" t-att-src='_s + "/web/static/src/img/ui/field_calendar.png"'
title="Select date" width="16" height="16" border="0"/>
</div>
</span>
</t>
<t t-name="FieldSelection">
<t t-if="!widget.get('effective_readonly')">
<div class="oe_form_field_selection">
<select
t-att-name="widget.name"
t-att-tabindex="widget.node.attrs.tabindex"
t-att-autofocus="widget.node.attrs.autofocus"
t-att-id="widget.id_for_label">
<t t-foreach="widget.values" t-as="option">
<option><t t-esc="option[1]"/></option>
</t>
</select>
</div>
</t>
<t t-if="widget.get('effective_readonly')">
<span class="field_selection"/>
</t>
<span class="oe_form_field_selection">
<select t-if="!widget.get('effective_readonly')"
t-att-name="widget.name"
t-att-tabindex="widget.node.attrs.tabindex"
t-att-autofocus="widget.node.attrs.autofocus"
t-att-id="widget.id_for_label">
<t t-foreach="widget.values" t-as="option">
<option><t t-esc="option[1]"/></option>
</t>
</select>
</span>
</t>
<t t-name="FieldMany2One">
<t t-if="!widget.get('effective_readonly')">
<table class="oe_form_field_many2one" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top">
<span class="oe_form_field_many2one oe_form_field_with_button">
<a t-if="widget.get('effective_readonly')" href="#" class="oe_form_uri"/>
<t t-if="!widget.get('effective_readonly')">
<button class="oe_button oe-m2o-cm-button" title="Open Resource">
<img t-att-src='_s + "/web/static/src/img/icons/terp-folder-yellow.png"'/>
</button>
<div>
<input type="text"
t-att-id="widget.id_for_label"
t-att-tabindex="widget.node.attrs.tabindex"
@ -1007,21 +978,11 @@
t-att-placeholder="widget.node.attrs.placeholder"
/>
<span class="oe-m2o-drop-down-button">
<img t-att-src='_s + "/web/static/src/img/down-arrow.png"' /></span>
</td>
<td width="16">
<button class="oe_button oe_field_button oe-m2o-cm-button" title="Open Resource">
<img t-att-src='_s + "/web/static/src/img/icons/terp-folder-yellow.png"'/>
</button>
</td>
</tr>
</table>
</t>
<t t-if="widget.get('effective_readonly')">
<span>
<a href="#" class="oe_form_uri"/>
</span>
</t>
<img t-att-src='_s + "/web/static/src/img/down-arrow.png"'/>
</span>
</div>
</t>
</span>
</t>
<t t-name="FieldMany2ManyTags">
<div class="oe_form_field_many2manytags">
@ -1060,26 +1021,23 @@
</span>
</t>
<t t-name="FieldProgressBar">
<div class="oe_form_field_progressbar" t-opentag="true">
<span class="oe_form_field_progressbar" t-opentag="true">
<span></span>
</div>
</span>
</t>
<t t-name="FieldStatus.content">
<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"/>
<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>
</t>
<t t-name="FieldBinaryImage">
<div class="oe_binary_image">
<span class="oe_binary_image">
<div class="oe_form_field-binary-image-placeholder"></div>
<div class="oe-binary">
<div class="oe-binary-file-set">
@ -1105,7 +1063,7 @@
<b>Uploading ...</b>
</div>
<iframe t-att-id="widget.iframe" t-att-name="widget.iframe" style="display: none"/>
</div>
</span>
</t>
<t t-name="FieldBinaryImage-img">
<img t-att-src='url' class="oe-binary-image field_image"