Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Show number of unread messages on the "Rooms" tab

Browse Source
This commit is contained in:
JC Brand 2017-06-05 14:50:29 +02:00
parent 86dc3800aa
commit 5949ca9e36
13 changed files with 120 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
css/converse.css
View File

@ -1905,6 +1905,14 @@
padding: 0 0 5px 5px; }
#conversejs #controlbox form.search-xmpp-contact input {
width: 8em; }
#conversejs #controlbox .msgs-indicator {
background-color: #D24E2B;
color: white;
font-size: 12px;
float: right;
font-weight: normal;
padding: 0 4px;
text-shadow: none; }
#conversejs #controlbox a.subscribe-to-user {
padding-left: 2em;
font-weight: bold; }
@ -2091,6 +2099,8 @@
height: 55px;
cursor: default;
color: #818479; }
#conversejs #controlbox #controlbox-tabs li a .msgs-indicator {
border-top-right-radius: 4px; }
#conversejs #controlbox .fancy-dropdown {
border: 1px solid #B1BFC4;
height: 25px;
@ -2193,14 +2203,8 @@
#conversejs #controlbox .available-chatroom .pulse {
padding: 0;
margin: 0; }
#conversejs #controlbox .available-chatroom.unread-msgs .msgs-indicactor {
background-color: #D24E2B;
color: white;
border-radius: 10%;
font-size: 12px;
font-weight: normal;
padding: 0 4px;
text-shadow: none; }
#conversejs #controlbox .available-chatroom.unread-msgs .msgs-indicator {
border-radius: 10%; }
#conversejs #converse-roster {
text-align: left;
@ -2328,16 +2332,9 @@
opacity: 0; }
#conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .avatar.avatar-online .pulse {
border: 0.7em solid #2A9D8F; }
#conversejs #converse-roster .roster-contacts dd .open-chat .msgs-indicactor {
background-color: #D24E2B;
color: white;
border-radius: 10%;
float: right;
font-size: 11px;
#conversejs #converse-roster .roster-contacts dd .open-chat .msgs-indicator {
margin-left: -3em;
font-weight: normal;
padding: 0 4px;
text-shadow: none; }
border-radius: 10%; }
#conversejs #converse-roster .roster-contacts dd .open-chat .contact-name {
padding: 0;
margin: 0;

10
dev.html
View File

@ -55,11 +55,11 @@
converse.initialize({
auto_away: 300,
i18n: locales['af'],
auto_join_rooms: [
'discuss@conference.conversejs.org',
'prosody@conference.prosody.im',
'jdev@conference.jabber.org'
],
// auto_join_rooms: [
// 'discuss@conference.conversejs.org',
// 'prosody@conference.prosody.im',
// 'jdev@conference.jabber.org'
// ],
notify_all_room_messages: [
'discuss@conference.conversejs.org'
],

14
sass/_controlbox.scss
View File

@ -32,6 +32,17 @@
width: 8em;
}
}
.msgs-indicator {
background-color: $warning-color;
color: white;
font-size: $font-size-small;
float: right;
font-weight: normal;
padding: 0 4px;
text-shadow: none;
}
a.subscribe-to-user {
padding-left: 2em;
font-weight: bold;
@ -288,6 +299,9 @@
cursor: default;
color: $text-color;
}
.msgs-indicator {
border-top-right-radius: $chatbox-border-radius;
}
}
}
}

8
sass/_roomslist.scss
View File

@ -6,14 +6,8 @@
margin: 0;
}
&.unread-msgs {
.msgs-indicactor {
background-color: $warning-color;
color: white;
.msgs-indicator {
border-radius: 10%;
font-size: $font-size-small;
font-weight: normal;
padding: 0 4px;
text-shadow: none;
}
}
}

11
sass/_roster.scss
View File

