Update markup for the roster filter

css/converse.css

@@ -4794,6 +4794,8 @@ body.reset {
   #conversejs canvas {
     background: #777;
     border-radius: 4px; }
+  #conversejs .selected {
+    color: #578EA9 !important; }
   #conversejs .circle {
     border-radius: 50%; }
   #conversejs .sidebar {
@@ -4921,8 +4923,8 @@ body.reset {
     -moz-animation-timing-function: ease;
     animation-timing-function: ease; }
   #conversejs .hidden {
-    opacity: 0;
-    display: none; }
+    opacity: 0 !important;
+    display: none !important; }
   #conversejs .collapsed {
     height: 0 !important;
     overflow: hidden !important;
@@ -4979,14 +4981,6 @@ body.reset {
     display: block;
     margin: 0 auto;
     clear: both; }
-  #conversejs .button-group,
-  #conversejs .input-button-group {
-    display: table; }
-  #conversejs .button-group {
-    width: 100%; }
-  #conversejs .input-button-group button,
-  #conversejs .input-button-group input {
-    display: table-cell; }
   #conversejs .error {
     color: #A53214; }
   #conversejs .info {
@@ -5003,8 +4997,6 @@ body.reset {
     display: block !important; }
   #conversejs .pure-form-message {
     padding: 0.5em 0; }
-  #conversejs .pure-button {
-    border-radius: 5px; }
   #conversejs .button-primary {
     color: white;
     background-color: #3AA569; }
@@ -6034,50 +6026,23 @@ body.reset {
   #conversejs #converse-roster .search-xmpp ul li.chat-info {
     padding-left: 10px; }
   #conversejs #converse-roster .roster-filter-form {
-    margin: 0.2em 0 0;
     width: 100%;
     /* (dynamically added) if input has value: */
     /* (dynamically added) if mouse is over the 'x' input area*/ }
     #conversejs #converse-roster .roster-filter-form span {
-      margin: 0;
-      padding: 0.2em;
+      padding: 0.3em;
       color: #888;
       cursor: pointer; }
     #conversejs #converse-roster .roster-filter-form .roster-filter {
-      float: left;
-      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg==) no-repeat right -20px center;
-      border: 1px solid #999;
-      font-size: 14px;
-      height: 25px;
-      margin: 0.2em 0.2em 0.2em 0;
-      width: 60%; }
+      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 .roster-filter-state {
-      display: none; }
     #conversejs #converse-roster .roster-filter-form .state-type {
-      float: left;
-      border: 1px solid #999;
-      font-size: calc(14px - 2px);
-      height: 25px;
-      margin: 0;
-      padding: 0;
-      padding-left: 0.4em;
-      width: 53%;
-      display: none; }
-    #conversejs #converse-roster .roster-filter-form .state-type-state {
-      display: inline-block; }
-    #conversejs #converse-roster .roster-filter-form .filter-type {
-      display: table-cell;
-      float: right;
       font-size: calc(14px - 2px);
       height: 25px;
-      padding: 0;
-      width: 47%;
-      border-radius: 0;
-      border: 1px solid; }
+      width: 100%; }
   #conversejs #converse-roster .roster-contacts {
     padding: 0;
     margin: 0.2em 0;

css/inverse.css

@@ -4794,6 +4794,8 @@ body.reset {
   #conversejs canvas {
     background: #777;
     border-radius: 4px; }
+  #conversejs .selected {
+    color: #578EA9 !important; }
   #conversejs .circle {
     border-radius: 50%; }
   #conversejs .sidebar {
@@ -4921,8 +4923,8 @@ body.reset {
     -moz-animation-timing-function: ease;
     animation-timing-function: ease; }
   #conversejs .hidden {
-    opacity: 0;
-    display: none; }
+    opacity: 0 !important;
+    display: none !important; }
   #conversejs .collapsed {
     height: 0 !important;
     overflow: hidden !important;
@@ -4979,14 +4981,6 @@ body.reset {
     display: block;
     margin: 0 auto;
     clear: both; }
-  #conversejs .button-group,
-  #conversejs .input-button-group {
-    display: table; }
-  #conversejs .button-group {
-    width: 100%; }
-  #conversejs .input-button-group button,
-  #conversejs .input-button-group input {
-    display: table-cell; }
   #conversejs .error {
     color: #A53214; }
   #conversejs .info {
