Breakup lists of buddys.

src/styles/components/_buddycondensed.scss

@@ -18,23 +18,45 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
-
+#buddycondensed {
+  display: table;
+  float: left;
+  height: 50px;
+  overflow: hidden;
+  padding-left: 20px;
+  vertical-align: bottom;
+  min-width: 355px;
+}
 .buddycondensed {
-  display: table-cell;
-  width: 380px;
   &.buddy {
     background: none;
     border-bottom: none;
+    cursor: auto;
     min-height: 50px;
-    padding-left: 20px;
     vertical-align: bottom;
     .buddyPicture {
       margin: 2px;
     }
   }
-  .more {
-    padding-left: 10px;
+  .defaultDisplayNum {
+  }
+  .overDefaultDisplayNum {
+    background: #f8f8f8;
+    display: none;
+    position: fixed;
+    &:hover {
+      display: block;
+    }
+  }
+  .desc {
+    display: inline-block;
     font-weight: bold;
+    padding-left: 10px;
+    &:hover ~ .overDefaultDisplayNum {
+      display: block;
+    }
+  }
+  .buddyPicture {
+    cursor: pointer;
   }
 }
-

static/js/directives/buddycondensed.js

@@ -21,9 +21,9 @@
 define(['angular', 'text!partials/buddycondensed.html'], function(angular, template) {
 
 	// buddycondensed
-	return ["mediaStream", function(mediaStream) {
+	return [function() {
 
-		var controller = ['$scope', '$element', 'mediaStream', 'buddyList', 'buddyPicture', 'contacts', function($scope, $element, mediaStream, buddyList, buddyPicture, contacts) {
+		var controller = ['$scope', 'mediaStream', 'contacts', function($scope, mediaStream, contacts) {
 			var buddycondensed = [];
 			var joined = function(buddy) {
 				buddycondensed.push(buddy);
@@ -37,9 +37,9 @@ define(['angular', 'text!partials/buddycondensed.html'], function(angular, templ
 				}
 				$scope.$apply();
 			};
+			// replace session data with contact data
 			var contactadded = function(data) {
-				// replace session data with contact data
-				console.log('contactadded', data);
+				//console.log('contactadded', data);
 				var hasSession = false;
 				for (var i in buddycondensed) {
 					if(buddycondensed[i].Userid === data.Userid) {
@@ -53,15 +53,26 @@ define(['angular', 'text!partials/buddycondensed.html'], function(angular, templ
 				}
 				$scope.$apply();
 			};
-			$scope.list = function() {
-				return buddycondensed;
+			$scope.listDefault = function() {
+				if(buddycondensed.length >= $scope.maxBuddiesToShow) {
+					return buddycondensed.slice(0, $scope.maxBuddiesToShow);
+				} else {
+					return buddycondensed;
+				}
+			};
+			$scope.listOverDefault = function() {
+				if(buddycondensed.length >= $scope.maxBuddiesToShow) {
+					return buddycondensed.slice($scope.maxBuddiesToShow);
+				} else {
+					return [];
+				}
 			};
 			$scope.maxBuddiesToShow = 5;
 			contacts.e.on("contactadded", function(event, data) {
 				contactadded(data);
 			});
 			mediaStream.api.e.on("received.userleftorjoined", function(event, dataType, data) {
-				console.log("received.userleftorjoined", data.Id);
+				//console.log("received.userleftorjoined", data.Id);
 				if (dataType === "Left") {
 					left(data.Id);
 				} else {
@@ -69,7 +80,7 @@ define(['angular', 'text!partials/buddycondensed.html'], function(angular, templ
 				}
 			});
 			mediaStream.api.e.on("received.users", function(event, data) {
-				console.log("received.users", data);
+				//console.log("received.users", data);
 				var selfId = $scope.id;
 				data.forEach(function(x) {
 					if (x.Id !== selfId) {

static/partials/buddycondensed.html

@@ -1,6 +1,15 @@
-<span class="buddycondensed buddy">
-    <span ng-repeat="buddy in list() | limitTo:maxBuddiesToShow">
-        <span class="buddyPicture"><i class="fa fa-user"/><img ng-show="buddy.Status.buddyPicture" alt="{{buddy.Status.displayName}}" ng-src="{{buddy.Userid | buddyImageSrc}}"/></span>
-    </span>
-    <span class="more" ng-if="list().length > maxBuddiesToShow">+ {{list().length - maxBuddiesToShow}} {{_("more")}}</span>
-</span>
+<div id="buddycondensed">
+    <div class="buddycondensed buddy">
+        <span class="desc" ng-if="listOverDefault().length > maxBuddiesToShow">+ {{listOverDefault().length - maxBuddiesToShow}} {{_("more")}}</span>
+        <div class="defaultDisplayNum pull-left">
+            <span ng-repeat="buddy in listDefault()">
+                <span class="buddyPicture"><i class="fa fa-user"/><img ng-show="buddy.Status.buddyPicture" alt ng-src="{{buddy.Userid | buddyImageSrc}}"/></span>
+            </span>
+        </div>
+        <div class="overDefaultDisplayNum">
+            <span ng-repeat="buddy in listOverDefault()">
+                <span class="buddyPicture"><i class="fa fa-user"/><img ng-show="buddy.Status.buddyPicture" alt ng-src="{{buddy.Userid | buddyImageSrc}}"/></span>
+            </span>
+        </div>
+    </div>
+</div>