@ -154,16 +154,9 @@
}
}
.msgs-indicactor {
background-color: $warning-color;
color: white;
border-radius: 10%;
float: right;
font-size: 11px;
.msgs-indicator {
margin-left: -3em;
font-weight: normal;
padding: 0 4px;
text-shadow: none;
border-radius: 10%;
}
.contact-name {

10
spec/chatbox.js
View File

@ -1995,7 +1995,7 @@
var msg = test_utils.createChatMessage(_converse, sender_jid, 'This message will be unread');
_converse.chatboxes.onMessage(msg);
var msgIndicatorSelector = 'a.open-chat:contains("' + chatbox.get('fullname') + '") .msgs-indicactor',
var msgIndicatorSelector = 'a.open-chat:contains("' + chatbox.get('fullname') + '") .msgs-indicator',
$msgIndicator = $(_converse.rosterview.$el.find(msgIndicatorSelector));
expect($msgIndicator.text()).toBe('1');
@ -2026,7 +2026,7 @@
var msg = test_utils.createChatMessage(_converse, sender_jid, 'This message will be unread');
_converse.chatboxes.onMessage(msg);
var msgIndicatorSelector = 'a.open-chat:contains("' + chatbox.get('fullname') + '") .msgs-indicactor',
var msgIndicatorSelector = 'a.open-chat:contains("' + chatbox.get('fullname') + '") .msgs-indicator',
$msgIndicator = $(_converse.rosterview.$el.find(msgIndicatorSelector));
expect($msgIndicator.text()).toBe('1');
@ -2052,7 +2052,7 @@
test_utils.openChatBoxFor(_converse, sender_jid);
var chatbox = _converse.chatboxes.get(sender_jid);
var chatboxview = _converse.chatboxviews.get(sender_jid);
var msgsIndicatorSelector = 'a.open-chat:contains("' + chatbox.get('fullname') + '") .msgs-indicactor';
var msgsIndicatorSelector = 'a.open-chat:contains("' + chatbox.get('fullname') + '") .msgs-indicator';
var selectMsgsIndicator = function () { return $(_converse.rosterview.$el.find(msgsIndicatorSelector)); };
var msgFactory = function () {
return test_utils.createChatMessage(_converse, sender_jid, 'This message will be received as unread, but eventually will be read');
@ -2087,7 +2087,7 @@
var msgFactory = function () {
return test_utils.createChatMessage(_converse, sender_jid, 'This message will be received as unread, but eventually will be read');
};
var msgsIndicatorSelector = 'a.open-chat:contains("' + chatbox.get('fullname') + '") .msgs-indicactor',
var msgsIndicatorSelector = 'a.open-chat:contains("' + chatbox.get('fullname') + '") .msgs-indicator',
selectMsgsIndicator = function () { return $(_converse.rosterview.$el.find(msgsIndicatorSelector)); };
chatbox.save('scrolled', true);
@ -2117,7 +2117,7 @@
var msgFactory = function () {
return test_utils.createChatMessage(_converse, sender_jid, 'This message will be received as unread, but eventually will be read');
};
var msgsIndicatorSelector = 'a.open-chat:contains("' + chatbox.get('fullname') + '") .msgs-indicactor',
var msgsIndicatorSelector = 'a.open-chat:contains("' + chatbox.get('fullname') + '") .msgs-indicator',
selectMsgsIndicator = function () { return $(_converse.rosterview.$el.find(msgsIndicatorSelector)); };
chatbox.save('scrolled', true);

39
spec/chatroom.js
View File

@ -2061,5 +2061,44 @@
expect(delta.length).toBe(0);
}));
});
describe("The \"Rooms\" Panel", function () {
it("shows the number of unread mentions received", mock.initConverse(function (_converse) {
var room_jid = 'kitchen@conference.shakespeare.lit';
test_utils.openAndEnterChatRoom(
_converse, 'kitchen', 'conference.shakespeare.lit', 'fires');
test_utils.openContactsPanel(_converse);
var roomspanel = _converse.chatboxviews.get('controlbox').roomspanel;
var view = _converse.chatboxviews.get(room_jid);
view.model.set({'minimized': true});
var contact_jid = mock.cur_names[5].replace(/ /g,'.').toLowerCase() + '@localhost';
var message = 'fires: Your attention is required';
var nick = mock.chatroom_names[0],
msg = $msg({
from: room_jid+'/'+nick,
id: (new Date()).getTime(),
to: 'dummy@localhost',
type: 'groupchat'
}).c('body').t(message).tree();
view.handleMUCMessage(msg);
expect(_.includes(roomspanel.tab_el.firstChild.classList, 'unread-msgs')).toBeTruthy();
expect(roomspanel.tab_el.querySelector('.msgs-indicator').textContent).toBe('1');
msg = $msg({
from: room_jid+'/'+nick,
id: (new Date()).getTime(),
to: 'dummy@localhost',
type: 'groupchat'
}).c('body').t(message).tree();
view.handleMUCMessage(msg);
expect(roomspanel.tab_el.querySelector('.msgs-indicator').textContent).toBe('2');
view.model.set({'minimized': false});
expect(_.includes(roomspanel.tab_el.firstChild.classList, 'unread-msgs')).toBeFalsy();
}));
});
});
}));

2
spec/controlbox.js
View File

@ -1172,7 +1172,7 @@
it("can list rooms publically available on the server", mock.initConverse(function (_converse) {
test_utils.openControlBox();
var panel = _converse.chatboxviews.get('controlbox').roomspanel;
panel.$tabs.find('li').last().find('a').click(); // Click the chatrooms tab
$(panel.tabs).find('li').last().find('a').click(); // Click the chatrooms tab
panel.model.set({'muc_domain': 'muc.localhost'}); // Make sure the domain is set
// See: http://xmpp.org/extensions/xep-0045.html#disco-rooms
expect($('#available-chatrooms').children('dt').length).toBe(0);

6
spec/roomslist.js
View File

@ -112,7 +112,7 @@
type: 'groupchat'
}).c('body').t('romeo: Your attention is required').tree()
);
var indicator_el = _converse.rooms_list_view.el.querySelector(".msgs-indicactor");
var indicator_el = _converse.rooms_list_view.el.querySelector(".msgs-indicator");
expect(indicator_el.textContent).toBe('1');
view.handleMUCMessage(
@ -123,12 +123,12 @@
type: 'groupchat'
}).c('body').t('romeo: and another thing...').tree()
);
indicator_el = _converse.rooms_list_view.el.querySelector(".msgs-indicactor");
indicator_el = _converse.rooms_list_view.el.querySelector(".msgs-indicator");
expect(indicator_el.textContent).toBe('2');
// When the chat gets maximized again, the unread indicators are removed
view.model.set({'minimized': false});
indicator_el = _converse.rooms_list_view.el.querySelector(".msgs-indicactor");
indicator_el = _converse.rooms_list_view.el.querySelector(".msgs-indicator");
expect(_.isNull(indicator_el));
room_el = _converse.rooms_list_view.el.querySelector(".available-chatroom");
expect(_.includes(room_el.classList, 'unread-msgs')).toBeFalsy();