@@ -5003,8 +4997,6 @@ body.reset {
     display: block !important; }
   #conversejs .pure-form-message {
     padding: 0.5em 0; }
-  #conversejs .pure-button {
-    border-radius: 5px; }
   #conversejs .button-primary {
     color: white;
     background-color: #E7A151; }
@@ -6160,50 +6152,23 @@ body {
   #conversejs #converse-roster .search-xmpp ul li.chat-info {
     padding-left: 10px; }
   #conversejs #converse-roster .roster-filter-form {
-    margin: 0.2em 0 0;
     width: 100%;
     /* (dynamically added) if input has value: */
     /* (dynamically added) if mouse is over the 'x' input area*/ }
     #conversejs #converse-roster .roster-filter-form span {
-      margin: 0;
-      padding: 0.2em;
+      padding: 0.3em;
       color: #888;
       cursor: pointer; }
     #conversejs #converse-roster .roster-filter-form .roster-filter {
-      float: left;
-      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg==) no-repeat right -20px center;
-      border: 1px solid #999;
-      font-size: 16px;
-      height: 30px;
-      margin: 0.2em 0.2em 0.2em 0;
-      width: 60%; }
+      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 .roster-filter-state {
-      display: none; }
     #conversejs #converse-roster .roster-filter-form .state-type {
-      float: left;
-      border: 1px solid #999;
       font-size: calc(16px - 2px);
       height: 30px;
-      margin: 0;
-      padding: 0;
-      padding-left: 0.4em;
-      width: 53%;
-      display: none; }
-    #conversejs #converse-roster .roster-filter-form .state-type-state {
-      display: inline-block; }
-    #conversejs #converse-roster .roster-filter-form .filter-type {
-      display: table-cell;
-      float: right;
-      font-size: calc(16px - 2px);
-      height: 30px;
-      padding: 0;
-      width: 47%;
-      border-radius: 0;
-      border: 1px solid; }
+      width: 100%; }
   #conversejs #converse-roster .roster-contacts {
     padding: 0;
     margin: 0.2em 0;

mockup/user-panel.html

@@ -46,10 +46,10 @@
         <span class="w-100">Contacts</span>
         <a class="chatbox-btn fa fa-user-plus" title="Click to add new chat contacts" data-toggle="modal" data-target="#addContactModal"></a>
     </div>
-    <form class="pure-form roster-filter-form input-button-group">
-        <div class="form-group form-inline">
+    <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="filter-by">
+            <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>
                 <span class="fa fa-circle" title="Filter by status"></span>

sass/_core.scss

@@ -57,6 +57,10 @@ body.reset {
         border-radius: $chatbox-border-radius;
     }
 
+    .selected {
+        color: $link-color !important;
+    }
+
     .circle {
         border-radius: 50%;
     }
