[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
This commit is contained in:
@@ -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) {
|
||||
|
||||
@@ -178,7 +178,7 @@
|
||||
<button type="button" class="btn btn-primary o_mail_discuss_button_invite d-none d-md-inline-block" title="Invite people">Invite</button>
|
||||
<button type="button" class="btn btn-secondary o_mail_discuss_button_mark_all_read d-none d-md-inline-block" title="Mark all as read">Mark all read</button>
|
||||
<button type="button" class="btn btn-secondary o_mail_discuss_button_unstar_all" title="Unstar all messages">Unstar all</button>
|
||||
<button type="button" class="btn btn-secondary o_mail_discuss_button_dm d-block d-md-none" title="New Message">New Message</button>
|
||||
<button type="button" class="btn btn-secondary o_mail_discuss_button_dm_chat o_hidden d-md-none" title="New Message">New Message</button>
|
||||
<button t-if="!disableAddThread" type="button" class="btn btn-secondary o_mail_discuss_button_public o_mail_discuss_button_private d-block d-md-none" title="New Channel">New Channel</button>
|
||||
<button type="button" class="btn btn-secondary o_hidden o_mail_discuss_button_select_all" title="Select all messages to moderate">Select All</button>
|
||||
<button type="button" class="btn btn-secondary o_hidden o_mail_discuss_button_unselect_all" title="Unselect all messages to moderate">Unselect All</button>
|
||||
|
||||
@@ -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) {
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user