48
src/converse-muc.js
View File

@ -164,7 +164,7 @@
b64_sha1('converse.roomspanel'+_converse.bare_jid))
}))()
});
this.roomspanel.render().model.fetch();
this.roomspanel.insertIntoDOM().model.fetch();
if (!this.roomspanel.model.get('nick')) {
this.roomspanel.model.save({
nick: Strophe.getNodeFromJid(_converse.bare_jid)
@ -2375,37 +2375,43 @@
},
initialize: function (cfg) {
this.$parent = cfg.$parent;
this.parent_el = cfg.$parent[0];
this.tab_el = document.createElement('li');
this.model.on('change:muc_domain', this.onDomainChange, this);
this.model.on('change:nick', this.onNickChange, this);
_converse.chatboxes.on('change:num_unread', this.render, this);
},
render: function () {
this.$parent.append(
this.$el.html(
tpl_room_panel({
'server_input_type': _converse.hide_muc_server && 'hidden' || 'text',
'server_label_global_attr': _converse.hide_muc_server && ' hidden' || '',
'label_room_name': __('Room name'),
'label_nickname': __('Nickname'),
'label_server': __('Server'),
'label_join': __('Join Room'),
'label_show_rooms': __('Show rooms')
})
));
this.$tabs = this.$parent.parent().find('#controlbox-tabs');
this.el.innerHTML = tpl_room_panel({
'server_input_type': _converse.hide_muc_server && 'hidden' || 'text',
'server_label_global_attr': _converse.hide_muc_server && ' hidden' || '',
'label_room_name': __('Room name'),
'label_nickname': __('Nickname'),
'label_server': __('Server'),
'label_join': __('Join Room'),
'label_show_rooms': __('Show rooms')
});
var controlbox = _converse.chatboxes.get('controlbox');
this.$tabs.append(tpl_chatrooms_tab({
var is_current = controlbox.get('active-panel') === ROOMS_PANEL_ID;
this.tab_el.innerHTML = tpl_chatrooms_tab({
'label_rooms': __('Rooms'),
'is_current': controlbox.get('active-panel') === ROOMS_PANEL_ID
}));
if (controlbox.get('active-panel') !== ROOMS_PANEL_ID) {
this.$el.addClass('hidden');
'is_current': is_current,
'num_unread': _.sum(_converse.chatboxes.pluck('num_unread'))
});
if (!is_current) {
this.el.classList.add('hidden');
}
return this;
},
insertIntoDOM: function () {
this.parent_el.appendChild(this.render().el);
this.tabs = this.parent_el.parentNode.querySelector('#controlbox-tabs');
this.tabs.appendChild(this.tab_el);
return this;
},
onDomainChange: function (model) {
var $server = this.$el.find('input.new-chatroom-server');
$server.val(model.get('muc_domain'));

9
src/templates/chatrooms_tab.html
View File

@ -1,4 +1,9 @@
<li><a class="s {[ if (is_current) { ]} current {[ } ]}"
<a class="s
{[ if (is_current) { ]} current {[ } ]}
{[ if (num_unread) { ]} unread-msgs {[ } ]}"
data-id="chatrooms" href="#chatrooms">
{{label_rooms}}
</a></li>
{[ if (num_unread) { ]}
<span class="msgs-indicator">{{{ num_unread }}}</span>
{[ } ]}
</a>

2
src/templates/rooms_list_item.html
View File

@ -1,6 +1,6 @@
<dd class="available-chatroom {[ if (num_unread_general) { ]} unread-msgs {[ } ]}" data-room-jid="{{{jid}}}">
{[ if (num_unread) { ]}
<span class="msgs-indicactor">{{{ num_unread }}}</span>
<span class="msgs-indicator">{{{ num_unread }}}</span>
{[ } ]}
<a class="open-room" data-room-jid="{{{jid}}}" title="{{{open_title}}}" href="#">{{{name}}}</a>
<a class="right close-room icon-remove"

2
src/templates/roster_item.html
View File

@ -9,7 +9,7 @@
</div>
<span class="contact-name unread-msgs">{{{fullname}}}</span>
{[ if (num_unread) { ]}
<span class="msgs-indicactor">{{{ num_unread }}}</span>
<span class="msgs-indicator">{{{ num_unread }}}</span>
{[ } ]}
</a>
{[ if (allow_contact_removal) { ]}