Commit 2fa83049 authored by JC Brand's avatar JC Brand

Improve and update roster markup

parent e6fdcc61
...@@ -6106,21 +6106,17 @@ body.reset { ...@@ -6106,21 +6106,17 @@ body.reset {
overflow-y: hidden; overflow-y: hidden;
text-shadow: 0 1px 0 #FAFAFA; text-shadow: 0 1px 0 #FAFAFA;
line-height: 14px; line-height: 14px;
height: 30px; width: 100%;
width: 100%; } margin-top: 0.5em; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a.fa { #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a.fa {
width: 2em; } width: 1.5em; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .req-contact-name { #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .req-contact-name {
width: 69%; padding: 0 0.2em 0 0; }
padding: 0; }
#conversejs #converse-roster .roster-contacts .roster-group li a:hover { #conversejs #converse-roster .roster-contacts .roster-group li a:hover {
color: #206485; } color: #206485; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat { #conversejs #converse-roster .roster-contacts .roster-group li .open-chat {
margin: auto; margin: 0;
margin-top: 0.5em; padding: 0; }
margin-bottom: 0;
padding: 0;
width: 85%; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat.unread-msgs { #conversejs #converse-roster .roster-contacts .roster-group li .open-chat.unread-msgs {
font-weight: bold; } font-weight: bold; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat.unread-msgs .contact-name { #conversejs #converse-roster .roster-contacts .roster-group li .open-chat.unread-msgs .contact-name {
...@@ -6175,7 +6171,6 @@ body.reset { ...@@ -6175,7 +6171,6 @@ body.reset {
#conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:hover { #conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:hover {
color: #818479; } color: #818479; }
#conversejs #converse-roster span.pending-contact-name { #conversejs #converse-roster span.pending-contact-name {
margin-top: 0.5em;
line-height: 16px; line-height: 16px;
width: 100%; } width: 100%; }
......
...@@ -6232,21 +6232,17 @@ body { ...@@ -6232,21 +6232,17 @@ body {
overflow-y: hidden; overflow-y: hidden;
text-shadow: 0 1px 0 #FAFAFA; text-shadow: 0 1px 0 #FAFAFA;
line-height: 16px; line-height: 16px;
height: 30px; width: 100%;
width: 100%; } margin-top: 0.5em; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a.fa { #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a.fa {
width: 2em; } width: 1.5em; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .req-contact-name { #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .req-contact-name {
width: 69%; padding: 0 0.2em 0 0; }
padding: 0; }
#conversejs #converse-roster .roster-contacts .roster-group li a:hover { #conversejs #converse-roster .roster-contacts .roster-group li a:hover {
color: #206485; } color: #206485; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat { #conversejs #converse-roster .roster-contacts .roster-group li .open-chat {
margin: auto; margin: 0;
margin-top: 0.5em; padding: 0; }
margin-bottom: 0;
padding: 0;
width: 85%; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat.unread-msgs { #conversejs #converse-roster .roster-contacts .roster-group li .open-chat.unread-msgs {
font-weight: bold; } font-weight: bold; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat.unread-msgs .contact-name { #conversejs #converse-roster .roster-contacts .roster-group li .open-chat.unread-msgs .contact-name {
...@@ -6301,7 +6297,6 @@ body { ...@@ -6301,7 +6297,6 @@ body {
#conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:hover { #conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:hover {
color: #818479; } color: #818479; }
#conversejs #converse-roster span.pending-contact-name { #conversejs #converse-roster span.pending-contact-name {
margin-top: 0.5em;
line-height: 22px; line-height: 22px;
width: 100%; } width: 100%; }
......
...@@ -22,19 +22,19 @@ ...@@ -22,19 +22,19 @@
<div class="rooms-list"> <div class="rooms-list">
<div class="available-chatroom d-flex flex-row"> <div class="available-chatroom d-flex flex-row">
<a class="open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="#">public</a> <a class="open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="#">public</a>
<a href="#" class="room-info fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info" <a href="#" class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
data-html="true" data-content="<b>Room Address (JID): </b><br>public@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a> data-html="true" data-content="<b>Room Address (JID): </b><br>public@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
<a href="#" class="fa fa-bookmark align-self-center" title="Click to bookmark this room">&nbsp;</a> <a href="#" class="fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
<a href="#" class="fa fa-times align-self-center" title="Click to leave this room">&nbsp;</a> <a href="#" class="fa fa-times" title="Click to leave this room">&nbsp;</a>
</div> </div>
<div class="available-chatroom d-flex flex-row"> <div class="available-chatroom d-flex flex-row">
<a class="open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="#">team</a> <a class="open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="#">team</a>
<a href="#" class="room-info fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info" <a href="#" class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
data-html="true" data-content="<b>Room Address (JID): </b><br>team@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a> data-html="true" data-content="<b>Room Address (JID): </b><br>team@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
</div> </div>
<div class="available-chatroom d-flex flex-row"> <div class="available-chatroom d-flex flex-row">
<a class="open-room available-room w-100" data-room-jid="test@conference.test.com" title="Click to open this room" href="#">test</a> <a class="open-room available-room w-100" data-room-jid="test@conference.test.com" title="Click to open this room" href="#">test</a>
<a href="#" class="room-info fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info" <a href="#" class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
data-html="true" data-content="<b>Room Address (JID): </b><br>test@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a> data-html="true" data-content="<b>Room Address (JID): </b><br>test@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
</div> </div>
</div> </div>
...@@ -64,13 +64,13 @@ ...@@ -64,13 +64,13 @@
<ul class="roster-group-contacts"> <ul class="roster-group-contacts">
<li class="offline requesting-xmpp-contact d-flex"> <li class="offline requesting-xmpp-contact d-flex">
<span class="req-contact-name w-100">Bob Skinstad</span> <span class="req-contact-name w-100">Bob Skinstad</span>
<a class="accept-xmpp-request fa fa-check align-self-center" title="Click here to accept this contact's request" href="#"></a> <a class="accept-xmpp-request fa fa-check" title="Click here to accept this contact's request" href="#"></a>
<a class="decline-xmpp-request fa fa-times align-self-center" title="Click here to decline this contact's request" href="#"></a> <a class="decline-xmpp-request fa fa-times" title="Click here to decline this contact's request" href="#"></a>
</li> </li>
<li class="offline requesting-xmpp-contact d-flex"> <li class="offline requesting-xmpp-contact d-flex">
<span class="req-contact-name w-100">André Vos</span> <span class="req-contact-name w-100">André Vos</span>
<a class="accept-xmpp-request fa fa-check align-self-center" title="Click here to accept this contact's request" href="#"></a> <a class="accept-xmpp-request fa fa-check" title="Click here to accept this contact's request" href="#"></a>
<a class="decline-xmpp-request fa fa-times align-self-center" title="Click here to decline this contact's request" href="#"></a> <a class="decline-xmpp-request fa fa-times" title="Click here to decline this contact's request" href="#"></a>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -83,17 +83,17 @@ ...@@ -83,17 +83,17 @@
<li class="online current-xmpp-contact d-flex"> <li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#"> <a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-circle" title="This contact is online"></span> Victor Matfield</a> <span class="fa fa-circle" title="This contact is online"></span> Victor Matfield</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li> </li>
<li class="away current-xmpp-contact d-flex"> <li class="away current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#"> <a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-circle-o" title="this contact is away"></span> William Winterbottom</a> <span class="fa fa-circle-o" title="this contact is away"></span> William Winterbottom</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li> </li>
<li class="dnd current-xmpp-contact d-flex"> <li class="dnd current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#"> <a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-minus-circle" title="This contact is busy"></span> Gary Teichmann</a> <span class="fa fa-minus-circle" title="This contact is busy"></span> Gary Teichmann</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li> </li>
</li> </li>
</div> </div>
...@@ -105,12 +105,12 @@ ...@@ -105,12 +105,12 @@
<li class="away current-xmpp-contact d-flex"> <li class="away current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#"> <a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-circle-o" title="this contact is away"></span> Allan Donald</a> <span class="fa fa-circle-o" title="this contact is away"></span> Allan Donald</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li> </li>
<li class="offline current-xmpp-contact d-flex"> <li class="offline current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#"> <a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-times-circle" title="This contact is offline"></span> Corné Krige</a> <span class="fa fa-times-circle" title="This contact is offline"></span> Corné Krige</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -122,12 +122,12 @@ ...@@ -122,12 +122,12 @@
<li class="online current-xmpp-contact d-flex"> <li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#"> <a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-circle" title="This contact is online"></span> John Smit</a> <span class="fa fa-circle" title="This contact is online"></span> John Smit</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li> </li>
<li class="online current-xmpp-contact d-flex"> <li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#"> <a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-circle" title="This contact is online"></span> Bakkies Botha</a> <span class="fa fa-circle" title="This contact is online"></span> Bakkies Botha</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -139,7 +139,7 @@ ...@@ -139,7 +139,7 @@
<li class="online current-xmpp-contact d-flex"> <li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#"> <a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-circle" title="This contact is online"></span> James Small</a> <span class="fa fa-circle" title="This contact is online"></span> James Small</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -150,11 +150,11 @@ ...@@ -150,11 +150,11 @@
<ul> <ul>
<li class="offline pending-xmpp-contact d-flex"> <li class="offline pending-xmpp-contact d-flex">
<span class="pending-contact-name w-100">Rassie Erasmus</span> <span class="pending-contact-name w-100">Rassie Erasmus</span>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li> </li>
<li class="offline pending-xmpp-contact d-flex"> <li class="offline pending-xmpp-contact d-flex">
<span class="pending-contact-name w-100">Victor Matfield</span> <span class="pending-contact-name w-100">Victor Matfield</span>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li> </li>
</ul> </ul>
</div> </div>
......
@font-face { @font-face {
font-family: 'Converse-js'; font-family: 'Converse-js';
src: url($font-path + 'icomoon.eot?wvi0ht'); src: url($font-path + 'icomoon.eot?wvi0ht');
src: url($font-path + 'icomoon.eot?wvi0ht#iefix') format('embedded-opentype'), src: url($font-path + 'icomoon.eot?wvi0ht#iefix') format('embedded-opentype'),
url($font-path + 'icomoon.ttf?wvi0ht') format('truetype'), url($font-path + 'icomoon.ttf?wvi0ht') format('truetype'),
url($font-path + 'icomoon.woff?wvi0ht') format('woff'), url($font-path + 'icomoon.woff?wvi0ht') format('woff'),
url($font-path + 'icomoon.svg?wvi0ht#icomoon') format('svg'); url($font-path + 'icomoon.svg?wvi0ht#icomoon') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
......
...@@ -118,16 +118,15 @@ ...@@ -118,16 +118,15 @@
overflow-y: hidden; overflow-y: hidden;
text-shadow: 0 1px 0 $text-shadow-color; text-shadow: 0 1px 0 $text-shadow-color;
line-height: $font-size; line-height: $font-size;
height: 30px;
width: 100%; width: 100%;
margin-top: 0.5em;
&.requesting-xmpp-contact { &.requesting-xmpp-contact {
a.fa { a.fa {
width: 2em; width: 1.5em;
} }
.req-contact-name { .req-contact-name {
width: 69%; padding: 0 0.2em 0 0;
padding: 0;
} }
} }
...@@ -136,11 +135,8 @@ ...@@ -136,11 +135,8 @@
} }
.open-chat { .open-chat {
margin: auto; margin: 0;
margin-top: 0.5em;
margin-bottom: 0;
padding: 0; padding: 0;
width: 85%;
&.unread-msgs { &.unread-msgs {
font-weight: bold; font-weight: bold;
.contact-name { .contact-name {
...@@ -219,7 +215,6 @@ ...@@ -219,7 +215,6 @@
} }
span { span {
&.pending-contact-name { &.pending-contact-name {
margin-top: 0.5em;
line-height: $line-height; line-height: $line-height;
width: 100%; width: 100%;
} }
......
...@@ -356,9 +356,19 @@ ...@@ -356,9 +356,19 @@
}, },
renderRosterItem (item) { renderRosterItem (item) {
let status_icon = 'fa-times-circle';
const chat_status = item.get('chat_status') || 'offline';
if (chat_status === 'online') {
status_icon = 'fa-circle';
} else if (chat_status === 'away' || chat_status === 'dnd') {
status_icon = 'fa-circle-o';
} else if (chat_status === 'busy') {
status_icon = 'fa-minus-circle';
}
this.el.innerHTML = tpl_roster_item( this.el.innerHTML = tpl_roster_item(
_.extend(item.toJSON(), { _.extend(item.toJSON(), {
'desc_status': STATUSES[item.get('chat_status')||'offline'], 'desc_status': STATUSES[chat_status],
'status_icon': status_icon,
'desc_chat': __('Click to chat with %1$s (JID: %2$s)', item.get('fullname'), item.get('jid')), 'desc_chat': __('Click to chat with %1$s (JID: %2$s)', item.get('fullname'), item.get('jid')),
'desc_remove': __('Click to remove %1$s as a contact', item.get('fullname')), 'desc_remove': __('Click to remove %1$s as a contact', item.get('fullname')),
'allow_contact_removal': _converse.allow_contact_removal, 'allow_contact_removal': _converse.allow_contact_removal,
......
{[ if (o.allow_chat_pending_contacts) { ]} {[ if (o.allow_chat_pending_contacts) { ]}
<a class="open-chat"href="#"> <a class="open-chat w-100" href="#">
{[ } ]} {[ } ]}
<span class="pending-contact-name" title="Name: {{{o.fullname}}} <span class="pending-contact-name w-100" title="Name: {{{o.fullname}}} JID: {{{o.jid}}}">{{{o.fullname}}}</span>
JID: {{{o.jid}}}">{{{o.fullname}}}</span> {[ if (o.allow_chat_pending_contacts) { ]}</a>
{[ if (o.allow_chat_pending_contacts) { ]}
</a>
{[ } ]} {[ } ]}
<a class="remove-xmpp-contact icon-remove" title="{{{o.desc_remove}}}" href="#"></a> <a class="remove-xmpp-contact fa fa-trash" title="{{{o.desc_remove}}}" href="#"></a>
{[ if (o.allow_chat_pending_contacts) { ]} {[ if (o.allow_chat_pending_contacts) { ]}
<a class="open-chat"href="#"> <a class="open-chat w-100"href="#">
{[ } ]} {[ } ]}
<span class="req-contact-name w-100" title="Name: {{{o.fullname}}} <span class="req-contact-name w-100" title="Name: {{{o.fullname}}}
JID: {{{o.jid}}}">{{{o.fullname}}}</span> JID: {{{o.jid}}}">{{{o.fullname}}}</span>
{[ if (o.allow_chat_pending_contacts) { ]} {[ if (o.allow_chat_pending_contacts) { ]}
</a> </a>
{[ } ]} {[ } ]}
<a class="accept-xmpp-request fa fa-check align-self-center" <a class="accept-xmpp-request fa fa-check"
aria-label="{{{o.desc_accept}}}" title="{{{o.desc_accept}}}" href="#"></a> aria-label="{{{o.desc_accept}}}" title="{{{o.desc_accept}}}" href="#"></a>
<a class="decline-xmpp-request fa fa-times align-self-center" <a class="decline-xmpp-request fa fa-times"
aria-label="{{{o.desc_decline}}}" title="{{{o.desc_decline}}}" href="#"></a> aria-label="{{{o.desc_decline}}}" title="{{{o.desc_decline}}}" href="#"></a>
<form class="roster-filter-form input-button-group {[ if (!o.visible) { ]} hidden {[ } ]}"> <form class="roster-filter-form input-button-group {[ if (!o.visible) { ]} hidden {[ } ]}">
<div class="form-group form-inline"> <div class="form-group form-inline">
<input value="{{{o.filter_text}}}" <input value="{{{o.filter_text}}}"
class="roster-filter roster-filter-{{{o.filter_type}}}" class="roster-filter form-control roster-filter-{{{o.filter_type}}}"
placeholder="{{{o.placeholder}}}"> placeholder="{{{o.placeholder}}}">
<select class="state-type state-type-{{{o.filter_type}}}"> <select class="state-type state-type-{{{o.filter_type}}}">
......
<a class="open-chat {[ if (o.num_unread) { ]} unread-msgs {[ } ]}" <a class="open-chat w-100 {[ if (o.num_unread) { ]} unread-msgs {[ } ]}"
title="{{{o.desc_chat}}}" title="{{{o.desc_chat}}}" href="#">
href="#"> <span class="fa {{{o.status_icon}}}" title="{{{o.desc_status}}}"></span>
<div class="avatar avatar-{{{o.chat_status}}}">
<span class="status-icon icon-{{{o.chat_status}}}" title="{{{o.desc_status}}}"></span>
</div>
{[ if (o.num_unread) { ]} {[ if (o.num_unread) { ]}
<span class="msgs-indicator">{{{ o.num_unread }}}</span> <span class="msgs-indicator">{{{ o.num_unread }}}</span>
{[ } ]} {[ } ]}
<span class="contact-name {[ if (o.num_unread) { ]} unread-msgs {[ } ]}">{{{o.fullname}}}</span> <span class="contact-name {[ if (o.num_unread) { ]} unread-msgs {[ } ]}">{{{o.fullname}}}</span></a>
</a>
{[ if (o.allow_contact_removal) { ]} {[ if (o.allow_contact_removal) { ]}
<a class="remove-xmpp-contact icon-remove" title="{{{o.desc_remove}}}" href="#"></a> <a class="remove-xmpp-contact fa fa-trash" title="{{{o.desc_remove}}}" href="#"></a>
{[ } ]} {[ } ]}
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