Improve and update roster markup

css/converse.css

@@ -6106,21 +6106,17 @@ body.reset {
         overflow-y: hidden;
         text-shadow: 0 1px 0 #FAFAFA;
         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 {
-          width: 2em; }
+          width: 1.5em; }
         #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .req-contact-name {
-          width: 69%;
-          padding: 0; }
+          padding: 0 0.2em 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;
-          margin-top: 0.5em;
-          margin-bottom: 0;
-          padding: 0;
-          width: 85%; }
+          margin: 0;
+          padding: 0; }
           #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 {
@@ -6175,7 +6171,6 @@ body.reset {
           #conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:hover {
             color: #818479; }
   #conversejs #converse-roster span.pending-contact-name {
-    margin-top: 0.5em;
     line-height: 16px;
     width: 100%; }
 

css/inverse.css

@@ -6232,21 +6232,17 @@ body {
         overflow-y: hidden;
         text-shadow: 0 1px 0 #FAFAFA;
         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 {
-          width: 2em; }
+          width: 1.5em; }
         #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .req-contact-name {
-          width: 69%;
-          padding: 0; }
+          padding: 0 0.2em 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;
-          margin-top: 0.5em;
-          margin-bottom: 0;
-          padding: 0;
-          width: 85%; }
+          margin: 0;
+          padding: 0; }
           #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 {
@@ -6301,7 +6297,6 @@ body {
           #conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:hover {
             color: #818479; }
   #conversejs #converse-roster span.pending-contact-name {
-    margin-top: 0.5em;
     line-height: 22px;
     width: 100%; }
 

mockup/user-panel.html

@@ -22,19 +22,19 @@
         <div class="rooms-list">
             <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 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>
-                <a href="#" class="fa fa-bookmark align-self-center" 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-bookmark" title="Click to bookmark this room">&nbsp;</a>
+                <a href="#" class="fa fa-times" title="Click to leave this room">&nbsp;</a>
             </div>
             <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 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>
             </div>
             <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 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>
             </div>
         </div>
@@ -64,13 +64,13 @@
             <ul class="roster-group-contacts">
                 <li class="offline requesting-xmpp-contact d-flex">
                     <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="decline-xmpp-request fa fa-times align-self-center" title="Click here to decline 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" title="Click here to decline this contact's request" href="#"></a>
                 </li>
                 <li class="offline requesting-xmpp-contact d-flex">
                     <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="decline-xmpp-request fa fa-times align-self-center" title="Click here to decline 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" title="Click here to decline this contact's request" href="#"></a>
                 </li>
             </ul>
         </div>
@@ -83,17 +83,17 @@
                 <li class="online current-xmpp-contact d-flex">
                     <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>
-                    <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 class="away current-xmpp-contact d-flex">
                     <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>
-                    <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 class="dnd current-xmpp-contact d-flex">
                     <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>
-                    <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>
         </div>
@@ -105,12 +105,12 @@
                 <li class="away current-xmpp-contact d-flex">
                     <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>
-                    <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 class="offline current-xmpp-contact d-flex">
                     <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>
-                    <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>
             </ul>
         </div>
@@ -122,12 +122,12 @@
                 <li class="online current-xmpp-contact d-flex">
                     <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>
-                    <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 class="online current-xmpp-contact d-flex">
                     <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>
-                    <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>
             </ul>
         </div>
@@ -139,7 +139,7 @@
                 <li class="online current-xmpp-contact d-flex">
                     <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>
-                    <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>
             </ul>
         </div>
@@ -150,11 +150,11 @@
             <ul>
                 <li class="offline pending-xmpp-contact d-flex">
                     <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 class="offline pending-xmpp-contact d-flex">
                     <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>
             </ul>
         </div>

sass/_fonts.scss

