From a3828dfed385fc9feab2a0cb5ded53d0eaade452 Mon Sep 17 00:00:00 2001 From: David Monjoie Date: Tue, 26 Sep 2017 15:31:44 +0200 Subject: [PATCH] [FIX] web: fix o_row mechanism with phone field The o_row class mechanism is supposed to be used to put another element next to a field, like a button for example. However, in the case of phone and email field, the o_text_overflow hack gets in the way. The problem that o_text_overflow is trying to solve is when you have a long email, the table used to display the form view fields tends to use very long cells (td) so it can display the whole email address. This behavior completely breaks the form view, even though the email address is clearly set to wrap in css. The o_text_overflow class is a hack that forces the table to think that the email is small, then defaulting to the width 50% css rules. If the email is too long, it is correctly wrapped inside the cell, without breaking the form view layout. However, when we need to add a button next to those fields, this hack gets in the way of the o_row class css rules, completely wrecking it. We looked for a fix with qsm-odoo for hours but were unable to find one that did not require a complete rewrite of the form view css rules. In the end, we decided to remove the hack from the phone field and keep it on the email field, as we think it is less common to have a very long phone number than to have a very long email. --- addons/web/static/src/js/fields/basic_fields.js | 4 ++++ .../static/tests/fields/basic_fields_tests.js | 16 ++++++++-------- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js index 2a465c4dc1b..f2c7fcf37cd 100644 --- a/addons/web/static/src/js/fields/basic_fields.js +++ b/addons/web/static/src/js/fields/basic_fields.js @@ -952,6 +952,10 @@ var FieldPhone = FieldEmail.extend({ } else { this.$el.removeClass('o_form_uri'); } + // This class should technically be there in case of a very very long + // phone number, but it breaks the o_row mechanism, which is more + // important right now. + this.$el.removeClass('o_text_overflow'); }, /** diff --git a/addons/web/static/tests/fields/basic_fields_tests.js b/addons/web/static/tests/fields/basic_fields_tests.js index 90f2b14cb01..0dd11e549bd 100644 --- a/addons/web/static/tests/fields/basic_fields_tests.js +++ b/addons/web/static/tests/fields/basic_fields_tests.js @@ -2548,7 +2548,7 @@ QUnit.module('basic_fields', { }, }); - var $phoneLink = form.$('a.o_form_uri.o_field_widget.o_text_overflow'); + var $phoneLink = form.$('a.o_form_uri.o_field_widget'); assert.strictEqual($phoneLink.length, 1, "should have a anchor with correct classes"); assert.strictEqual($phoneLink.text(), 'y\u00ADop', @@ -2568,7 +2568,7 @@ QUnit.module('basic_fields', { // save form.$buttons.find('.o_form_button_save').click(); - $phoneLink = form.$('a.o_form_uri.o_field_widget.o_text_overflow'); + $phoneLink = form.$('a.o_form_uri.o_field_widget'); assert.strictEqual($phoneLink.text(), 'n\u00ADew', "new value should be displayed properly as text with the skype obfuscation"); assert.strictEqual($phoneLink.attr('href'), 'tel:new', @@ -2598,7 +2598,7 @@ QUnit.module('basic_fields', { assert.strictEqual(list.$('tbody td:not(.o_list_record_selector)').first().text(), 'y\u00ADop', "value should be displayed properly as text with the skype obfuscation"); - var $phoneLink = list.$('a.o_form_uri.o_field_widget.o_text_overflow'); + var $phoneLink = list.$('a.o_form_uri.o_field_widget'); assert.strictEqual($phoneLink.length, 5, "should have anchors with correct classes"); assert.strictEqual($phoneLink.first().attr('href'), 'tel:yop', @@ -2618,7 +2618,7 @@ QUnit.module('basic_fields', { assert.ok(!$cell.parent().hasClass('o_selected_row'), 'should not be in edit mode anymore'); assert.strictEqual(list.$('tbody td:not(.o_list_record_selector)').first().text(), 'n\u00ADew', "value should be properly updated"); - $phoneLink = list.$('a.o_form_uri.o_field_widget.o_text_overflow'); + $phoneLink = list.$('a.o_form_uri.o_field_widget'); assert.strictEqual($phoneLink.length, 5, "should still have anchors with correct classes"); assert.strictEqual($phoneLink.first().attr('href'), 'tel:new', @@ -2658,7 +2658,7 @@ QUnit.module('basic_fields', { }, }); - var $phone = form.$('span.o_field_widget.o_text_overflow:not(.o_form_uri)'); + var $phone = form.$('span.o_field_widget:not(.o_form_uri)'); assert.strictEqual($phone.length, 1, "should have a simple span rather than a link"); assert.strictEqual($phone.text(), 'yop', @@ -2676,7 +2676,7 @@ QUnit.module('basic_fields', { // save form.$buttons.find('.o_form_button_save').click(); - assert.strictEqual(form.$('span.o_field_widget.o_text_overflow:not(.o_form_uri)').text(), 'new', + assert.strictEqual(form.$('span.o_field_widget:not(.o_form_uri)').text(), 'new', "new value should be displayed properly as text without skype obfuscation"); form.destroy(); @@ -2711,7 +2711,7 @@ QUnit.module('basic_fields', { assert.strictEqual(list.$('tbody td:not(.o_list_record_selector)').first().text(), 'yop', "value should be displayed properly as text without skype obfuscation"); - assert.strictEqual(list.$('span.o_field_widget.o_text_overflow:not(.o_form_uri)').length, 5, + assert.strictEqual(list.$('span.o_field_widget:not(.o_form_uri)').length, 5, "should have spans with correct classes"); // Edit a line and check the result @@ -2728,7 +2728,7 @@ QUnit.module('basic_fields', { assert.ok(!$cell.parent().hasClass('o_selected_row'), 'should not be in edit mode anymore'); assert.strictEqual(list.$('tbody td:not(.o_list_record_selector)').first().text(), 'new', "value should be properly updated"); - assert.strictEqual(list.$('span.o_field_widget.o_text_overflow:not(.o_form_uri)').length, 5, + assert.strictEqual(list.$('span.o_field_widget:not(.o_form_uri)').length, 5, "should still have spans with correct classes"); list.destroy();