Skip to content

C
converse.js
Commit a338ede0 authored by JC Brand's avatar JC Brand
Browse files
Options

Replace accept/decline buttons with font icons

parent 9bf4eba3
Show whitespace changes
Inline Side-by-side
Showing with 80 additions and 68 deletions
converse.js
View file @ a338ede0
......@@ -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();
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
View file @ a338ede0
......@@ -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
View file @ a338ede0
......@@ -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
View file @ a338ede0
......@@ -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
View file @ a338ede0
<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>
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7