@@ -1,10 +1,10 @@
 @font-face {
     font-family: 'Converse-js';
     src: url($font-path + 'icomoon.eot?wvi0ht');
-    src:  url($font-path + 'icomoon.eot?wvi0ht#iefix') format('embedded-opentype'),
-          url($font-path + 'icomoon.ttf?wvi0ht') format('truetype'),
-          url($font-path + 'icomoon.woff?wvi0ht') format('woff'),
-          url($font-path + 'icomoon.svg?wvi0ht#icomoon') format('svg');
+    src: url($font-path + 'icomoon.eot?wvi0ht#iefix') format('embedded-opentype'),
+         url($font-path + 'icomoon.ttf?wvi0ht') format('truetype'),
+         url($font-path + 'icomoon.woff?wvi0ht') format('woff'),
+         url($font-path + 'icomoon.svg?wvi0ht#icomoon') format('svg');
     font-weight: normal;
     font-style: normal;
 }

sass/_roster.scss

@@ -118,16 +118,15 @@
                 overflow-y: hidden;
                 text-shadow: 0 1px 0 $text-shadow-color;
                 line-height: $font-size;
-                height: 30px;
                 width: 100%;
+                margin-top: 0.5em;
 
                 &.requesting-xmpp-contact {
                     a.fa {
-                        width: 2em;
+                        width: 1.5em;
                     }
                     .req-contact-name {
-                        width: 69%;
-                        padding: 0;
+                        padding: 0 0.2em 0 0;
                     }
                 }
 
@@ -136,11 +135,8 @@
                 }
 
                 .open-chat {
-                    margin: auto;
-                    margin-top: 0.5em;
-                    margin-bottom: 0;
+                    margin: 0;
                     padding: 0;
-                    width: 85%;
                     &.unread-msgs {
                         font-weight: bold;
                         .contact-name {
@@ -219,7 +215,6 @@
     }
     span {
         &.pending-contact-name {
-            margin-top: 0.5em;
             line-height: $line-height;
             width: 100%;
         }

src/converse-rosterview.js

@@ -356,9 +356,19 @@
                 },
 
                 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(
                         _.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_remove': __('Click to remove %1$s as a contact', item.get('fullname')),
                             'allow_contact_removal': _converse.allow_contact_removal,

src/templates/pending_contact.html

@@ -1,9 +1,7 @@
 {[ 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}}}
-JID: {{{o.jid}}}">{{{o.fullname}}}</span> 
-{[ if (o.allow_chat_pending_contacts)  { ]}
-</a>
+<span class="pending-contact-name w-100" title="Name: {{{o.fullname}}} JID: {{{o.jid}}}">{{{o.fullname}}}</span> 
+{[ 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>

src/templates/requesting_contact.html

@@ -1,12 +1,12 @@
 {[ 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}}}
 JID: {{{o.jid}}}">{{{o.fullname}}}</span>
 {[ if (o.allow_chat_pending_contacts)  { ]}
 </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>
-<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>

src/templates/roster_filter.html

@@ -1,7 +1,7 @@
 <form class="roster-filter-form input-button-group {[ if (!o.visible) { ]} hidden {[ } ]}">
     <div class="form-group form-inline">
         <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}}}">
 
         <select class="state-type state-type-{{{o.filter_type}}}">

src/templates/roster_item.html

@@ -1,16 +1,10 @@
-<a class="open-chat {[ if (o.num_unread) { ]} unread-msgs {[ } ]}"
-   title="{{{o.desc_chat}}}"
-   href="#">
-    <div class="avatar avatar-{{{o.chat_status}}}">
-        <span class="status-icon icon-{{{o.chat_status}}}" title="{{{o.desc_status}}}"></span>
-    </div>
+<a class="open-chat w-100 {[ if (o.num_unread) { ]} unread-msgs {[ } ]}"
+   title="{{{o.desc_chat}}}" href="#">
+    <span class="fa {{{o.status_icon}}}" title="{{{o.desc_status}}}"></span>
     {[ if (o.num_unread) { ]}
     <span class="msgs-indicator">{{{ o.num_unread }}}</span>
     {[ } ]}
-    <span class="contact-name {[ if (o.num_unread) { ]} unread-msgs {[ } ]}">{{{o.fullname}}}</span>
-</a>
+    <span class="contact-name {[ if (o.num_unread) { ]} unread-msgs {[ } ]}">{{{o.fullname}}}</span></a>
 {[ 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>
 {[ } ]}
-
-