Style the live filter and make sure that it...

only shows when the roster is overflowing. updates #212

converse.js

@@ -3377,6 +3377,16 @@
                 return this;
             },
 
+            showHideFilter: function () {
+                var $filter = this.$('.roster-filter');
+                if (this.$('.roster-contacts').hasScrollBar()) {
+                    $filter.show();
+                } else {
+                    $filter.hide();
+                }
+                return this;
+            },
+
             update: function () {
                 // XXX: Is this still being used/valid?
                 var $count = $('#online-count');
@@ -3384,7 +3394,7 @@
                 if (!$count.is(':visible')) {
                     $count.show();
                 }
-                return this;
+                return this.showHideFilter();
             },
 
             reset: function () {

css/converse.css

@@ -817,7 +817,7 @@ dl.add-converse-contact {
   top: 1px;
 }
 #conversejs .controlbox-pane dt {
-  padding: 3px;
+  padding-bottom: 3px;
 }
 #conversejs .chatroom-form-container {
   height: 100%;
@@ -883,13 +883,22 @@ dl.add-converse-contact {
   padding: 0 5px 0 0;
 }
 #converse-roster {
-  overflow-y: auto;
-  overflow-x: hidden;
   width: 100%;
   position: relative;
   margin: 0.5em 0 0 0;
-  height: 254px;
-  height: calc(100% - 70px);
+  max-height: 194px;
+  max-height: calc(100% - 25px);
+}
+#converse-roster .roster-filter {
+  margin: 0 0.5em;
+  width: 182px;
+}
+#converse-roster .roster-contacts {
+  margin: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 195px;
+  height: calc(100% - 67px);
 }
 #converse-roster .group-toggle {
   color: #666;
@@ -952,7 +961,7 @@ dl.add-converse-contact {
   font-size: 15px;
 }
 #conversejs dd.available-chatroom,
-#converse-roster dd {
+#conversejs #converse-roster dd {
   font-weight: bold;
   border: none;
   display: block;

less/converse.less

@@ -902,7 +902,7 @@ dl.add-converse-contact {
 }
 
 #conversejs .controlbox-pane dt {
-    padding: 3px;
+    padding-bottom: 3px;
 }
 
 #conversejs .chatroom-form-container {
@@ -981,13 +981,24 @@ dl.add-converse-contact {
 }
 
 #converse-roster {
-    overflow-y: auto;
-    overflow-x: hidden;
     width: 100%;
     position: relative;
     margin: 0.5em 0 0 0;
-    height: 254px;
-    height: ~"calc(100% - 70px)";
+    max-height: 194px;
+    max-height: ~"calc(100% - 25px)";
+}
+
+#converse-roster .roster-filter {
+    margin: 0 0.5em;
+    width: 182px;
+}
+
+#converse-roster .roster-contacts {
+    margin: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: 195px;
+    height: ~"calc(100% - 67px)";
 }
 
 #converse-roster .group-toggle {
@@ -1063,7 +1074,7 @@ dl.add-converse-contact {
 }
 
 #conversejs dd.available-chatroom,
-#converse-roster dd {
+#conversejs #converse-roster dd {
     font-weight: bold;
     border: none;
     display: block;

mockup/controlbox.html

@@ -115,7 +115,7 @@
                     </dd>
                 </dl>
                 <div id="converse-roster">
-                    <input id="search_input" placeholder="Type to filter">
+                    <input class="roster-filter" placeholder="Type to filter">
                     <dl class="roster-contacts" style="display: block;">
                         <dt class="roster-group" style="display: block;">
                             <a href="#" data-group="Colleagues" class="group-toggle icon-opened" title="Click to hide these contacts">Colleagues</a>

src/jquery.fastLiveFilter.js

-/**
+jQuery.fn.hasScrollBar = function() {
+    var el = this.get(0);
+    if(el.offsetHeight < el.scrollHeight) {
+        return true;
+    }
+    else{
+        return false;
+    }
+};
+
+jQuery.fn.liveFilter = function(list, options) {
+    /**
     * fastLiveFilter jQuery plugin 1.0.3
     * 
     * Copyright (c) 2011, Anthony Bush
     * License: <http://www.opensource.org/licenses/bsd-license.php>
     * Project Website: http://anthonybush.com/projects/jquery_fast_live_filter/
     **/
-
-jQuery.fn.liveFilter = function(list, options) {
 	// Options: input, list, timeout, callback
 	options = options || {};
 	var input = this;