Update requesting contacts and tweak bookmark icons

css/converse.css

@@ -6108,17 +6108,8 @@ body.reset {
         line-height: 14px;
         height: 30px;
         width: 100%; }
-        #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a {
+        #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a.fa {
           width: 2em; }
-        #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact :not(.open-chat) {
-          margin-top: 0.5em; }
-        #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 {
           width: 69%;
           padding: 0; }

css/inverse.css

@@ -6234,17 +6234,8 @@ body {
         line-height: 16px;
         height: 30px;
         width: 100%; }
-        #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a {
+        #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a.fa {
           width: 2em; }
-        #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact :not(.open-chat) {
-          margin-top: 0.5em; }
-        #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 {
           width: 69%;
           padding: 0; }

mockup/user-panel.html

@@ -24,7 +24,7 @@
                 <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"
                     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-o align-self-center" title="Click to bookmark this room">&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>
             </div>
             <div class="available-chatroom d-flex flex-row">
@@ -61,7 +61,7 @@
         <div class="roster-group" id="xmpp-contact-requests">
             <a href="#" class="group-toggle" title="Click to hide these contacts">
                 <span class="fa fa-caret-down"></span> Contact Requests</a>
-            <ul>
+            <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>

sass/_roster.scss

@@ -122,22 +122,9 @@
                 width: 100%;
 
                 &.requesting-xmpp-contact {
-                    a {
+                    a.fa {
                         width: 2em;
                     }
-                    :not(.open-chat) {
-                        margin-top: 0.5em;
-                    }
-                    .request-actions {
-                        padding: 0 0 0 0.3em;
-                        float: right;
-                    }
-                    .open-chat {
-                        max-width: 70%;
-                        .req-contact-name {
-                            width: 100%;
-                        }
-                    }
                     .req-contact-name {
                         width: 69%;
                         padding: 0;

src/converse-rosterview.js

@@ -275,7 +275,7 @@
 
             _converse.RosterContactView = Backbone.NativeView.extend({
                 tagName: 'li',
-                className: 'hidden',
+                className: 'd-flex hidden',
 
                 events: {
                     "click .accept-xmpp-request": "acceptRequest",

src/templates/bookmark.html

 <div class="available-chatroom d-flex flex-row {[ if (o.hidden) { ]} hidden {[ } ]}" data-room-jid="{{{o.jid}}}">
     <a class="open-room w-100" data-room-jid="{{{o.jid}}}" title="{{{o.open_title}}}" href="#">{{{o.name}}}</a>
-    <a class="remove-bookmark fa fa-bookmark-o align-self-center {[ if (o.bookmarked) { ]} button-on {[ } ]}"
+    <a class="remove-bookmark fa fa-bookmark align-self-center {[ if (o.bookmarked) { ]} button-on {[ } ]}"
        data-room-jid="{{{o.jid}}}" data-bookmark-name="{{{o.name}}}"
        title="{{{o.info_remove_bookmark}}}" href="#">&nbsp;</a>
     <a class="room-info fa fa-info-circle align-self-center" data-room-jid="{{{o.jid}}}"

src/templates/requesting_contact.html

 {[ if (o.allow_chat_pending_contacts)  { ]}
 <a class="open-chat"href="#">
 {[ } ]}
-<span class="req-contact-name" title="Name: {{{o.fullname}}}
+<span class="req-contact-name w-100" title="Name: {{{o.fullname}}}
 JID: {{{o.jid}}}">{{{o.fullname}}}</span>
 {[ if (o.allow_chat_pending_contacts)  { ]}
 </a>
 {[ } ]}
-<span class="request-actions">
-    <a class="accept-xmpp-request icon-checkmark" aria-label="{{{o.desc_accept}}}" title="{{{o.desc_accept}}}" href="#"></a>
-    <a class="decline-xmpp-request icon-close" aria-label="{{{o.desc_decline}}}" title="{{{o.desc_decline}}}" href="#"></a>
-</span>
+<a class="accept-xmpp-request fa fa-check align-self-center"
+   aria-label="{{{o.desc_accept}}}" title="{{{o.desc_accept}}}" href="#"></a>
+<a class="decline-xmpp-request fa fa-times align-self-center"
+   aria-label="{{{o.desc_decline}}}" title="{{{o.desc_decline}}}" href="#"></a>

src/templates/rooms_list_item.html

@@ -12,7 +12,7 @@
    title="{{{o.info_leave_room}}}" href="#">&nbsp;</a>
 
 {[ if (o.allow_bookmarks) { ]}
-<a class="fa fa-bookmark-o align-self-center {[ if (o.bookmarked) { ]} remove-bookmark button-on {[ } else { ]} add-bookmark {[ } ]}"
+<a class="fa align-self-center {[ if (o.bookmarked) { ]} fa-bookmark remove-bookmark button-on {[ } else { ]} add-bookmark fa-bookmark-o {[ } ]}"
    data-room-jid="{{{o.jid}}}" data-bookmark-name="{{{o.name}}}"
    title="{[ if (o.bookmarked) { ]} {{{o.info_remove_bookmark}}} {[ } else { ]} {{{o.info_add_bookmark}}} {[ } ]}"
    href="#">&nbsp;</a>