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

Fix roster filter functionality

Browse Source
This commit is contained in:
JC Brand 2018-02-19 16:24:05 +01:00
parent 493ecb2e4f
commit 6cdaa47493
7 changed files with 54 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
css/converse.css
View File

@ -5769,8 +5769,7 @@ body.reset {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .open-room,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .available-room,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .open-room {
max-width: 55%;
width: auto;
width: 100%;
font-weight: bold; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.room-info:before,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.room-info:before {
@ -6026,19 +6025,20 @@ body.reset {
#conversejs #converse-roster .search-xmpp ul li.chat-info {
padding-left: 10px; }
#conversejs #converse-roster .roster-filter-form {
width: 100%;
/* (dynamically added) if input has value: */
/* (dynamically added) if mouse is over the 'x' input area*/ }
width: 100%; }
#conversejs #converse-roster .roster-filter-form .button-group {
padding: 0.2em; }
#conversejs #converse-roster .roster-filter-form span {
padding: 0.3em;
color: #888;
cursor: pointer; }
#conversejs #converse-roster .roster-filter-form .roster-filter {
width: 100%; }
#conversejs #converse-roster .roster-filter-form .roster-filter.x {
background-position: right 3px center; }
#conversejs #converse-roster .roster-filter-form .roster-filter.onX {
cursor: pointer; }
#conversejs #converse-roster .roster-filter-form .clear-roster-filter {
position: absolute;
right: 0.2em;
cursor: pointer;
font-size: 0.75rem; }
#conversejs #converse-roster .roster-filter-form .state-type {
font-size: calc(14px - 2px);
height: 25px;

18
css/inverse.css
View File

@ -5841,8 +5841,7 @@ body {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .open-room,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .available-room,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .open-room {
max-width: 55%;
width: auto;
width: 100%;
font-weight: bold; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.room-info:before,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.room-info:before {
@ -6152,19 +6151,20 @@ body {
#conversejs #converse-roster .search-xmpp ul li.chat-info {
padding-left: 10px; }
#conversejs #converse-roster .roster-filter-form {
width: 100%;
/* (dynamically added) if input has value: */
/* (dynamically added) if mouse is over the 'x' input area*/ }
width: 100%; }
#conversejs #converse-roster .roster-filter-form .button-group {
padding: 0.2em; }
#conversejs #converse-roster .roster-filter-form span {
padding: 0.3em;
color: #888;
cursor: pointer; }
#conversejs #converse-roster .roster-filter-form .roster-filter {
width: 100%; }
#conversejs #converse-roster .roster-filter-form .roster-filter.x {
background-position: right 3px center; }
#conversejs #converse-roster .roster-filter-form .roster-filter.onX {
cursor: pointer; }
#conversejs #converse-roster .roster-filter-form .clear-roster-filter {
position: absolute;
right: 0.2em;
cursor: pointer;
font-size: 0.75rem; }
#conversejs #converse-roster .roster-filter-form .state-type {
font-size: calc(16px - 2px);
height: 30px;

5
mockup/user-panel.html
View File

@ -48,7 +48,10 @@
</div>
<form class="roster-filter-form input-button-group">
<div class="form-inline flex-nowrap">
<input value="" class="roster-filter form-control" placeholder="Filter">
<div class="btn-group">
<input value="" class="roster-filter form-control" placeholder="Filter">
<span class="clear-roster-filter fa fa-times {[ if (!o.filter_text) { ]} hidden {[ } ]}"></span>
</div>
<div class="filter-by d-flex flex-nowrap">
<span class="fa fa-user" title="Filter by contacts"></span>
<span class="fa fa-users" title="Filter by groups"></span>

3
sass/_controlbox.scss
View File

@ -224,8 +224,7 @@
&.unread-msgs {
.available-room,
.open-room {
max-width: 55%;
width: auto;
width: 100%;
font-weight: bold;
}
}

14
sass/_roster.scss
View File