@@ -166,8 +170,8 @@ body.reset {
     }
 
     .hidden {
-        opacity: 0;
-        display: none;
+        opacity: 0 !important;
+        display: none !important;
     }
     .collapsed {
         height: 0 !important;
@@ -223,18 +227,6 @@ body.reset {
         clear: both;
     }
 
-    .button-group,
-    .input-button-group {
-        display: table;
-    }
-    .button-group {
-        width: 100%;
-    }
-    .input-button-group button,
-    .input-button-group input {
-        display: table-cell;
-    }
-
     .error {
         color: $error-color;
     }
@@ -259,9 +251,6 @@ body.reset {
     .pure-form-message {
         padding: 0.5em 0;
     }
-    .pure-button {
-        border-radius: $button-border-radius;
-    }
     .button-primary {
         color: white;
         background-color: $primary-color;

sass/_roster.scss

@@ -29,24 +29,16 @@
     }
 
     .roster-filter-form {
-        margin: 0.2em 0 0;
         width: 100%;
 
         span {
-            margin: 0;
-            padding: 0.2em;
+            padding: 0.3em;
             color: #888;
             cursor: pointer;
         }
 
         .roster-filter {
-            float: left;
-            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg== ) no-repeat right -20px center;
-            border: 1px solid #999;
-            font-size: $font-size;
-            height: $controlbox-dropdown-height;
-            margin: 0.2em 0.2em 0.2em 0;
-            width: 60%;
+            width: 100%;
         }
         /* (dynamically added) if input has value: */
         .roster-filter.x {
@@ -56,32 +48,10 @@
         .roster-filter.onX {
             cursor: pointer;
         }
-        .roster-filter-state {
-            display: none;
-        }
         .state-type {
-            float: left;
-            border: 1px solid #999;
-            font-size: calc(#{$font-size} - 2px);
-            height: $controlbox-dropdown-height;
-            margin: 0;
-            padding: 0;
-            padding-left: 0.4em;
-            width: 53%;
-            display: none;
-        }
-        .state-type-state {
-            display: inline-block;
-        }
-        .filter-type {
-            display: table-cell;
-            float: right;
             font-size: calc(#{$font-size} - 2px);
             height: $controlbox-dropdown-height;
-            padding: 0;
-            width: 47%;
-            border-radius: 0;
-            border: 1px solid;
+            width: 100%;
         }
     }
 

src/converse-rosterview.js

@@ -136,7 +136,7 @@
                     "submit form.roster-filter-form": "submitFilter",
                     "click .onX": "clearFilter",
                     "mousemove .x": "toggleX",
-                    "change .filter-type": "changeTypeFilter",
+                    "click .filter-by span": "changeTypeFilter",
                     "change .state-type": "changeChatStateFilter"
                 },
 
@@ -195,7 +195,7 @@
 
                 changeTypeFilter (ev) {
                     if (ev && ev.preventDefault) { ev.preventDefault(); }
-                    const type = ev.target.value;
+                    const type = ev.target.dataset.type;
                     if (type === 'state') {
                         this.model.save({
                             'filter_type': type,
@@ -211,7 +211,6 @@
 
                 liveFilter: _.debounce(function (ev) {
                     this.model.save({
-                        'filter_type': this.el.querySelector('.filter-type').value,
                         'filter_text': this.el.querySelector('.roster-filter').value
                     });
                 }, 250),

src/templates/roster_filter.html

@@ -1,10 +1,10 @@
 <form class="roster-filter-form input-button-group {[ if (!o.visible) { ]} hidden {[ } ]}">
-    <div class="form-group form-inline">
+    <div class="form-inline flex-nowrap">
         <input value="{{{o.filter_text}}}"
-               class="roster-filter form-control roster-filter-{{{o.filter_type}}}"
+               class="roster-filter form-control {[ if (o.filter_type === 'state') { ]} hidden {[ } ]}"
                placeholder="{{{o.placeholder}}}">
 
-        <select class="state-type state-type-{{{o.filter_type}}}">
+        <select class="form-control state-type {[ if (o.filter_type !== 'state') { ]} hidden {[ } ]}">
             <option value="">{{{o.label_any}}}</option>
             <option {[ if (o.chat_state === 'unread_messages') { ]} selected="selected" {[ } ]}
                 value="unread_messages">{{{o.label_unread_messages}}}</option>
@@ -22,10 +22,10 @@
                 value="offline">{{{o.label_offline}}}</option>
         </select>
 
-        <div class="filter-by">
-            <span class="fa fa-user" data-type="contact" title="{{{o.title_contact_filter}}}"></span>
-            <span class="fa fa-users" data-type="group" title="{{{o.title_group_filter}}}"></span>
-            <span class="fa fa-circle" data-type="status" title="{{{o.title_status_filter}}}"></span>
+        <div class="filter-by d-flex flex-nowrap">
+            <span class="fa fa-user {[ if (o.filter_type === 'contacts') { ]} selected {[ } ]}" data-type="contacts" title="{{{o.title_contact_filter}}}"></span>
+            <span class="fa fa-users {[ if (o.filter_type === 'groups') { ]} selected {[ } ]}" data-type="groups" title="{{{o.title_group_filter}}}"></span>
+            <span class="fa fa-circle {[ if (o.filter_type === 'state') { ]} selected {[ } ]}" data-type="state" title="{{{o.title_status_filter}}}"></span>
         </div>
     </div>
 </form>