Add buddycondensed directive and css.

html/main.html

@@ -18,6 +18,7 @@
             <div class="navbar-brand left">
                 <%template "logo" .%>
             </div>
+            <buddycondensed></buddycondensed>
         </div>
         <div class="navbar-collapse collapse" collapse="isCollapsed">
             <ul class="nav navbar-nav navbar-right right">

src/styles/components/_buddycondensed.scss

@@ -0,0 +1,40 @@
+/*
+ * Spreed WebRTC.
+ * Copyright (C) 2013-2014 struktur AG
+ *
+ * This file is part of Spreed WebRTC.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+.buddycondensed {
+  display: table-cell;
+  width: 380px;
+  &.buddy {
+    background: none;
+    border-bottom: none;
+    min-height: 50px;
+    padding-left: 20px;
+    vertical-align: bottom;
+    .buddyPicture {
+      margin: 2px;
+    }
+  }
+  .more {
+    padding-left: 10px;
+    font-weight: bold;
+  }
+}
+

src/styles/main.scss

@@ -38,6 +38,7 @@
 @import "components/rightslide";
 @import "components/bar";
 @import "components/buddylist";
+@import "components/buddycondensed";
 @import "components/buddypicturecapture";
 @import "components/buddypictureupload";
 @import "components/settings";

static/js/directives/buddycondensed.js

@@ -0,0 +1,96 @@
+/*
+ * Spreed WebRTC.
+ * Copyright (C) 2013-2014 struktur AG
+ *
+ * This file is part of Spreed WebRTC.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+define(['angular', 'text!partials/buddycondensed.html'], function(angular, template) {
+
+	// buddycondensed
+	return ["mediaStream", function(mediaStream) {
+
+		var controller = ['$scope', '$element', 'mediaStream', 'buddyList', 'buddyPicture', 'contacts', function($scope, $element, mediaStream, buddyList, buddyPicture, contacts) {
+			var buddycondensed = [];
+			var joined = function(buddy) {
+				buddycondensed.push(buddy);
+			};
+			var left = function(id) {
+				for (var i in buddycondensed) {
+					if(buddycondensed[i].Id === id) {
+						buddycondensed.splice(i,1);
+						break;
+					}
+				}
+				$scope.$apply();
+			};
+			var contactadded = function(data) {
+				// replace session data with contact data
+				console.log('contactadded', data);
+				var hasSession = false;
+				for (var i in buddycondensed) {
+					if(buddycondensed[i].Userid === data.Userid) {
+						buddycondensed[i] = angular.extend(buddycondensed[i], data);
+						hasSession = true;
+						break;
+					}
+				}
+				if(!hasSession) {
+					joined(data);
+				}
+				$scope.$apply();
+			};
+			$scope.list = function() {
+				return buddycondensed;
+			};
+			$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);
+				if (dataType === "Left") {
+					left(data.Id);
+				} else {
+					joined(data);
+				}
+			});
+			mediaStream.api.e.on("received.users", function(event, data) {
+				console.log("received.users", data);
+				var selfId = $scope.id;
+				data.forEach(function(x) {
+					if (x.Id !== selfId) {
+						joined(x);
+					}
+				});
+				$scope.$apply();
+			});
+		}];
+
+		var link = function($scope, elem, attrs, ctrl) {};
+
+		return {
+			restrict: 'E',
+			scope: true,
+			replace: true,
+			link: link,
+			controller: controller,
+			template: template
+		};
+
+	}];
+
+});

static/js/directives/directives.js

@@ -44,7 +44,8 @@ define([
 	'directives/presentation',
 	'directives/youtubevideo',
 	'directives/bfi',
-	'directives/title'], function(_, onEnter, onEscape, statusMessage, buddyList, buddyPictureCapture, buddyPictureUpload, settings, chat, audioVideo, usability, audioLevel, fileInfo, screenshare, roomBar, socialShare, page, contactRequest, defaultDialog, pdfcanvas, odfcanvas, presentation, youtubevideo, bfi, title) {
+	'directives/title',
+	'directives/buddycondensed'], function(_, onEnter, onEscape, statusMessage, buddyList, buddyPictureCapture, buddyPictureUpload, settings, chat, audioVideo, usability, audioLevel, fileInfo, screenshare, roomBar, socialShare, page, contactRequest, defaultDialog, pdfcanvas, odfcanvas, presentation, youtubevideo, bfi, title, buddycondensed) {
 
 	var directives = {
 		onEnter: onEnter,
@@ -70,7 +71,11 @@ define([
 		presentation: presentation,
 		youtubevideo: youtubevideo,
 		bfi: bfi,
+<<<<<<< HEAD
 		title: title
+=======
+		buddycondensed: buddycondensed
+>>>>>>> 4177988... Add buddycondensed directive and css.
 	};
 
 	var initialize = function(angModule) {

static/partials/buddycondensed.html

@@ -0,0 +1,6 @@
+<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>