@ -31,6 +31,10 @@
.roster-filter-form {
width: 100%;
.button-group {
padding: 0.2em;
}
span {
padding: 0.3em;
color: #888;
@ -40,13 +44,11 @@
.roster-filter {
width: 100%;
}
/* (dynamically added) if input has value: */
.roster-filter.x {
background-position: right 3px center;
}
/* (dynamically added) if mouse is over the 'x' input area*/
.roster-filter.onX {
.clear-roster-filter {
position: absolute;
right: 0.2em;
cursor: pointer;
font-size: 0.75rem;
}
.state-type {
font-size: calc(#{$font-size} - 2px);

52
src/converse-rosterview.js
View File

@ -134,15 +134,14 @@
events: {
"keydown .roster-filter": "liveFilter",
"submit form.roster-filter-form": "submitFilter",
"click .onX": "clearFilter",
"mousemove .x": "toggleX",
"click .clear-roster-filter": "clearFilter",
"click .filter-by span": "changeTypeFilter",
"change .state-type": "changeChatStateFilter"
},
initialize () {
this.model.on('change:filter_type', this.render, this);
this.model.on('change:filter_text', this.renderClearButton, this);
this.model.on('change:filter_text', this.render, this);
},
toHTML () {
@ -164,28 +163,6 @@
}));
},
afterRender () {
this.renderClearButton();
},
renderClearButton () {
const roster_filter = this.el.querySelector('.roster-filter');
if (_.isNull(roster_filter)) {
return;
}
roster_filter.classList[this.tog(roster_filter.value)]('x');
},
tog (v) {
return v?'add':'remove';
},
toggleX (ev) {
if (ev && ev.preventDefault) { ev.preventDefault(); }
const el = ev.target;
el.classList[this.tog(el.offsetWidth-18 < ev.clientX-el.getBoundingClientRect().left)]('onX');
},
changeChatStateFilter (ev) {
if (ev && ev.preventDefault) { ev.preventDefault(); }
this.model.save({
@ -264,10 +241,10 @@
clearFilter (ev) {
if (ev && ev.preventDefault) {
ev.preventDefault();
ev.target.classList.remove('x');
ev.target.classList.remove('onX');
ev.target.value = '';
u.hideElement(this.el.querySelector('.clear-roster-filter'));
}
const roster_filter = this.el.querySelector('.roster-filter');
roster_filter.value = '';
this.model.save({'filter_text': ''});
}
});
@ -359,9 +336,9 @@
const chat_status = item.get('chat_status') || 'offline';
if (chat_status === 'online') {
status_icon = 'fa-circle';
} else if (chat_status === 'away' || chat_status === 'dnd') {
} else if (chat_status === 'away' || chat_status === 'xa') {
status_icon = 'fa-circle-o';
} else if (chat_status === 'busy') {
} else if (chat_status === 'dnd') {
status_icon = 'fa-minus-circle';
}
this.el.innerHTML = tpl_roster_item(
@ -558,10 +535,18 @@
filter (q, type) {
/* Filter the group's contacts based on the query "q".
* The query is matched against the contact's full name.
*
* If all contacts are filtered out (i.e. hidden), then the
* group must be filtered out as well.
*/
if (_.isNil(q)) {
type = type || _converse.rosterview.filter_view.model.get('filter_type');
if (type === 'state') {
q = _converse.rosterview.filter_view.model.get('chat_state');
} else {
q = _converse.rosterview.filter_view.model.get('filter_text');
}
}
this.filterOutContacts(this.getFilterMatches(q, type));
},
@ -577,10 +562,7 @@
ev.target.classList.remove("icon-closed");
ev.target.classList.add("icon-opened");
this.model.save({state: _converse.OPENED});
this.filter(
_converse.rosterview.el.querySelector('.roster-filter').value,
_converse.rosterview.el.querySelector('.filter-type').value
);
this.filter();
u.showElement(this.el);
u.slideOut(this.contacts_el);
}

9
src/templates/roster_filter.html
View File

@ -1,8 +1,11 @@
<form class="roster-filter-form input-button-group {[ if (!o.visible) { ]} hidden {[ } ]}">
<div class="form-inline flex-nowrap">
<input value="{{{o.filter_text}}}"
class="roster-filter form-control {[ if (o.filter_type === 'state') { ]} hidden {[ } ]}"
placeholder="{{{o.placeholder}}}">
<div class="btn-group">
<input value="{{{o.filter_text}}}"
class="roster-filter form-control {[ if (o.filter_type === 'state') { ]} hidden {[ } ]}"
placeholder="{{{o.placeholder}}}">
<span class="clear-roster-filter fa fa-times {[ if (!o.filter_text) { ]} hidden {[ } ]}"></span>
</div>
<select class="form-control state-type {[ if (o.filter_type !== 'state') { ]} hidden {[ } ]}">
<option value="">{{{o.label_any}}}</option>