Replace accept/decline buttons with font icons

converse.js

@@ -2841,18 +2841,22 @@
             },
 
             acceptRequest: function (ev) {
+                if (ev && ev.preventDefault) { ev.preventDefault(); }
                 var jid = this.model.get('jid');
                 converse.connection.roster.authorize(jid);
                 converse.connection.roster.add(jid, this.model.get('fullname'), [], function (iq) {
                     converse.connection.roster.subscribe(jid, null, converse.xmppstatus.get('fullname'));
                 });
-                ev.preventDefault();
             },
 
             declineRequest: function (ev) {
-                ev.preventDefault();
-                converse.connection.roster.unauthorize(this.model.get('jid'));
-                this.model.destroy();
+                if (ev && ev.preventDefault) { ev.preventDefault(); }
+                var result = confirm(__("Are you sure you want to decline this contact request?"));
+                if (result === true) {
+                    converse.connection.roster.unauthorize(this.model.get('jid'));
+                    this.model.destroy();
+                }
+                return this;
             },
 
             render: function () {
@@ -2887,8 +2891,8 @@
                     this.$el.addClass('requesting-xmpp-contact');
                     this.$el.html(converse.templates.requesting_contact(
                         _.extend(item.toJSON(), {
-                            'label_accept': __('Accept'),
-                            'label_decline': __('Decline')
+                            'desc_accept': __("Click to accept this contact request"),
+                            'desc_decline': __("Click to decline this contact request"),
                         })
                     ));
                     converse.controlboxtoggle.showControlBox();

css/converse.css

@@ -851,16 +851,14 @@ dl.add-converse-contact {
   background-color: #DCEAC5;
   /* Make this difference */
 }
-#conversejs #converse-roster dd.current-xmpp-contact {
-  clear: both;
-}
 #conversejs #converse-roster dd.current-xmpp-contact span {
   font-size: 16px;
   float: left;
   color: #4f4f4f;
 }
-#conversejs #converse-roster dd.requesting-xmpp-contact button {
+#conversejs .requesting-xmpp-contact .request-actions {
   margin-left: 0.5em;
+  float: right;
 }
 #conversejs #converse-roster dd a,
 #conversejs #converse-roster dd span {
@@ -871,7 +869,7 @@ dl.add-converse-contact {
   text-overflow: ellipsis;
 }
 #conversejs #converse-roster dd span {
-  padding: 2px 5px 0 0;
+  padding: 0 5px 0 0;
 }
 #conversejs #converse-roster {
   overflow-y: auto;
@@ -887,7 +885,6 @@ dl.add-converse-contact {
   text-overflow: ellipsis;
   white-space: nowrap;
   display: inline-block;
-  width: 175px;
 }
 #conversejs dd.available-chatroom a.open-room {
   width: 148px;
@@ -898,21 +895,12 @@ dl.add-converse-contact {
   font-size: 13px;
   color: #666;
   border: none;
-  padding: 0.3em 0em 0em 0.5em;
+  padding: 0.3em 0 0 0.5em;
   text-shadow: 0 1px 0 #fafafa;
 }
 #conversejs #converse-roster dt {
   display: none;
 }
-#conversejs dd.available-chatroom,
-#conversejs #converse-roster dd {
-  font-weight: bold;
-  border: none;
-  display: block;
-  padding: 0 0em 0 0.5em;
-  color: #666;
-  text-shadow: 0 1px 0 #fafafa;
-}
 #conversejs .room-info {
   font-size: 11px;
   font-style: normal;
@@ -949,8 +937,27 @@ dl.add-converse-contact {
   margin-top: 3px;
   font-size: 15px;
 }
+#conversejs dd.available-chatroom,
+#conversejs #converse-roster dd {
+  font-weight: bold;
+  border: none;
+  display: block;
+  padding: 1px 0 0 0.5em;
+  color: #666;
+  text-shadow: 0 1px 0 #fafafa;
+  clear: both;
+}
+#conversejs #converse-roster dd {
+  line-height: 16px;
+}
+#conversejs dd.available-chatroom:hover,
+#conversejs #converse-roster dd:hover {
+  background-color: #eee;
+}
+#conversejs #converse-roster dd a.decline-xmpp-request {
+  margin-left: 5px;
+}
 #conversejs #converse-roster dd a.remove-xmpp-contact {
-  line-height: 21px;
   float: right;
   width: 22px;
   margin: 0;
@@ -961,14 +968,7 @@ dl.add-converse-contact {
   display: inline-block;
 }
 #conversejs #converse-roster a.open-chat {
-  line-height: 21px;
-  width: 85%;
-}
-#conversejs #converse-roster dd:hover a.open-chat {
-  width: 70%;
-}
-#conversejs #converse-roster dd.pending-xmpp-contact:hover span {
-  width: 70%;
+  width: 80%;
 }
 #conversejs .chatbox,
 #conversejs .chatroom {

less/converse.less

