Fix roster filter functionality

css/converse.css

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

css/inverse.css

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

mockup/user-panel.html

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

sass/_controlbox.scss

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

sass/_roster.scss

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

src/converse-rosterview.js

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

src/templates/roster_filter.html

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