[IMP] look of non-selectable or non-editable editable list views when a row is being edited

dynamically add and remove padding rows

lp bug: https://launchpad.net/bugs/842644 fixed

bzr revid: xmo@openerp.com-20110908125510-fb7vcjsixj5sqhpz

addons/web/static/src/js/list-editable.js

@@ -112,6 +112,7 @@ openerp.web.list_editable = function (openerp) {
                 cancelled.resolve();
             }
             cancelled.then(function () {
+                self.view.unpad_columns();
                 self.edition_form.stop();
                 self.edition_form.$element.remove();
                 delete self.edition_form;
@@ -197,6 +198,16 @@ openerp.web.list_editable = function (openerp) {
                             $new_row.prepend('<td>');
                         }
                     });
+                    // Add columns for the cancel and save buttons, if
+                    // there are none in the list
+                    if (!self.options.selectable) {
+                        self.view.pad_columns(
+                            1, {except: $new_row, position: 'before'});
+                    }
+                    if (!self.options.deletable) {
+                        self.view.pad_columns(
+                            1, {except: $new_row});
+                    }
 
                     self.edition_form.do_show();
                 });

addons/web/static/src/js/list.js

@@ -49,6 +49,7 @@ openerp.web.ListView = openerp.web.View.extend( /** @lends openerp.web.ListView#
         this.dataset = dataset;
         this.model = dataset.model;
         this.view_id = view_id;
+        this.previous_colspan = null;
 
         this.columns = [];
 
@@ -603,6 +604,49 @@ openerp.web.ListView = openerp.web.View.extend( /** @lends openerp.web.ListView#
     get_selected_ids: function() {
         var ids = this.groups.get_selection().ids;
         return ids;
+    },
+    /**
+     * Adds padding columns at the start or end of all table rows (including
+     * field names row)
+     *
+     * @param {Number} count number of columns to add
+     * @param {Object} options
+     * @param {"before"|"after"} [position="after"] insertion position for the new columns
+     * @param {Object} [except] content row to not pad
+     */
+    pad_columns: function (count, options) {
+        options = options || {};
+        // padding for action/pager header
+        var $first_header = this.$element.find('thead tr:first th');
+        var colspan = $first_header.attr('colspan');
+        if (colspan) {
+            if (!this.previous_colspan) {
+                this.previous_colspan = colspan;
+            }
+            $first_header.attr('colspan', parseInt(colspan, 10) + count);
+        }
+        // Padding for column titles, footer and data rows
+        var $rows = this.$element
+                .find('.oe-listview-header-columns, tr:not(thead tr)')
+                .not(options['except']);
+        var newcols = new Array(count+1).join('<td class="oe-listview-padding"></td>');
+        if (options.position === 'before') {
+            $rows.prepend(newcols);
+        } else {
+            $rows.append(newcols);
+        }
+    },
+    /**
+     * Removes all padding columns of the table
+     */
+    unpad_columns: function () {
+        this.$element.find('.oe-listview-padding').remove();
+        if (this.previous_colspan) {
+            this.$element
+                    .find('thead tr:first th')
+                    .attr('colspan', this.previous_colspan);
+            this.previous_colspan = null;
+        }
     }
 });
 openerp.web.ListView.List = openerp.web.Class.extend( /** @lends openerp.web.ListView.List# */{

addons/web/static/src/xml/base.xml

@@ -566,7 +566,7 @@
                 </table>
             </th>
         </tr>
-        <tr t-if="options.header">
+        <tr t-if="options.header" class="oe-listview-header-columns">
             <t t-foreach="columns" t-as="column">
                 <th t-if="column.meta">
                     <t t-esc="column.string"/>
@@ -1211,21 +1211,11 @@
     <button type="button" class="oe_formopenpopup-form-close">Cancel</button>
 </t>
 <t t-name="ListView.row.frame" t-extend="WidgetFrame">
-    <t t-jquery="tr">
-        $(document.createElement('t'))
-            .append(this.contents())
-            .attr({
-                't-foreach': this.attr('t-foreach'),
-                't-as': this.attr('t-as')
-            })
-            .replaceAll(this)
-            .after($(document.createElement('td')).append(
-                $(document.createElement('button')).attr({
-                    'class': 'oe-edit-row-save', 'type': 'button'}).text('Save')))
-            .before($(document.createElement('td')).append(
-                $(document.createElement('button')).attr({
-                    'class': 'oe-edit-row-cancel', 'type': 'button'}).text('Cancel')))
-            .unwrap();
+    <t t-jquery="tr" t-operation="prepend">
+        <td><button type="button" class="oe-edit-row-cancel">Cancel</button></td>
+    </t>
+    <t t-jquery="tr" t-operation="append">
+        <td><button type="button" class="oe-edit-row-save">Save</button></td>
     </t>
 </t>