@@ -943,18 +943,15 @@ dl.add-converse-contact {
     background-color: #DCEAC5; /* Make this difference */
 }
 
-#conversejs #converse-roster dd.current-xmpp-contact {
-    clear: both;
-}
-
 #conversejs #converse-roster dd.current-xmpp-contact span {
     font-size: 16px;
     float: left;
     color: rgb(79, 79, 79);
 }
 
-#conversejs #converse-roster dd.requesting-xmpp-contact button{
+#conversejs .requesting-xmpp-contact .request-actions {
     margin-left: 0.5em;
+    float: right;
 }
 
 #conversejs #converse-roster dd a,
@@ -967,7 +964,7 @@ dl.add-converse-contact {
 }
 
 #conversejs #converse-roster dd span {
-    padding: 2px 5px 0 0;
+    padding: 0 5px 0 0;
 }
 
 #conversejs #converse-roster {
@@ -985,7 +982,6 @@ dl.add-converse-contact {
     text-overflow: ellipsis;
     white-space: nowrap;
     display: inline-block;
-    width: 175px;
 }
 
 #conversejs dd.available-chatroom a.open-room {
@@ -998,7 +994,7 @@ dl.add-converse-contact {
     font-size: 13px;
     color: #666;
     border: none;
-    padding: 0.3em 0em 0em 0.5em;
+    padding: 0.3em 0 0 0.5em;
     text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
 }
 
@@ -1006,16 +1002,6 @@ dl.add-converse-contact {
     display: none;
 }
 
-#conversejs dd.available-chatroom,
-#conversejs #converse-roster dd {
-    font-weight: bold;
-    border: none;
-    display: block;
-    padding: 0 0em 0 0.5em;
-    color: #666;
-    text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
-}
-
 #conversejs .room-info {
     font-size: 11px;
     font-style: normal;
@@ -1059,8 +1045,31 @@ dl.add-converse-contact {
     font-size: 15px;
 }
 
+#conversejs dd.available-chatroom,
+#conversejs #converse-roster dd {
+    font-weight: bold;
+    border: none;
+    display: block;
+    padding: 1px 0 0 0.5em;
+    color: #666;
+    text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
+    clear: both;
+}
+
+#conversejs #converse-roster dd {
+    line-height: 16px;
+}
+
+#conversejs dd.available-chatroom:hover,
+#conversejs #converse-roster dd:hover {
+    background-color: #eee;
+}
+
+#conversejs #converse-roster dd a.decline-xmpp-request {
+    margin-left: 5px;
+}
+
 #conversejs #converse-roster dd a.remove-xmpp-contact {
-    line-height: 21px;
     float: right;
     width: 22px;
     margin: 0;
@@ -1073,14 +1082,7 @@ dl.add-converse-contact {
 }
 
 #conversejs #converse-roster a.open-chat {
-    line-height: 21px;
-    width: 85%;
-}
-#conversejs #converse-roster dd:hover a.open-chat {
-    width: 70%;
-}
-#conversejs #converse-roster dd.pending-xmpp-contact:hover span {
-    width: 70%;
+    width: 80%;
 }
 
 #conversejs .chatbox,
@@ -1427,7 +1429,7 @@ input.custom-xmpp-status {
 }
 
 #conversejs .chatbox .dropdown dt a span {
-    cursor:pointer; 
+    cursor: pointer; 
     display:block; 
     padding: 4px 7px 0 5px;
     color: rgb(79, 79, 79);

mockup/index.html

@@ -143,14 +143,18 @@
 
                     <dt id="xmpp-contact-requests" style="display: block;">Contact requests</dt>
                     <dd class="offline requesting-xmpp-contact">
-                        <div>Bob Skinstad</div>
-                        <button type="button" class="accept-xmpp-request">Accept</button>
-                        <button type="button" class="decline-xmpp-request">Decline</button>
+                        <span>Bob Skinstad</span>
+                        <span class="request-actions">
+                            <a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a>
+                            <a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a>
+                        </span>
                     </dd>
                     <dd class="offline requesting-xmpp-contact">
-                        <div>André Vos</div>
-                        <button type="button" class="accept-xmpp-request">Accept</button>
-                        <button type="button" class="decline-xmpp-request">Decline</button>
+                        <span>André Vos</span>
+                        <span class="request-actions">
+                            <a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a>
+                            <a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a>
+                        </span>
                     </dd>
 
                     <dt id="pending-xmpp-contacts" style="display: block;">Pending contacts</dt>

src/templates/requesting_contact.html

-<div>{{fullname}}</div>
-<button type="button" class="accept-xmpp-request">{{label_accept}}</button>
-<button type="button" class="decline-xmpp-request">{{label_decline}}</button>
+<span>{{fullname}}</span>
+<span class="request-actions">
+    <a class="accept-xmpp-request icon-checkmark" title="{{desc_accept}}" href="#"></a>
+    <a class="decline-xmpp-request icon-close" title="{{desc_decline}}" href="#"></a>
+</span>