[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:
Alexandre Kühn
2018-10-01 18:19:48 +02:00
parent 05971d0050
commit e8a071a744
3 changed files with 43 additions and 10 deletions
+8 -4
View File
@@ -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) {
+1 -1
View File
@@ -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) {
});
});
});