Commit 6c6ef1f1 authored by JC Brand's avatar JC Brand

Refactoring of the roster view.

* Removed the dependency on jQuery
* Contacts are now shown inside a group element, simplifying the code
parent a0ba9724
......@@ -18,7 +18,7 @@
"lodash/prefer-lodash-method": [2, {
"ignoreMethods": [
"find", "endsWith", "startsWith", "filter", "reduce",
"map", "replace", "toLower", "split", "trim", "forEach", "toUpperCase"
"map", "replace", "toLower", "split", "trim", "forEach", "toUpperCase", "includes"
]
}],
"lodash/prefer-startswith": "off",
......
......@@ -1203,8 +1203,9 @@
display: none; }
#converse-embedded-chat .collapsed,
#conversejs .collapsed {
height: 0;
overflow: hidden; }
height: 0 !important;
overflow: hidden !important;
padding: 0 !important; }
#converse-embedded-chat .locked,
#conversejs .locked {
padding-right: 22px; }
......@@ -2374,103 +2375,101 @@
margin: 0;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
display: none; }
#conversejs #converse-roster .roster-contacts dt.roster-group {
overflow-y: auto; }
#conversejs #converse-roster .roster-contacts .roster-group {
border: none;
color: #777;
display: none;
font-weight: normal;
margin: 1em 0 0.5em 0;
text-shadow: 0 1px 0 #FAFAFA; }
#conversejs #converse-roster .roster-contacts dt.roster-group .group-toggle {
#conversejs #converse-roster .roster-contacts .roster-group .group-toggle {
color: #777;
display: block;
width: 100%; }
#conversejs #converse-roster .roster-contacts dt.roster-group .group-toggle:hover {
width: 100%;
margin: 0.5em 0; }
#conversejs #converse-roster .roster-contacts .roster-group .group-toggle:hover {
color: #585B51; }
#conversejs #converse-roster .roster-contacts dd {
border: none;
clear: both;
color: #777;
display: block;
height: 24px;
overflow-y: hidden;
text-shadow: 0 1px 0 #FAFAFA;
line-height: 14px;
width: 100%;
height: 30px;
margin: 0;
padding: 0.5em 0 0 0; }
#conversejs #converse-roster .roster-contacts dd a:hover {
color: #206485; }
#conversejs #converse-roster .roster-contacts dd .open-chat {
margin: auto;
padding: 0;
width: 85%; }
#conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs {
font-weight: bold; }
#conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .contact-name {
width: 70%; }
#conversejs #converse-roster .roster-contacts dd .open-chat .msgs-indicator {
background-color: #3AA569;
opacity: 1;
border-radius: 10%;
padding: 0 0.2em;
font-size: 12px; }
#conversejs #converse-roster .roster-contacts dd .open-chat .contact-name {
#conversejs #converse-roster .roster-contacts .roster-group li {
border: none;
clear: both;
color: #777;
display: block;
height: 24px;
overflow-y: hidden;
text-shadow: 0 1px 0 #FAFAFA;
line-height: 14px;
width: 100%;
height: 30px;
margin: 0;
padding: 0.5em 0 0 0; }
#conversejs #converse-roster .roster-contacts .roster-group li a:hover {
color: #206485; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat {
margin: auto;
padding: 0;
width: 85%; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat.unread-msgs {
font-weight: bold; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat.unread-msgs .contact-name {
width: 70%; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat .msgs-indicator {
background-color: #3AA569;
opacity: 1;
border-radius: 10%;
padding: 0 0.2em;
font-size: 12px; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat .contact-name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0;
margin: 0;
max-width: 80%;
float: none;
height: 60px; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat .contact-name.unread-msgs {
max-width: 60%; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat .avatar {
float: left;
display: inline-block;
height: 60px; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .request-actions {
padding: 0 0 0 0.3em;
float: right; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .open-chat {
max-width: 70%; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .open-chat .req-contact-name {
width: 100%; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .req-contact-name {
line-height: 16px;
width: 69%;
padding: 0; }
#conversejs #converse-roster .roster-contacts .roster-group li.current-xmpp-contact span {
font-size: 14px;
float: left;
margin-right: 0.5em; }
#conversejs #converse-roster .roster-contacts .roster-group li.odd {
background-color: #DCEAC5;
/* Make this difference */ }
#conversejs #converse-roster .roster-contacts .roster-group li a, #conversejs #converse-roster .roster-contacts .roster-group li span {
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-overflow: ellipsis; }
#conversejs #converse-roster .roster-contacts .roster-group li span {
padding: 0;
height: 100%; }
#conversejs #converse-roster .roster-contacts .roster-group li a.decline-xmpp-request {
margin-left: 5px; }
#conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact {
font-size: 10px;
float: right;
margin: 0;
max-width: 80%;
float: none;
height: 60px; }
#conversejs #converse-roster .roster-contacts dd .open-chat .contact-name.unread-msgs {
max-width: 60%; }
#conversejs #converse-roster .roster-contacts dd .open-chat .avatar {
float: left;
display: inline-block;
height: 60px; }
#conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .request-actions {
padding: 0 0 0 0.3em;
float: right; }
#conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .open-chat {
max-width: 70%; }
#conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .open-chat .req-contact-name {
width: 100%; }
#conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .req-contact-name {
line-height: 16px;
width: 69%;
padding: 0; }
#conversejs #converse-roster .roster-contacts dd.current-xmpp-contact span {
font-size: 14px;
float: left;
margin-right: 0.5em; }
#conversejs #converse-roster .roster-contacts dd.odd {
background-color: #DCEAC5;
/* Make this difference */ }
#conversejs #converse-roster .roster-contacts dd a, #conversejs #converse-roster .roster-contacts dd span {
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; }
#conversejs #converse-roster .roster-contacts dd span {
padding: 0;
height: 100%; }
#conversejs #converse-roster .roster-contacts dd a.decline-xmpp-request {
margin-left: 5px; }
#conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact {
font-size: 10px;
float: right;
margin: 0;
padding: 0;
color: #A8ABA1; }
#conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact:before {
font-size: 14px; }
#conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact:hover {
color: #818479; }
padding: 0;
color: #A8ABA1; }
#conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:before {
font-size: 14px; }
#conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:hover {
color: #818479; }
#conversejs #converse-roster span.pending-contact-name {
line-height: 16px;
width: 100%; }
......
......@@ -1203,8 +1203,9 @@
display: none; }
#converse-embedded-chat .collapsed,
#conversejs .collapsed {
height: 0;
overflow: hidden; }
height: 0 !important;
overflow: hidden !important;
padding: 0 !important; }
#converse-embedded-chat .locked,
#conversejs .locked {
padding-right: 22px; }
......@@ -2533,103 +2534,101 @@ body {
margin: 0;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
display: none; }
#conversejs #converse-roster .roster-contacts dt.roster-group {
overflow-y: auto; }
#conversejs #converse-roster .roster-contacts .roster-group {
border: none;
color: #777;
display: none;
font-weight: normal;
margin: 1em 0 0.5em 0;
text-shadow: 0 1px 0 #FAFAFA; }
#conversejs #converse-roster .roster-contacts dt.roster-group .group-toggle {
#conversejs #converse-roster .roster-contacts .roster-group .group-toggle {
color: #777;
display: block;
width: 100%; }
#conversejs #converse-roster .roster-contacts dt.roster-group .group-toggle:hover {
width: 100%;
margin: 0.5em 0; }
#conversejs #converse-roster .roster-contacts .roster-group .group-toggle:hover {
color: #585B51; }
#conversejs #converse-roster .roster-contacts dd {
border: none;
clear: both;
color: #777;
display: block;
height: 24px;
overflow-y: hidden;
text-shadow: 0 1px 0 #FAFAFA;
line-height: 16px;
width: 100%;
height: 30px;
margin: 0;
padding: 0.5em 0 0 0; }
#conversejs #converse-roster .roster-contacts dd a:hover {
color: #206485; }
#conversejs #converse-roster .roster-contacts dd .open-chat {
margin: auto;
padding: 0;
width: 85%; }
#conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs {
font-weight: bold; }
#conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .contact-name {
width: 70%; }
#conversejs #converse-roster .roster-contacts dd .open-chat .msgs-indicator {
background-color: #3AA569;
opacity: 1;
border-radius: 10%;
padding: 0 0.2em;
font-size: 14px; }
#conversejs #converse-roster .roster-contacts dd .open-chat .contact-name {
#conversejs #converse-roster .roster-contacts .roster-group li {
border: none;
clear: both;
color: #777;
display: block;
height: 24px;
overflow-y: hidden;
text-shadow: 0 1px 0 #FAFAFA;
line-height: 16px;
width: 100%;
height: 30px;
margin: 0;
padding: 0.5em 0 0 0; }
#conversejs #converse-roster .roster-contacts .roster-group li a:hover {
color: #206485; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat {
margin: auto;
padding: 0;
width: 85%; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat.unread-msgs {
font-weight: bold; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat.unread-msgs .contact-name {
width: 70%; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat .msgs-indicator {
background-color: #3AA569;
opacity: 1;
border-radius: 10%;
padding: 0 0.2em;
font-size: 14px; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat .contact-name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0;
margin: 0;
max-width: 80%;
float: none;
height: 30px; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat .contact-name.unread-msgs {
max-width: 60%; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat .avatar {
float: left;
display: inline-block;
height: 30px; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .request-actions {
padding: 0 0 0 0.3em;
float: right; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .open-chat {
max-width: 70%; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .open-chat .req-contact-name {
width: 100%; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .req-contact-name {
line-height: 22px;
width: 69%;
padding: 0; }
#conversejs #converse-roster .roster-contacts .roster-group li.current-xmpp-contact span {
font-size: 16px;
float: left;
margin-right: 0.5em; }
#conversejs #converse-roster .roster-contacts .roster-group li.odd {
background-color: #DCEAC5;
/* Make this difference */ }
#conversejs #converse-roster .roster-contacts .roster-group li a, #conversejs #converse-roster .roster-contacts .roster-group li span {
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-overflow: ellipsis; }
#conversejs #converse-roster .roster-contacts .roster-group li span {
padding: 0;
height: 100%; }
#conversejs #converse-roster .roster-contacts .roster-group li a.decline-xmpp-request {
margin-left: 5px; }
#conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact {
font-size: 10px;
float: right;
margin: 0;
max-width: 80%;
float: none;
height: 30px; }
#conversejs #converse-roster .roster-contacts dd .open-chat .contact-name.unread-msgs {
max-width: 60%; }
#conversejs #converse-roster .roster-contacts dd .open-chat .avatar {
float: left;
display: inline-block;
height: 30px; }
#conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .request-actions {
padding: 0 0 0 0.3em;
float: right; }
#conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .open-chat {
max-width: 70%; }
#conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .open-chat .req-contact-name {
width: 100%; }
#conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .req-contact-name {
line-height: 22px;
width: 69%;
padding: 0; }
#conversejs #converse-roster .roster-contacts dd.current-xmpp-contact span {
font-size: 16px;
float: left;
margin-right: 0.5em; }
#conversejs #converse-roster .roster-contacts dd.odd {
background-color: #DCEAC5;
/* Make this difference */ }
#conversejs #converse-roster .roster-contacts dd a, #conversejs #converse-roster .roster-contacts dd span {
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; }
#conversejs #converse-roster .roster-contacts dd span {
padding: 0;
height: 100%; }
#conversejs #converse-roster .roster-contacts dd a.decline-xmpp-request {
margin-left: 5px; }
#conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact {
font-size: 10px;
float: right;
margin: 0;
padding: 0;
color: #A8ABA1; }
#conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact:before {
font-size: 16px; }
#conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact:hover {
color: #818479; }
padding: 0;
color: #A8ABA1; }
#conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:before {
font-size: 16px; }
#conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:hover {
color: #818479; }
#conversejs #converse-roster span.pending-contact-name {
line-height: 22px;
width: 100%; }
......
......@@ -86,8 +86,9 @@
display: none;
}
.collapsed {
height: 0;
overflow: hidden;
height: 0 !important;
overflow: hidden !important;
padding: 0 !important;
}
.locked {
......
......@@ -83,13 +83,10 @@
height: 100%;
overflow-x: hidden;
overflow-y: auto;
display: none;
dt.roster-group {
.roster-group {
border: none;
color: $text-color;
display: none;
font-weight: normal;
margin: 1em 0 0.5em 0;
text-shadow: 0 1px 0 $text-shadow-color;
.group-toggle {
&:hover {
......@@ -98,116 +95,117 @@
color: $text-color;
display: block;
width: 100%;
margin: 0.5em 0;;
}
}
dd {
border: none;
clear: both;
color: $text-color;
display: block;
height: 24px;
overflow-y: hidden;
text-shadow: 0 1px 0 $text-shadow-color;
line-height: $font-size;
width: 100%;
height: 30px;
margin: 0;
padding: 0.5em 0 0 0;
a:hover {
color: $dark-link-color;
}
li {
border: none;
clear: both;
color: $text-color;
display: block;
height: 24px;
overflow-y: hidden;
text-shadow: 0 1px 0 $text-shadow-color;
line-height: $font-size;
width: 100%;
height: 30px;
margin: 0;
padding: 0.5em 0 0 0;
.open-chat {
margin: auto;
padding: 0;
width: 85%;
&.unread-msgs {
font-weight: bold;
.contact-name {
width: 70%;
}
a:hover {
color: $dark-link-color;
}
.msgs-indicator {
background-color: $chat-head-color;
opacity: 1;
border-radius: 10%;
padding: 0 0.2em;
font-size: $font-size-small;
}
.contact-name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.open-chat {
margin: auto;
padding: 0;
margin: 0;
max-width: 80%;
float: none;
height: $roster-item-height;
width: 85%;
&.unread-msgs {
max-width: 60%;
font-weight: bold;
.contact-name {
width: 70%;
}
}
}
.avatar {
float: left;
display: inline-block;
height: $roster-item-height;
}
}
&.requesting-xmpp-contact {
.request-actions {
padding: 0 0 0 0.3em;
float: right;
.msgs-indicator {
background-color: $chat-head-color;
opacity: 1;
border-radius: 10%;
padding: 0 0.2em;
font-size: $font-size-small;
}
.contact-name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0;
margin: 0;
max-width: 80%;
float: none;
height: $roster-item-height;
&.unread-msgs {
max-width: 60%;
}
}
.avatar {
float: left;
display: inline-block;
height: $roster-item-height;
}
}
.open-chat {
max-width: 70%;
&.requesting-xmpp-contact {
.request-actions {
padding: 0 0 0 0.3em;
float: right;
}
.open-chat {
max-width: 70%;
.req-contact-name {
width: 100%;
}
}
.req-contact-name {
width: 100%;
line-height: $line-height;
width: 69%;
padding: 0;
}
}
.req-contact-name {
line-height: $line-height;
width: 69%;
padding: 0;
&.current-xmpp-contact span {
font-size: $font-size;
float: left;
margin-right: 0.5em;
}
}
&.current-xmpp-contact span {
font-size: $font-size;
float: left;
margin-right: 0.5em;
}
&.odd {
background-color: #DCEAC5;
/* Make this difference */
}
a, span {
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
span {
padding: 0;
height: 100%;
}
a {
&.decline-xmpp-request {
margin-left: 5px;
&.odd {
background-color: #DCEAC5;
/* Make this difference */
}
&.remove-xmpp-contact {
font-size: $font-size-tiny;
float: right;
margin: 0;
a, span {
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
span {
padding: 0;
color: $subdued-color;
&:before {
font-size: $font-size;
height: 100%;
}
a {
&.decline-xmpp-request {
margin-left: 5px;
}
&:hover {
color: $gray-color;
&.remove-xmpp-contact {
font-size: $font-size-tiny;
float: right;
margin: 0;
padding: 0;
color: $subdued-color;
&:before {
font-size: $font-size;
}
&:hover {
color: $gray-color;
}
}
}
}
......
This diff is collapsed.
......@@ -72,7 +72,7 @@
test_utils.createContacts(_converse, 'current');
test_utils.waitUntil(function () {
return _converse.rosterview.$el.find('dt').length;
return _converse.rosterview.$el.find('.roster-group .group-toggle').length;
}, 300)
.then(function () {
test_utils.openAndEnterChatRoom(_converse, 'lounge', 'localhost', 'dummy').then(function () {
......@@ -129,9 +129,10 @@
return deferred.promise();
});
test_utils.openControlBox();
test_utils.createContacts(_converse, 'current');
test_utils.waitUntil(function () {
return _converse.rosterview.$el.find('dt').length;
return _converse.rosterview.$el.find('.roster-group .group-toggle').length;
}, 300).then(function () {
var jid = 'lounge@localhost';
var room = _converse.api.rooms.open(jid);
......@@ -256,7 +257,7 @@
' </query>'+
' </iq>')[0]));
test_utils.waitUntil(function () {
return test_utils.waitUntil(function () {
return sent_IQ.toLocaleString() !==
"<iq to='room@conference.example.org' type='get' xmlns='jabber:client' id='"+IQ_id+
"'><query xmlns='http://jabber.org/protocol/muc#owner'/></iq>";
......
This diff is collapsed.
......@@ -229,15 +229,15 @@
// Check that the user is now properly shown as a pending
// contact in the roster.
var $header = $('a:contains("Pending contacts")');
return test_utils.waitUntil(function () {
return $('a:contains("Pending contacts")').length;
return $('a:contains("Pending contacts")').length && $header.is(":visible");
}, 300);
}).then(function () {
var $header = $('a:contains("Pending contacts")');
expect($header.length).toBe(1);
expect($header.is(":visible")).toBeTruthy();
var $contacts = $header.parent().nextUntil('dt', 'dd');
var $contacts = $header.parent().find('li');
expect($contacts.length).toBe(1);
expect($contacts.is(':visible')).toBeTruthy();
spyOn(contact, "ackSubscribe").and.callThrough();
/* Here we assume the "happy path" that the contact
......@@ -300,7 +300,7 @@
$header = $('a:contains("My contacts")');
expect($header.length).toBe(1);
expect($header.is(":visible")).toBeTruthy();
$contacts = $header.parent().nextUntil('dt', 'dd');
$contacts = $header.parent().find('li');
expect($contacts.length).toBe(1);
// Check that it has the right classes and text
expect($contacts.hasClass('to')).toBeTruthy();
......@@ -488,7 +488,7 @@
}).then(function () {
var $header = $('a:contains("My contacts")');
// remove the first user
$($header.parent().nextUntil('dt', 'dd').find('.remove-xmpp-contact').get(0)).click();
$($header.parent().find('li .remove-xmpp-contact').get(0)).click();
expect(window.confirm).toHaveBeenCalled();
/* Section 8.6 Removing a Roster Item and Cancelling All
......@@ -554,7 +554,7 @@
var $header = $('a:contains("Contact requests")');
expect($header.length).toBe(1);
expect($header.is(":visible")).toBeTruthy();
var $contacts = $header.parent().nextUntil('dt', 'dd');
var $contacts = $header.parent().find('li');
expect($contacts.length).toBe(1);
done();
});
......
......@@ -1109,7 +1109,8 @@
*/
return new Promise((resolve, reject) => {
this.fetch({
add: true,
'add': true,
'silent': true,
success (collection) {
if (collection.length === 0) {
_converse.send_initial_presence = true;
......@@ -1429,6 +1430,7 @@
this.RosterGroup = Backbone.Model.extend({
initialize (attributes) {
this.set(_.assignIn({
description: __('Click to hide these contacts'),
......
This diff is collapsed.
<a href="#" class="group-toggle icon-{{{o.toggle_state}}}" title="{{{o.desc_group_toggle}}}">{{{o.label_group}}}</a>
<ul class="roster-group-contacts {[ if (o.toggle_state === o._converse.CLOSED) { ]} collapsed {[ } ]}"></ul>
<dl class="roster-contacts"></dl>
<div class="roster-contacts"></div>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment