List contacts in contacts manager.

src/styles/components/_contactsmanager.scss

@@ -45,6 +45,22 @@
   .contactsUploadPicBtn {
     margin-top: 7px;
   }
+  .buddyPicture {
+    position: relative;
+    width: 46px;
+    height: 46px;
+    background: $actioncolor1;
+    border-radius: 2px;
+    margin: 0 auto;
+    &:after {
+        content: "\f007";
+        color: $actioncolor2;
+        font-family: fontAwesome;
+        font-size: 3em;
+        position: relative;
+        top: -6px;
+    }
+  }
 }
 
 .search {
@@ -86,12 +102,3 @@
     vertical-align: middle;
   }
 }
-
-.userAvatar {
-  position: relative;
-  width: 46px;
-  height: 46px;
-  background: grey;
-  border-radius: 2px;
-  margin: 0 auto;
-}

static/js/directives/contactsmanager.js

@@ -0,0 +1,52 @@
+/*
+ * 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(['jquery', 'underscore', 'text!partials/contactsmanager.html'], function($, _, templateContactsManager) {
+
+	return [function() {
+
+		var contactsManagerController = ['$scope', '$modalInstance', 'contactData', function($scope, $modalInstance, contactData) {
+			$scope.contacts = contactData.getAllContacts();
+			$scope.close = function() {
+				$modalInstance.close('Close');
+			};
+		}];
+
+		var controller = ['$scope', '$modal', function($scope, $modal) {
+			$scope.contactsManager = function() {
+				$modal.open({
+					template: templateContactsManager,
+					controller: contactsManagerController,
+					windowClass: 'contactsManager'
+				});
+			};
+		}];
+
+		var link = function($scope, $element) {};
+
+		return {
+			scope: true,
+			restrict: 'E',
+			controller: controller,
+			link: link
+		};
+	}];
+
+});

static/js/directives/directives.js

@@ -36,7 +36,8 @@ define([
 	'directives/roombar',
 	'directives/socialshare',
 	'directives/page',
-	'directives/contactrequest'], function(_, onEnter, onEscape, statusMessage, buddyList, buddyPicture, settings, chat, audioVideo, usability, audioLevel, fileInfo, screenshare, roomBar, socialShare, page, contactRequest) {
+	'directives/contactrequest',
+	'directives/contactsmanager'], function(_, onEnter, onEscape, statusMessage, buddyList, buddyPicture, settings, chat, audioVideo, usability, audioLevel, fileInfo, screenshare, roomBar, socialShare, page, contactRequest, contactsManager) {
 
 	var directives = {
 		onEnter: onEnter,
@@ -54,7 +55,8 @@ define([
 		roomBar: roomBar,
 		socialShare: socialShare,
 		page: page,
-		contactRequest: contactRequest
+		contactRequest: contactRequest,
+		contactsManager: contactsManager
 	};
 
 	var initialize = function(angModule) {

static/js/services/contactdata.js

@@ -63,7 +63,7 @@ define(['underscore', 'jquery'], function(underscore, $) {
 				var userid = data.Userid;
 				var id;
 				if (users.hasOwnProperty(userid)) {
-					id = users[userid]
+					id = users[userid];
 				} else {
 					id = String(count++);
 					users[userid] = id;
@@ -88,12 +88,15 @@ define(['underscore', 'jquery'], function(underscore, $) {
 			},
 			getById: function(id) {
 				if (id.indexOf("contact-") === 0) {
-					id = id.substr(8)
+					id = id.substr(8);
 				}
 				if (contacts.hasOwnProperty(id)) {
 					return contacts[id];
 				}
-				return null
+				return null;
+			},
+			getAllContacts: function() {
+				return contacts;
 			}
 		};
 

static/partials/contactsmanager.html

@@ -1,5 +1,5 @@
 <div class="modal-header">
-  <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">{{_('Close')}}</span></button>
+  <button type="button" class="close" ng-click="close()"><span aria-hidden="true">×</span></button>
   <h4 class="modal-title" id="myModalLabel">
     {{_('Contacts Manager')}}
   </h4>
@@ -9,7 +9,7 @@
     <div class="col-xs-offset-7 col-xs-5">
       <div class="pull-right">
       <button class="btn btn-success contactsAddBtn">
-        Find new contacts&nbsp;
+        {{_('Find new contacts')}}&nbsp;
         <i class="fa fa-users"></i>
         <i class="fa fa-plus"></i>
       </button>
@@ -20,70 +20,16 @@
     <div class="col-xs-12 contactsEditList">
       <table class="table table-bordered table-hover table-condensed contactsTable">
         <tbody>
-          <tr>
+          <tr ng-repeat="contact in contacts">
             <td class="picture">
-              <div class="userAvatar"></div>
+              <img ng-show="contact.Status.buddyPicture" ng-src="{{contact.Status.buddyPicture}}">
+              <div ng-show="!contact.Status.buddyPicture" class="buddyPicture"></div>
             </td>
             <td class="name">
-              Mike
+              <span>{{contact.Status.displayName}}</span>
             </td>
             <td class="action">
-              <button class="btn btn-info">{{_('Edit')}}</button>
+              <button class="btn btn-primary">{{_('Edit')}}</button>
-            </td>
-          </tr>
-          <tr>
-            <td class="picture">
-              <div class="userAvatar"></div>
-            </td>
-            <td class="name">
-              Mike
-            </td>
-            <td class="action">
-              <button class="btn btn-info">Edit</button>
-            </td>
-          </tr>
-          <tr>
-            <td class="picture">
-              <div class="userAvatar"></div>
-            </td>
-            <td class="name">
-              Mike
-            </td>
-            <td class="action">
-              <button class="btn btn-info">Edit</button>
-            </td>
-          </tr>
-          <tr>
-            <td class="picture">
-              <div class="userAvatar"></div>
-            </td>
-            <td class="name">
-              Mike
-            </td>
-            <td class="action">
-              <button class="btn btn-info">Edit</button>
-            </td>
-          </tr>
-          <tr>
-            <td class="picture">
-              <div class="userAvatar"></div>
-            </td>
-            <td class="name">
-              Mike
-            </td>
-            <td class="action">
-              <button class="btn btn-info">Edit</button>
-            </td>
-          </tr>
-          <tr>
-            <td class="picture">
-              <div class="userAvatar"></div>
-            </td>
-            <td class="name">
-              Mike
-            </td>
-            <td class="action">
-              <button class="btn btn-info">Edit</button>
             </td>
           </tr>
         </tbody>

static/partials/settings.html

@@ -69,14 +69,16 @@
           </div>
         </div>
       </div>
-      <div ng-if="userid">
+      <contacts-manager>
-        <legend>{{_('Contacts')}}</legend>
+        <div ng-if="userid">
-        <div class="form-group">
+          <legend>{{_('Contacts')}}</legend>
-          <div class="col-xs-8 col-xs-offset-4">
+          <div class="form-group">
-            <button class="btn btn-success" ng-click="contactsManager()">{{_('Contacts Manager')}}</button>
+            <div class="col-xs-8 col-xs-offset-4">
+              <button class="btn btn-success" ng-click="contactsManager()">{{_('Contacts Manager')}}</button>
+            </div>
           </div>
         </div>
-      </div>
+      <contacts-manager/>
       <div ng-show="mediaSources.supported || isChrome">
         <legend>{{_('Media')}}</legend>
         <div ng-show="mediaSources.supported">