Create hover info box.

src/styles/components/_buddycondensed.scss

@@ -19,13 +19,9 @@
  *
  */
 #buddycondensed {
-  display: table;
+  display: inline-block;
-  float: left;
+  position: fixed;
-  height: 50px;
-  overflow: hidden;
   padding-left: 20px;
-  vertical-align: bottom;
-  min-width: 355px;
 }
 .buddycondensed {
   &.buddy {
@@ -34,6 +30,7 @@
     cursor: auto;
     min-height: 50px;
     vertical-align: bottom;
+    overflow: visible;
     .buddyPicture {
       margin: 2px;
     }
@@ -44,6 +41,7 @@
     background: #f8f8f8;
     display: none;
     position: fixed;
+    top: 49px;
     &:hover {
       display: block;
     }
@@ -52,11 +50,45 @@
     display: inline-block;
     font-weight: bold;
     padding-left: 10px;
+    cursor: default;
     &:hover ~ .overDefaultDisplayNum {
       display: block;
     }
   }
+  .actions {
+    background: #FFF;
+    border: 1px solid rgba(128, 128, 128, 0.16);
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    border-radius: 2px;
+    display: none;
+    cursor: default;
+    height: 51px;
+    padding: 0 15px;
+    bottom: 10px;
+    position: relative;
+    white-space: nowrap;
+    z-index: 10;
+    .btn-group {
+      margin-bottom: 5px;
+      width: 55px;
+    }
+    .btn-primary {
+      padding: 2px 4px;
+    }
+    .fa {
+      font-size: 20px;
+      color: #FFF;
+      line-height: 24px;
+    }
+    .displayName {
+      margin-right: 10px;
+    }
+  }
   .buddyPicture {
     cursor: pointer;
+    overflow: visible;
+    &:hover .actions {
+      display: inline-block;
+    }
   }
 }

static/js/directives/buddycondensed.js

@@ -25,6 +25,29 @@ define(['angular', 'text!partials/buddycondensed.html'], function(angular, templ
 
 		var controller = ['$scope', 'mediaStream', 'contacts', function($scope, mediaStream, contacts) {
 			var buddycondensed = [];
+			var empty = function(x) {
+				return x === null || x === undefined || isNaN(x) || x === "";
+			};
+			var sortCondensed = function() {
+				var unnamed = buddycondensed.length;
+				buddycondensed.sort(function(current, next) {
+					if(!current.Status || current.Status && empty(current.Status.displayName)) {
+						return 1;
+					} else {
+						if(next.Status && !empty(next.Status.displayName)) {
+							if (current.Status.displayName < next.Status.displayName) {
+								return -1;
+							} else if (current.Status.displayName > next.Status.displayName) {
+								return 1;
+							} else {
+								return 0;
+							}
+						} else {
+							return 0;
+						}
+					}
+				});
+			};
 			var joined = function(buddy) {
 				buddycondensed.push(buddy);
 			};
@@ -37,13 +60,14 @@ define(['angular', 'text!partials/buddycondensed.html'], function(angular, templ
 				}
 				$scope.$apply();
 			};
-			// replace session data with contact data
 			var contactadded = function(data) {
 				//console.log('contactadded', data);
 				var hasSession = false;
 				for (var i in buddycondensed) {
+					// replace session data with contact data
 					if(buddycondensed[i].Userid === data.Userid) {
-						buddycondensed[i] = angular.extend(buddycondensed[i], data);
+						buddycondensed[i] = data;
+						//console.log('contactadded replaced', 'data', data.Status && data.Status.displayName, 'buddycondensed[i]', buddycondensed[i].Status && buddycondensed[i].Status.displayName);
 						hasSession = true;
 						break;
 					}
@@ -70,6 +94,7 @@ define(['angular', 'text!partials/buddycondensed.html'], function(angular, templ
 			$scope.maxBuddiesToShow = 5;
 			contacts.e.on("contactadded", function(event, data) {
 				contactadded(data);
+				sortCondensed();
 			});
 			mediaStream.api.e.on("received.userleftorjoined", function(event, dataType, data) {
 				//console.log("received.userleftorjoined", data.Id);
@@ -78,6 +103,7 @@ define(['angular', 'text!partials/buddycondensed.html'], function(angular, templ
 				} else {
 					joined(data);
 				}
+				sortCondensed();
 			});
 			mediaStream.api.e.on("received.users", function(event, data) {
 				//console.log("received.users", data);
@@ -87,6 +113,7 @@ define(['angular', 'text!partials/buddycondensed.html'], function(angular, templ
 						joined(x);
 					}
 				});
+				sortCondensed();
 				$scope.$apply();
 			});
 		}];

static/partials/buddycondensed.html

@@ -3,12 +3,32 @@
         <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 class="buddyPicture">
+                    <i class="fa fa-user"/>
+                    <img ng-show="buddy.Status.buddyPicture" alt ng-src="{{buddy.Userid | buddyImageSrc}}"/>
+                    <span class="actions">
+                        <span class="displayName">{{buddy.Userid|displayName}}</span>
+                        <div class="btn-group">
+                            <a class="btn btn-primary" data-action="call" title="Start video call"><i class="fa fa-phone"></i></a>
+                            <a class="btn btn-primary" data-action="chat" title="Start chat"><i class="fa fa-comments-o"></i></a>
+                        </div>
+                    </span>
+                </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 class="buddyPicture">
+                    <i class="fa fa-user"/>
+                    <img ng-show="buddy.Status.buddyPicture" alt ng-src="{{buddy.Userid | buddyImageSrc}}"/>
+                    <span class="actions">
+                        <span class="displayName">{{buddy.Userid|displayName}}</span>
+                        <div class="btn-group">
+                            <a class="btn btn-primary" data-action="call" title="Start video call"><i class="fa fa-phone"></i></a>
+                            <a class="btn btn-primary" data-action="chat" title="Start chat"><i class="fa fa-comments-o"></i></a>
+                        </div>
+                    </span>
+                </span>
             </span>
         </div>
     </div>