Fix roster filter functionality

6cdaa474 · JC Brand · 493ecb2e · 6cdaa474 · 6cdaa474 · 6cdaa474
Commit 6cdaa474 authored Feb 19, 2018 by JC Brand
7 changed files
--- a/css/converse.css
+++ b/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;

--- a/css/inverse.css
+++ b/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;

--- a/mockup/user-panel.html
+++ b/mockup/user-panel.html
@@ -48,7 +48,10 @@
    </div>
    <form class="roster-filter-form input-button-group">
        <div class="form-inline flex-nowrap">
+            <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>

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

--- a/sass/_roster.scss
+++ b/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);

--- a/src/converse-rosterview.js
+++ b/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);
                    }

--- a/src/templates/roster_filter.html
+++ b/src/templates/roster_filter.html
 <form class="roster-filter-form input-button-group {[ if (!o.visible) { ]} hidden {[ } ]}">
    <div class="form-inline flex-nowrap">
+        <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>