pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web: fix optional dropdown hide behind listview table

Browse Source 
before this commit: when you have o2m which has optional fields and optional
field dropdown is bigger and o2m does not have records and when you open
optional dropdown it hidden behind o2m table. The reason is optional dropdown
is child of table.

after this commit: put dropdown as child of listview.$el so it is no more child
of table so when it is opened it is displayed on top of listview table, here we
also have to calculate position of optional dropdown as it is no more child of
table element, so we have to set left position based on table width and if
language direction is rtl then dropdown width.

task-2370860
Closes #62681

closes odoo/odoo#64085

X-original-commit: a14c74d926b35dc499914edcbb7b93e638fe3bce
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
This commit is contained in:
Mohammed Shekha
2021-01-05 13:29:47 +00:00
parent 7943c123ce
commit 30f2a7f149
2 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/js/views/list/list_renderer.js
+8 -1
View File
@@ -1112,7 +1112,7 @@ var ListRenderer = BasicRenderer.extend({
this.$('table').append(
$('<i class="o_optional_columns_dropdown_toggle fa fa-ellipsis-v"/>')
);
this.$('table').append(this._renderOptionalColumnsDropdown());
this.$el.append(this._renderOptionalColumnsDropdown());
}
if (this.selection.length) {
const $checked_rows = this.$('tr').filter(
@@ -1284,6 +1284,13 @@ var ListRenderer = BasicRenderer.extend({
// default, which is why we need to toggle the dropdown manually.
ev.stopPropagation();
this.$('.o_optional_columns .dropdown-toggle').dropdown('toggle');
// Explicitly set left of the optional column dropdown as it is pushed inside
// this.$el, so we need to position it at the end of top right/left corner based
// on language direction.
var left = _t.database.parameters.direction === 'rtl' ?
this.$('.o_optional_columns .o_optional_columns_dropdown').width() :
this.$("table").width();
this.$('.o_optional_columns').css("left", left);
},
/**
* Manages the keyboard events on the list. If the list is not editable, when the user navigates to
addons/web/static/tests/views/list_tests.js
+4 -4
View File
@@ -10197,10 +10197,10 @@ QUnit.module('Views', {
assert.containsOnce(list.$('table'), '.o_optional_columns_dropdown_toggle',
"should have the optional columns dropdown toggle inside the table");
const optionalFieldsToggler = list.el.querySelector('table').lastElementChild.previousSibling;
const optionalFieldsToggler = list.el.querySelector('table').lastElementChild;
assert.ok(optionalFieldsToggler.classList.contains('o_optional_columns_dropdown_toggle'),
'The optional fields toggler is the second last element');
const optionalFieldsDropdown = list.el.querySelector('table').lastElementChild;
const optionalFieldsDropdown = list.el.querySelector('.o_list_view').lastElementChild;
assert.ok(optionalFieldsDropdown.classList.contains('o_optional_columns'),
'The optional fields dropdown is the last element');
@@ -10265,10 +10265,10 @@ QUnit.module('Views', {
assert.containsOnce(list.$('table'), '.o_optional_columns_dropdown_toggle',
"should have the optional columns dropdown toggle inside the table");
const optionalFieldsToggler = list.el.querySelector('table').lastElementChild.previousSibling;
const optionalFieldsToggler = list.el.querySelector('table').lastElementChild;
assert.ok(optionalFieldsToggler.classList.contains('o_optional_columns_dropdown_toggle'),
'The optional fields toggler is the last element');
const optionalFieldsDropdown = list.el.querySelector('table').lastElementChild;
const optionalFieldsDropdown = list.el.querySelector('.o_list_view').lastElementChild;
assert.ok(optionalFieldsDropdown.classList.contains('o_optional_columns'),
'The optional fields is the last element');