Skip to content

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

updates #1069 Highlight currently open private chat in the sidebar

parent 58ee1460
Expand all Show whitespace changes
Inline Side-by-side
Showing with 442 additions and 323 deletions
css/converse.css
View file @ efa5e305
This diff is collapsed.
dist/converse.js
View file @ efa5e305
This diff is collapsed.
mockup/chatbox.html
View file @ efa5e305
......@@ -9,7 +9,7 @@
</head>
<body class="reset">
<div id="conversejs" class="fullscreen">
<div id="conversejs" class="fullscreen converse-fullscreen">
<div class="sidebar"></div>
<div class="converse-chatboxes row no-gutters">
<div id="controlbox" class="chatbox">
......
mockup/user-panel.html
View file @ efa5e305
......@@ -109,12 +109,12 @@
<a href="#" class="group-toggle controlbox-padded " title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Contact Requests</a>
<ul class="roster-group-contacts">
<li class=" controlbox-padded offline requesting-xmpp-contact d-flex">
<li class="list-item controlbox-padded offline requesting-xmpp-contact d-flex">
<span class="req-contact-name w-100">The Nurse</span>
<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=" controlbox-padded offline requesting-xmpp-contact d-flex">
<li class="list-item controlbox-padded offline requesting-xmpp-contact d-flex">
<span class="req-contact-name w-100">Friar Laurence</span>
<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>
......@@ -126,12 +126,12 @@
<a href="#" data-group="Colleagues" class="group-toggle controlbox-padded " title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Colleagues</a>
<ul>
<li class=" controlbox-padded away current-xmpp-contact d-flex">
<li class="list-item controlbox-padded away current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle-o" title="this contact is away"></span> Balthasar</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class=" controlbox-padded dnd current-xmpp-contact d-flex">
<li class="list-item controlbox-padded dnd current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-minus-circle" title="This contact is busy"></span> Escalus, Prince of Verona</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
......@@ -143,17 +143,17 @@
<a href="#" data-group="Family" class="group-toggle controlbox-padded " title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Family</a>
<ul>
<li class=" controlbox-padded online current-xmpp-contact d-flex">
<li class="list-item controlbox-padded online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> Benvolio Montague</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class=" controlbox-padded offline current-xmpp-contact d-flex">
<li class="list-item controlbox-padded offline current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-times-circle" title="This contact is offline"></span> Montague</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class=" controlbox-padded offline current-xmpp-contact d-flex">
<li class="list-item controlbox-padded offline current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-times-circle" title="This contact is offline"></span> Lady Montague</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
......@@ -165,7 +165,7 @@
<a href="#" data-group="Friends" class="group-toggle controlbox-padded " title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Friends</a>
<ul>
<li class=" controlbox-padded online current-xmpp-contact d-flex">
<li class="list-item controlbox-padded online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> Mercutio</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
......@@ -177,17 +177,17 @@
<a href="#" class="group-toggle controlbox-padded " title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Ungrouped</a>
<ul>
<li class=" controlbox-padded online current-xmpp-contact d-flex">
<li class="list-item controlbox-padded online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> Gregory</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class=" controlbox-padded online current-xmpp-contact d-flex">
<li class="list-item controlbox-padded online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> Peter</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class=" controlbox-padded online current-xmpp-contact d-flex">
<li class="list-item controlbox-padded online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> Sampson</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
......@@ -199,11 +199,11 @@
<a href="#" class="group-toggle controlbox-padded " title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Pending Contacts</a>
<ul>
<li class=" controlbox-padded offline pending-xmpp-contact d-flex">
<li class="list-item controlbox-padded offline pending-xmpp-contact d-flex">
<span class="pending-contact-name w-100">An Apothecary</span>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class=" controlbox-padded offline pending-xmpp-contact d-flex">
<li class="list-item controlbox-padded offline pending-xmpp-contact d-flex">
<span class="pending-contact-name w-100">Abram</span>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
......
sass/_controlbox.scss
View file @ efa5e305
......@@ -20,7 +20,9 @@
}
}
.set-xmpp-status, .xmpp-status, .roster-contacts {
.set-xmpp-status,
.xmpp-status,
.roster-contacts {
.fa-circle {
color: $green;
}
......@@ -30,9 +32,7 @@
.fa-dot-circle-o {
color: $orange,
}
.fa-circle-o {
color: $subdued-color;
}
.fa-circle-o,
.fa-times-circle {
color: $subdued-color;
}
......
sass/_lists.scss 0 → 100644
View file @ efa5e305
#conversejs {
.list-container {
text-align: left;
padding: 0.3em 0;
.rooms-toggle {
font-family: $heading-font;
display: block;
color: $text-color;
padding: 0 0 0.5rem 0;
&:hover {
color: $dark-gray-color;
}
}
}
.items-list {
text-align: left;
.list-item {
border: none;
clear: both;
color: $text-color;
display: block;
height: 2em;
overflow: hidden;
padding-top: 0.5em;
text-shadow: 0 1px 0 $text-shadow-color;
word-wrap: break-word;
&.open {
background-color: $controlbox-head-color;
&:hover {
background-color: $controlbox-head-color !important;
}
a {
color: white !important;
}
.fa:hover {
color: white;
}
.fa-circle {
color: lighten($green, 25%);
}
.fa-minus-circle {
color: lighten($red, 15%);
}
.fa-dot-circle-o {
color: lighten($orange, 15%);
}
.fa-circle-o,
.fa-times-circle {
color: lighten($subdued-color, 25%);
}
}
}
.available-chatroom,
.open-headline,
.open-chatroom,
.list-item {
&:hover {
background-color: lighten($controlbox-head-color, 45%);
.fa {
display: block !important;
}
}
&.unread-msgs {
.msgs-indicator {
border-radius: 10%;
opacity: 1;
}
.available-room,
.open-room {
width: 100%;
font-weight: bold;
}
}
a {
&:hover {
color: $dark-link-color;
}
&.fa {
display: none;
&:before {
font-size: 15px;
}
}
&.open-room {
width: 68%;
float: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 0.5em;
}
&.available-room {
width: 85%;
}
}
.add-bookmark,
.remove-bookmark,
.close-room,
.room-info {
&.button-on {
color: $link-color;
&:hover {
color: $dark-link-color;
}
}
color: $subdued-color;
}
}
}
}
sass/_roomslist.scss deleted 100644 → 0
View file @ 58ee1460
#conversejs {
.list-container {
text-align: left;
padding: 0.3em 0;
.rooms-toggle {
font-family: $heading-font;
display: block;
color: $text-color;
padding: 0 0 0.5rem 0;
&:hover {
color: $dark-gray-color;
}
}
.items-list {
text-align: left;
.list-item {
border: none;
clear: both;
color: $text-color;
display: block;
height: 2em;
overflow: hidden;
padding-top: 0.5em;
text-shadow: 0 1px 0 $text-shadow-color;
word-wrap: break-word;
}
.available-chatroom,
.open-headline,
.open-chatroom {
&:hover {
background-color: lighten($controlbox-head-color, 45%);
.remove-bookmark,
.add-bookmark,
.close-room,
.room-info {
display: block !important;
}
}
&.open {
background-color: $controlbox-head-color;
a {
color: white !important;
}
}
&.unread-msgs {
.msgs-indicator {
border-radius: 10%;
opacity: 1;
}
.available-room,
.open-room {
width: 100%;
font-weight: bold;
}
}
a {
&:hover {
color: $dark-link-color;
}
&.remove-bookmark,
&.add-bookmark,
&.close-room,
&.room-info {
display: none;
&:before {
font-size: 15px;
}
}
&.open-room {
width: 68%;
float: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 0.5em;
}
&.available-room {
width: 85%;
}
}
.add-bookmark,
.remove-bookmark,
.close-room,
.room-info {
&.button-on {
color: $link-color;
&:hover {
color: $dark-link-color;
}
}
color: $subdued-color;
}
}
}
}
}
sass/_roster.scss
View file @ efa5e305
......@@ -94,14 +94,6 @@
padding: 0 0.2em 0 0;
}
}
a {
&:hover {
color: $dark-link-color;
}
.fa:hover {
color: white;
}
}
.open-chat {
margin: 0;
......
sass/converse.scss
View file @ efa5e305
......@@ -43,7 +43,7 @@
@import "profile";
@import "chatbox";
@import "controlbox";
@import "roomslist";
@import "lists";
@import "roster";
@import "chatrooms";
@import "headline";
......
src/converse-chatboxes.js
View file @ efa5e305
......@@ -417,7 +417,7 @@
if (type === 'error') {
const error = message.querySelector('error');
return _.propertyOf(error.querySelector('text'))('textContent') ||
__('Sorry, an error occured:') + ' ' + error.innerHTML;
__('Sorry, an error occurred:') + ' ' + error.innerHTML;
} else {
return _.propertyOf(message.querySelector('body'))('textContent');
}
......
src/converse-core.js
View file @ efa5e305
......@@ -740,8 +740,8 @@
this.connection.addHandler((iq) => {
if (iq.querySelectorAll('error').length > 0) {
_converse.log(
'An error occured while trying to enable message carbons.',
Strophe.LogLevel.ERROR);
'An error occurred while trying to enable message carbons.',
Strophe.LogLevel.WARN);
} else {
this.session.save({'carbons_enabled': true});
_converse.log('Message carbons have been enabled.');
......
src/converse-roster.js
View file @ efa5e305
......@@ -232,10 +232,20 @@
'user_id': Strophe.getNodeFromJid(jid)
}, attributes));
this.setChatBox();
this.presence.on('change:show', () => _converse.emit('contactPresenceChanged', this));
this.presence.on('change:show', () => this.trigger('presenceChanged'));
},
setChatBox (chatbox=null) {
chatbox = chatbox || _converse.chatboxes.get(this.get('jid'));
if (chatbox) {
this.chatbox = chatbox;
this.chatbox.on('change:hidden', this.render, this);
}
},
getDisplayName () {
return this.vcard.get('fullname') || this.get('jid');
},
......@@ -450,7 +460,7 @@
* (String) name - The name of that user
* (Array of Strings) groups - Any roster groups the user might belong to
* (Function) callback - A function to call once the IQ is returned
* (Function) errback - A function to call if an error occured
* (Function) errback - A function to call if an error occurred
*/
name = _.isEmpty(name)? jid: name;
const iq = $iq({type: 'set'})
......@@ -798,6 +808,16 @@
/********** Event Handlers *************/
function updateUnreadCounter (chatbox) {
const contact = _converse.roster.findWhere({'jid': chatbox.get('jid')});
if (!_.isUndefined(contact)) {
contact.save({'num_unread': chatbox.get('num_unread')});
}
}
_converse.api.listen.on('chatBoxesInitialized', () => {
_converse.chatboxes.on('change:num_unread', updateUnreadCounter)
});
_converse.api.listen.on('beforeTearDown', _converse.unregisterPresenceHandler());
_converse.api.listen.on('afterTearDown', () => {
......
src/converse-rosterview.js
View file @ efa5e305
......@@ -358,7 +358,7 @@
_converse.RosterContactView = Backbone.NativeView.extend({
tagName: 'li',
className: 'd-flex hidden controlbox-padded',
className: 'list-item d-flex hidden controlbox-padded',
events: {
"click .accept-xmpp-request": "acceptRequest",
......@@ -369,6 +369,7 @@
initialize () {
this.model.on("change", this.render, this);
this.model.on("highlight", this.highlight, this);
this.model.on("destroy", this.remove, this);
this.model.on("open", this.openChat, this);
this.model.on("remove", this.remove, this);
......@@ -383,11 +384,10 @@
u.hideElement(this.el);
return this;
}
const item = this.model,
ask = item.get('ask'),
show = item.presence.get('show'),
requesting = item.get('requesting'),
subscription = item.get('subscription');
const ask = this.model.get('ask'),
show = this.model.presence.get('show'),
requesting = this.model.get('requesting'),
subscription = this.model.get('subscription');
const classes_to_remove = [
'current-xmpp-contact',
......@@ -403,6 +403,18 @@
});
this.el.classList.add(show);
this.el.setAttribute('data-status', show);
this.highlight();
if (_converse.isSingleton()) {
const chatbox = _converse.chatboxes.get(this.model.get('jid'));
if (chatbox) {
if (chatbox.get('hidden')) {
this.el.classList.remove('open');
} else {
this.el.classList.add('open');
}
}
}
if ((ask === 'subscribe') || (subscription === 'from')) {
/* ask === 'subscribe'
......@@ -416,20 +428,20 @@
*
* So in both cases the user is a "pending" contact.
*/
const display_name = item.getDisplayName();
const display_name = this.model.getDisplayName();
this.el.classList.add('pending-xmpp-contact');
this.el.innerHTML = tpl_pending_contact(
_.extend(item.toJSON(), {
_.extend(this.model.toJSON(), {
'display_name': display_name,
'desc_remove': __('Click to remove %1$s as a contact', display_name),
'allow_chat_pending_contacts': _converse.allow_chat_pending_contacts
})
);
} else if (requesting === true) {
const display_name = item.getDisplayName();
const display_name = this.model.getDisplayName();
this.el.classList.add('requesting-xmpp-contact');
this.el.innerHTML = tpl_requesting_contact(
_.extend(item.toJSON(), {
_.extend(this.model.toJSON(), {
'display_name': display_name,
'desc_accept': __("Click to accept the contact request from %1$s", display_name),
'desc_decline': __("Click to decline the contact request from %1$s", display_name),
......@@ -440,11 +452,26 @@
this.el.classList.add('current-xmpp-contact');
this.el.classList.remove(_.without(['both', 'to'], subscription)[0]);
this.el.classList.add(subscription);
this.renderRosterItem(item);
this.renderRosterItem(this.model);
}
return this;
},
highlight () {
/* If appropriate, highlight the contact (by adding the 'open' class).
*/
if (_converse.isSingleton()) {
const chatbox = _converse.chatboxes.get(this.model.get('jid'));
if (chatbox) {
if (chatbox.get('hidden')) {
this.el.classList.remove('open');
} else {
this.el.classList.add('open');
}
}
}
},
renderRosterItem (item) {
let status_icon = 'fa-times-circle';
const show = item.presence.get('show') || 'offline';
......@@ -880,15 +907,14 @@
},
updateChatBox (contact) {
const chatbox = _converse.chatboxes.get(contact.get('jid')),
changes = {};
if (!chatbox) {
if (!this.model.chatbox) {
return this;
}
const changes = {};
if (_.has(contact.changed, 'status')) {
changes.status = contact.get('status');
}
chatbox.save(changes);
this.model.chatbox.save(changes);
return this;
},
......@@ -937,15 +963,14 @@
/* -------- Event Handlers ----------- */
_converse.api.listen.on('chatBoxesInitialized', () => {
function updateUnreadCounter (chatbox) {
const contact = _.head(_converse.roster.where({'jid': chatbox.get('jid')}));
_converse.chatboxes.on('change:hidden', (chatbox) => {
const contact = _converse.roster.findWhere({'jid': chatbox.get('jid')});
if (!_.isUndefined(contact)) {
contact.save({'num_unread': chatbox.get('num_unread')});
}
contact.trigger('highlight', contact);
}
_converse.api.listen.on('chatBoxesInitialized', () => {
_converse.chatboxes.on('change:num_unread', updateUnreadCounter)
});
});
function initRoster () {
......
src/templates/group_header.html
View file @ efa5e305
<a href="#" class="group-toggle controlbox-padded" title="{{{o.desc_group_toggle}}}">
<span class="fa {[ if (o.toggle_state === o._converse.OPENED) { ]} fa-caret-down {[ } else { ]} fa-caret-right {[ } ]}">
</span> {{{o.label_group}}}</a>
<ul class="roster-group-contacts {[ if (o.toggle_state === o._converse.CLOSED) { ]} collapsed {[ } ]}"></ul>
<ul class="items-list roster-group-contacts {[ if (o.toggle_state === o._converse.CLOSED) { ]} collapsed {[ } ]}"></ul>
src/templates/roster_item.html
View file @ efa5e305
<a class="open-chat w-100 {[ if (o.num_unread) { ]} unread-msgs {[ } ]}"
<a class="cbox-list-item 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) { ]}
......
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