From 8bc7cebd9c19ae8f77378d115a8401d7b7de56b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexandre=20K=C3=BChn?= Date: Wed, 3 Jan 2018 11:42:39 +0100 Subject: [IMP] web: many2many editable list with X remove icon (#20978) In many2many lists, the remove record from the widget is a trash bin. It is confusing, as people feel they are deleting it when they are only unlinking it. So in many2many, we propose to change the trash icon by a 'X'. This icon appears in many2many relations and in many2many widgets: even though hr.expense.sheet defines the expense lines as a one2many, it uses a many2many widget, so we use a 'X' instead of the trash bin. To avoid ambiguity, we decided to rename 'delete' to 'remove'. --- .../web/static/src/js/fields/relational_fields.js | 13 ++++---- .../src/js/views/list/list_editable_renderer.js | 37 +++++++++++++--------- addons/web/static/src/less/list_view.less | 2 +- 3 files changed, 30 insertions(+), 22 deletions(-) (limited to 'addons/web/static/src') diff --git a/addons/web/static/src/js/fields/relational_fields.js b/addons/web/static/src/js/fields/relational_fields.js index 4ad3dc1a828..52654c4ce3a 100644 --- a/addons/web/static/src/js/fields/relational_fields.js +++ b/addons/web/static/src/js/fields/relational_fields.js @@ -635,11 +635,11 @@ var FieldX2Many = AbstractField.extend({ discard_changes: '_onDiscardChanges', edit_line: '_onEditLine', field_changed: '_onFieldChanged', - kanban_record_delete: '_onDeleteRecord', - list_record_delete: '_onDeleteRecord', open_record: '_onOpenRecord', - save_line: '_onSaveLine', + kanban_record_delete: '_onRemoveRecord', + list_record_remove: '_onRemoveRecord', resequence: '_onResequence', + save_line: '_onSaveLine', toggle_column_order: '_onToggleColumnOrder', }), @@ -661,6 +661,7 @@ var FieldX2Many = AbstractField.extend({ this.operations = []; this.isReadonly = this.mode === 'readonly'; this.view = this.attrs.views[this.attrs.mode]; + this.isMany2Many = this.field.type === 'many2many' || this.attrs.widget === 'many2many'; this.activeActions = {}; this.recordParams = {fieldName: this.name, viewType: this.viewType}; var arch = this.view && this.view.arch; @@ -798,6 +799,7 @@ var FieldX2Many = AbstractField.extend({ mode: this.mode, addCreateLine: !this.isReadonly && this.activeActions.create, addTrashIcon: !this.isReadonly && this.activeActions.delete, + isMany2Many: this.isMany2Many, viewType: viewType, columnInvisibleFields: this.currentColInvisibleFields, }); @@ -947,10 +949,9 @@ var FieldX2Many = AbstractField.extend({ * @private * @param {OdooEvent} ev */ - _onDeleteRecord: function (ev) { + _onRemoveRecord: function (ev) { ev.stopPropagation(); - var shouldForget = this.attrs.widget === 'many2many' || this.field.type === 'many2many'; - var operation = shouldForget ? 'FORGET' : 'DELETE'; + var operation = this.isMany2Many ? 'FORGET' : 'DELETE'; this._setValue({ operation: operation, ids: [ev.data.id], diff --git a/addons/web/static/src/js/views/list/list_editable_renderer.js b/addons/web/static/src/js/views/list/list_editable_renderer.js index c1ef23b6b5e..964b7ba7bbe 100644 --- a/addons/web/static/src/js/views/list/list_editable_renderer.js +++ b/addons/web/static/src/js/views/list/list_editable_renderer.js @@ -23,11 +23,11 @@ ListRenderer.include({ navigation_move: '_onNavigationMove', }), events: _.extend({}, ListRenderer.prototype.events, { + 'click .o_field_x2many_list_row_add a': '_onAddRecord', 'click tbody td.o_data_cell': '_onCellClick', 'click tbody tr:not(.o_data_row)': '_onEmptyRowClick', 'click tfoot': '_onFooterClick', - 'click tr .o_list_record_delete': '_onTrashIconClick', - 'click .o_field_x2many_list_row_add a': '_onAddRecord', + 'click tr .o_list_record_remove': '_onRemoveIconClick', }), /** * @override @@ -46,6 +46,10 @@ ListRenderer.include({ // of each line, so the user can delete a record. this.addTrashIcon = params.addTrashIcon; + // replace the trash icon by X in case of many2many relations + // so that it means 'unlink' instead of 'remove' + this.isMany2Many = params.isMany2Many; + this.currentRow = null; this.currentFieldIndex = null; }, @@ -489,6 +493,7 @@ ListRenderer.include({ /** * Editable rows are possibly extended with a trash icon on their right, to * allow deleting the corresponding record. + * For many2many editable lists, the trash bin is replaced by X. * * @override * @param {any} record @@ -498,8 +503,10 @@ ListRenderer.include({ _renderRow: function (record, index) { var $row = this._super.apply(this, arguments); if (this.addTrashIcon) { - var $icon = $('', {class: 'fa fa-trash-o', name: 'delete'}); - var $td = $('', {class: 'o_list_record_delete'}).append($icon); + var $icon = this.isMany2Many ? + $('', {class: 'fa fa-times', name: 'unlink'}) : + $('', {class: 'fa fa-trash-o', name: 'delete'}); + var $td = $('', {class: 'o_list_record_remove'}).append($icon); $row.append($td); } return $row; @@ -776,6 +783,17 @@ ListRenderer.include({ break; } }, + /** + * Triggers a remove event. I don't know why we stop the propagation of the + * event. + * + * @param {MouseEvent} event + */ + _onRemoveIconClick: function (event) { + event.stopPropagation(); + var id = $(event.target).closest('tr').data('id'); + this.trigger_up('list_record_remove', {id: id}); + }, /** * If the list view editable, just let the event bubble. We don't want to * open the record in this case anyway. @@ -799,17 +817,6 @@ ListRenderer.include({ this._super.apply(this, arguments); } }, - /** - * Triggers a delete event. I don't know why we stop the propagation of the - * event. - * - * @param {MouseEvent} event - */ - _onTrashIconClick: function (event) { - event.stopPropagation(); - var id = $(event.target).closest('tr').data('id'); - this.trigger_up('list_record_delete', {id: id}); - }, /** * When a click happens outside the list view, or outside a currently * selected row, we want to unselect it. diff --git a/addons/web/static/src/less/list_view.less b/addons/web/static/src/less/list_view.less index 395bf633e45..98a1d56fac0 100644 --- a/addons/web/static/src/less/list_view.less +++ b/addons/web/static/src/less/list_view.less @@ -66,7 +66,7 @@ } } - .o_list_record_selector, .o_list_record_delete, .o_handle_cell { + .o_list_record_selector, .o_list_record_remove, .o_handle_cell { width: 1px; // to prevent the column to expand } -- cgit v1.2.3