Adds scrollbar to the contact list.

css/contact_list.css

@@ -3,12 +3,27 @@
     cursor: default;
 }
 
-#contactlist>ul {
+#contactlist>div.title {
+    text-align: left;
+    padding: 7px 10px;
+    margin: 2px;
+    color: #00ccff;
+    font-size: 11pt;
+    border-bottom: 1px solid #676767;
+}
+
+#contactlist>ul#contacts {
+    position: absolute;
+    top: 31px;
+    bottom: 0px;
+    width: 100%;
     margin: 0px;
     padding: 0px;
+    overflow-y: scroll;
+    overflow-x: hidden;
 }
 
-#contactlist>ul>li {
+#contacts>li {
     list-style-type: none;
     text-align: left;
     color: #FFF;
@@ -17,18 +32,12 @@
     margin: 2px;
 }
 
-#contactlist>ul>li>p {
+#contacts>li>p {
     display: inline-block;
     vertical-align: middle;
     margin: 0px;
 }
 
-#contactlist>ul>li.title {
-    color: #00ccff;
-    font-size: 11pt;
-    border-bottom: 1px solid #676767;
-}
-
 .avatar {
     padding: 0px;
     margin-right: 10px;

index.html

@@ -19,7 +19,7 @@
     <script src="libs/popover.js?v=1"></script><!-- bootstrap tooltip lib -->
     <script src="libs/toastr.js?v=1"></script><!-- notifications lib -->
     <script src="interface_config.js?v=5"></script>
-    <script src="libs/app.bundle.js?v=87"></script>
+    <script src="libs/app.bundle.js?v=88"></script>
     <script src="analytics.js?v=1"></script><!-- google analytics plugin -->
     <link rel="stylesheet" href="css/font.css?v=7"/>
     <link rel="stylesheet" href="css/toastr.css?v=1">
@@ -289,9 +289,10 @@
             </div>
         </div>
         <div id="contactlist" class="right-panel">
-            <ul>
-                <li class="title"><i class="icon-contact-list"></i><span data-i18n="contactlist"></span></li>
-            </ul>
+            <div class="title">
+                <i class="icon-contactList"><span data-i18n="contactlist"></span></i>
+            </div>
+            <ul id="contacts"></ul>
         </div>
         <div id="settingsmenu" class="right-panel">
             <div class="icon-settings" data-i18n="settings.title"></div>

modules/UI/side_pannels/contactlist/ContactList.js

@@ -85,7 +85,7 @@ var ContactList = {
     ensureAddContact: function (peerJid, id) {
         var resourceJid = Strophe.getResourceFromJid(peerJid);
 
-        var contact = $('#contactlist>ul>li[id="' + resourceJid + '"]');
+        var contact = $('#contacts>li[id="' + resourceJid + '"]');
 
         if (!contact || contact.length <= 0)
             ContactList.addContact(peerJid, id);
@@ -100,7 +100,7 @@ var ContactList = {
     addContact: function (peerJid, id) {
         var resourceJid = Strophe.getResourceFromJid(peerJid);
 
-        var contactlist = $('#contactlist>ul');
+        var contactlist = $('#contacts');
 
         var newContact = document.createElement('li');
         newContact.id = resourceJid;
@@ -114,15 +114,11 @@ var ContactList = {
         newContact.appendChild(createAvatar(id));
         newContact.appendChild(createDisplayNameParagraph("participant"));
 
-        var clElement = contactlist.get(0);
-
-        if (resourceJid === APP.xmpp.myResource()
-            && $('#contactlist>ul .title')[0].nextSibling.nextSibling) {
-            clElement.insertBefore(newContact,
-                $('#contactlist>ul .title')[0].nextSibling.nextSibling);
+        if (resourceJid === APP.xmpp.myResource()) {
+            contactlist.prepend(newContact);
         }
         else {
-            clElement.appendChild(newContact);
+            contactlist.append(newContact);
         }
         updateNumberOfParticipants(1);
     },
@@ -135,7 +131,7 @@ var ContactList = {
     removeContact: function (peerJid) {
         var resourceJid = Strophe.getResourceFromJid(peerJid);
 
-        var contact = $('#contactlist>ul>li[id="' + resourceJid + '"]');
+        var contact = $('#contacts>li[id="' + resourceJid + '"]');
 
         if (contact && contact.length > 0) {
             var contactlist = $('#contactlist>ul');
@@ -165,7 +161,7 @@ var ContactList = {
     },
 
     setClickable: function (resourceJid, isClickable) {
-        var contact = $('#contactlist>ul>li[id="' + resourceJid + '"]');
+        var contact = $('#contacts>li[id="' + resourceJid + '"]');
         if (isClickable) {
             contact.addClass('clickable');
         } else {
@@ -179,7 +175,7 @@ var ContactList = {
 
         var resourceJid = Strophe.getResourceFromJid(peerJid);
 
-        var contactName = $('#contactlist #' + resourceJid + '>p');
+        var contactName = $('#contacts #' + resourceJid + '>p');
 
         if (contactName && displayName && displayName.length > 0)
             contactName.html(displayName);