From e8a071a744b7706214952440059cc481bbe504d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexandre=20K=C3=BChn?= Date: Mon, 1 Oct 2018 16:44:40 +0200 Subject: [PATCH] [FIX] mail: show/hide 'New Message/Channel' in discuss mobile Before this commit, the buttons 'New Message' and 'New Channel' were shown in all tabs of discuss mobile, even though they should only be displayed in some tabs. This issue comes from a change from BS3 to BS4, in which the classname `visible-xs` has been replaced with `d-block d-md-none`. With BS4, the classnames `d_*` are now `!important`. As a result, `d-block d-md-none o_hidden` still displayed the button because `o_hidden` does not have `!important`. This commit fixes this issue by removing the reliance on `o_hidden`, and now only uses `d-*` for the visibility of the button. The toggling of `o_hidden` has been replaced with adding or removing the classes `d-none` (hidden) and `d-block` (visible). Those buttons are not shown in desktop thanks to `d-md-none`. Task-ID 1877502 --- addons/mail/static/src/js/discuss_mobile.js | 12 ++++-- addons/mail/static/src/xml/discuss.xml | 2 +- .../mail/static/tests/discuss_mobile_tests.js | 39 ++++++++++++++++--- 3 files changed, 43 insertions(+), 10 deletions(-) diff --git a/addons/mail/static/src/js/discuss_mobile.js b/addons/mail/static/src/js/discuss_mobile.js index fda74540688..e08aaeee43a 100644 --- a/addons/mail/static/src/js/discuss_mobile.js +++ b/addons/mail/static/src/js/discuss_mobile.js @@ -194,13 +194,17 @@ Discuss.include({ // update control panel self.$buttons.find('button') - .addClass('o_hidden'); + .removeClass('d-block') + .addClass('d-none'); self.$buttons.find('.o_mail_discuss_button_' + type) - .removeClass('o_hidden'); + .removeClass('d-none') + .addClass('d-block'); self.$buttons.find('.o_mail_discuss_button_mark_all_read') - .toggleClass('o_hidden', type !== 'mailbox_inbox'); + .toggleClass('d-none', type !== 'mailbox_inbox') + .toggleClass('d-block', type === 'mailbox_inbox'); self.$buttons.find('.o_mail_discuss_button_unstar_all') - .toggleClass('o_hidden', type !== 'mailbox_starred'); + .toggleClass('d-none', type !== 'mailbox_starred') + .toggleClass('d-block', type === 'mailbox_starred'); // update Mailbox page buttons if (inMailbox) { diff --git a/addons/mail/static/src/xml/discuss.xml b/addons/mail/static/src/xml/discuss.xml index 5d35ca8b7cd..a09b7a6f754 100644 --- a/addons/mail/static/src/xml/discuss.xml +++ b/addons/mail/static/src/xml/discuss.xml @@ -178,7 +178,7 @@ - + diff --git a/addons/mail/static/tests/discuss_mobile_tests.js b/addons/mail/static/tests/discuss_mobile_tests.js index a0b9383ea45..2f0fd5de647 100644 --- a/addons/mail/static/tests/discuss_mobile_tests.js +++ b/addons/mail/static/tests/discuss_mobile_tests.js @@ -24,7 +24,7 @@ QUnit.test('mobile basic rendering', function (assert) { // /mail/client_action route is always called when the test suite is // launched), and we must wait for this RPC to be done before starting to // test the interface. This should be refactored to facilitate the testing. - assert.expect(8); + assert.expect(19); var done = assert.async(); createDiscuss({ @@ -45,14 +45,44 @@ QUnit.test('mobile basic rendering', function (assert) { "inbox/starred buttons should be visible"); assert.ok(discuss.$('.o_mail_discuss_mobile_mailboxes_buttons .o_mailbox_inbox_item[data-type=mailbox_inbox]').hasClass('btn-primary'), "should be in inbox"); + assert.ok($('.o_mail_discuss_button_dm_chat').hasClass('d-none'), + "should have invisible button 'New Message'"); + assert.ok($('.o_mail_discuss_button_public').hasClass('d-none'), + "should have invisible button 'New Channel'"); - // move to DMs tab + // move to 'Chat' tab discuss.$('.o_mail_mobile_tab[data-type=dm_chat]').click(); assert.ok(discuss.$('.o_mail_mobile_tab[data-type=dm_chat]').hasClass('active'), - "should be in DMs chat tab"); + "should be in 'Chat' tab"); assert.strictEqual(discuss.$('.o_mail_discuss_content .o_mail_no_content').length, 0, "should display the no content message"); - $('.o_mail_discuss_button_dm').click(); // click to add a channel + assert.strictEqual($('.o_mail_discuss_button_dm_chat').length, 1, + "should have a button to open DM chat in 'Chat' tab"); + assert.notOk($('.o_mail_discuss_button_dm_chat').hasClass('d-none'), + "should be visible in 'Chat' tab"); + assert.ok($('.o_mail_discuss_button_public').hasClass('d-none'), + "should have invisible button 'New Channel' in 'Chat' tab"); + $('.o_mail_discuss_button_dm_chat').click(); // click to open a chat + assert.strictEqual(discuss.$('.o_mail_add_thread input:visible').length, 1, + "should display the input to add a channel"); + + // move to 'Channels' tab + discuss.$('.o_mail_mobile_tab[data-type=public]').click(); + assert.ok($('.o_mail_discuss_button_dm_chat').hasClass('d-none'), + "should have invisible button 'New Message' in 'Channels' tab"); + assert.notOk($('.o_mail_discuss_button_public').hasClass('d-none'), + "should have visible button 'New Channel' in 'Channels' tab"); + $('.o_mail_discuss_button_public').click(); // click to open a chat + assert.strictEqual(discuss.$('.o_mail_add_thread input:visible').length, 1, + "should display the input to add a channel"); + + // move to Private Channels tab + discuss.$('.o_mail_mobile_tab[data-type=private]').click(); + assert.ok($('.o_mail_discuss_button_dm_chat').hasClass('d-none'), + "should have invisible button 'New Message' in 'Private Channels' tab"); + assert.notOk($('.o_mail_discuss_button_private').hasClass('d-none'), + "should have invisible button 'New Channel' in 'Private Channels' tab"); + $('.o_mail_discuss_button_private').click(); // click to open a chat assert.strictEqual(discuss.$('.o_mail_add_thread input:visible').length, 1, "should display the input to add a channel"); @@ -85,5 +115,4 @@ QUnit.test('on_{attach/detach}_callback', function (assert) { }); }); - });