From 950490f792c2b89e83d3558b5e4993d299033a15 Mon Sep 17 00:00:00 2001
From: Fabien Meghazi <fme@openerp.com>
Date: Wed, 30 May 2012 23:26:51 +0200
Subject: [PATCH] [FIX] Make most fields inline(-block) instead of block level
 elements

bzr revid: fme@openerp.com-20120530212651-eqzd23mvrjw1bgla
---
 addons/web/static/src/css/base.css    |  56 ++++++---
 addons/web/static/src/css/base.sass   |  52 +++++---
 addons/web/static/src/js/view_form.js |   4 +-
 addons/web/static/src/js/view_list.js |   2 +-
 addons/web/static/src/xml/base.xml    | 168 ++++++++++----------------
 5 files changed, 145 insertions(+), 137 deletions(-)

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index d956cc1c39f..e6c590e3ac6 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -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) {
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index 7ff1af4743d..4ef576b20a7 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -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
diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index 60bba9879ef..0c19751fc69 100644
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -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;
diff --git a/addons/web/static/src/js/view_list.js b/addons/web/static/src/js/view_list.js
index 67c8ce0239e..081c4444a72 100644
--- a/addons/web/static/src/js/view_list.js
+++ b/addons/web/static/src/js/view_list.js
@@ -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);
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 396bd8e8642..df1d444b491 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -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"