Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Replace accept/decline buttons with font icons

Browse Source
This commit is contained in:
JC Brand 2014-07-19 14:50:25 +02:00
parent 9bf4eba33b
commit a338ede0d1
5 changed files with 80 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
converse.js
View File

@ -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();

50
css/converse.css
View File

@ -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 {

58
less/converse.less
View File

@ -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);

16
mockup/index.html
View File

@ -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>

8
src/templates/requesting_contact.html
View File

@ -1,3 +1,5 @@
<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>