Merge branch 'contacts-manager' of https://github.com/theurere/spreed-webrtc-pub into theurere-contacts-manager

Conflicts:
	static/css/main.min.css

src/styles/components/_contactsmanager.scss

@@ -0,0 +1,104 @@
+/*
+ * 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/>.
+ *
+ */
+
+.contactsmanager {
+  .head {
+    margin-bottom: 10px;
+  }
+  .desc {
+    font-size: 20px;
+    font-weight: normal;
+    text-align: baseline;
+  }
+  .addbtn {
+    font-size: 14px;
+    .fa-users {
+      font-size: 22px;
+    }
+    .fa-plus {
+      font-size: 15px;
+    }
+  }
+  .editpicture {
+    vertical-align: middle;
+    float: left;
+    margin-right: 20px;
+  }
+  .uploadbtn {
+    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;
+    }
+  }
+  .editlist {
+    max-height: 250px;
+    overflow-y: auto;
+  }
+  .table {
+    margin-bottom: 0px;
+    tr:first-child td {
+      border-top: none;
+    }
+    .picture {
+      width: 15%;
+      min-height: 46px;
+      text-align: center;
+      vertical-align: middle;
+    }
+    .name {
+      width: 70%;
+      text-align: left;
+      vertical-align: middle;
+    }
+    .action {
+      text-align: center;
+      vertical-align: middle;
+    }
+  }
+}
+
+.search {
+  &:before {
+    position: absolute;
+    font-family: "fontAwesome";
+    content: "\f002";
+    font-size: 14px;
+    opacity: .4;
+    top: 6px;
+    left: 22px;
+  }
+  ~ input {
+    padding-left: 25px;
+  }
+}

src/styles/main.scss

@@ -48,5 +48,6 @@
 @import "components/screenshare";
 @import "components/roombar";
 @import "components/social";
+@import "components/contactsmanager";
 
 @import "shame";

static/js/directives/contactsmanager.js

@@ -0,0 +1,68 @@
+/*
+ * 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/contactsmanagerbutton.html', 'text!partials/contactsmanager.html'], function($, _, templateContactsManagerButton, templateContactsManager) {
+
+	return ['contacts', 'alertify', function(contacts, alertify) {
+
+		var contactsManagerController = ['$scope', '$modalInstance', 'contactData', 'data', 'defaultModalController', function($scope, $modalInstance, contactData, data, defaultModalController) {
+			$scope.contacts = [];
+			$scope.search = {};
+
+			var getContacts = function() {
+				$scope.contacts = contactData.getAll();
+			};
+			getContacts();
+			contacts.e.on('contactadded', function() {
+				getContacts();
+			});
+
+			// Set state based on default controller
+			defaultModalController[3]($scope, $modalInstance, data);
+		}];
+
+		var controller = ['$scope', '$modal', function($scope, $modal) {
+			var windowClass = 'contactsmanager';
+			var modalController = contactsManagerController;
+
+			$scope.contactsManager = function() {
+				alertify.dialog.buildCustom({
+					'windowClass': windowClass,
+					'header': _('Contacts Manager'),
+					'bodydom': templateContactsManager,
+					'footerdom': null,
+					'controller': modalController
+				});
+			};
+		}];
+
+		var link = function($scope, $element) {};
+
+		return {
+			scope: true,
+			restrict: 'E',
+			replace: true,
+			template: templateContactsManagerButton,
+			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/alertify.js

@@ -60,6 +60,9 @@ define(["angular"], function(angular) {
 
 		// Add new template for prompt.
 		$templateCache.put('/dialogs/prompt.html', '<div class="modal-header"><h4 class="modal-title"><span class="fa fa-star"></span> <span ng-bind-html="header"></span></h4></div><div class="modal-body"><ng-form name="promptDialog" novalidate role="form"><div class="form-group input-group-lg" ng-class="{true: \'has-error\'}[promptDialog.text.$dirty && promptDialog.text.$invalid]"><label class="control-label"></label><input type="text" id="{{id}}" class="form-control" name="text" ng-model="input.text" ng-keyup="hitEnter($event)" required></div></ng-form></div><div class="modal-footer"><button type="button" class="btn btn-default" ng-click="cancel()">{{cancelButtonLabel}}</button><button type="button" class="btn btn-primary" ng-click="save()" ng-disabled="(promptDialog.$dirty && promptDialog.$invalid) || promptDialog.$pristine">{{okButtonLabel}}</button></div>');
+		$templateCache.put('/base/headerdom.html', '<div class="modal-header"><button type="button" class="close" ng-click="close()">×</button><h4 class="modal-title" ng-bind-html="header"></h4></div>');
+		$templateCache.put('/base/bodydom.html', '<div class="modal-body" ng-bind-html="msg"></div>');
+		$templateCache.put('/base/footerdom.html', '<div class="modal-footer"><button type="button" class="btn btn-default" ng-click="close()">{{_("Close")}}</button></div>');
 
 		var defaultMessages = {
 			error: translation._("Error"),
@@ -143,6 +146,40 @@ define(["angular"], function(angular) {
 						}
 					}, 100);
 				});
+			},
+			buildCustom: function(data) {
+				var modaldom = '';
+
+				if (data.headerdom) {
+					modaldom += data.headerdom;
+				} else {
+					modaldom += $templateCache.get('/base/headerdom.html');
+				}
+
+				if (data.bodydom) {
+					modaldom += data.bodydom;
+				} else {
+					modaldom += $templateCache.get('/base/bodydom.html');
+				}
+
+				if (data.footerdom === undefined) {
+					modaldom += $templateCache.get('/base/footerdom.html');
+				// footer should not be included
+				} else if (data.footerdom === null) {
+					modaldom += '';
+				} else {
+					modaldom += data.footerdom;
+				}
+
+				$modal.open({
+					template: modaldom,
+					controller: data.controller || modalController,
+					resolve: {
+						data: function() { return data; },
+						defaultModalController: function() { return modalController; }
+					},
+					windowClass: data.windowClass || ''
+				});
 			}
 		};
 

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;
+			},
+			getAll: function() {
+				return _.values(contacts);
 			}
 		};
 

static/partials/contactsmanager.html

@@ -0,0 +1,26 @@
+<div class="modal-body">
+  <div class="row head">
+     <div class="col-xs-7" ng-if="contacts.length === 0">
+      <p>{{_('You have no contacts.')}}</p>
+    </div>
+  </div>
+  <div class="row" ng-if="contacts.length > 0">
+    <div class="col-xs-12">
+      <div class="editlist nicescroll">
+        <table class="table table-hover table-condensed">
+          <tbody>
+            <tr ng-repeat="contact in contacts">
+              <td class="picture">
+                <img ng-show="contact.Status.buddyPicture" ng-src="{{contact.Status.buddyPicture}}">
+                <div ng-show="!contact.Status.buddyPicture" class="buddyPicture"></div>
+              </td>
+              <td class="name">
+                <span>{{contact.Status.displayName}}</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>

static/partials/contactsmanagerbutton.html

@@ -0,0 +1,6 @@
+<div class="form-group" ng-if="userid">
+  <label class="col-xs-4 control-label">{{_('Contacts')}}</label>
+  <div class="col-xs-8">
+    <button class="btn btn-success" ng-click="contactsManager()">{{_('Manage Contacts')}}</button>
+  </div>
+</div>

static/partials/settings.html

@@ -67,6 +67,7 @@
               </div>
             </div>
           </div>
+          <contacts-manager/>
         </div>
       </div>
       <div ng-show="mediaSources.supported || isChrome">
@@ -134,9 +135,9 @@
             <label class="col-xs-4 control-label">{{_('Stereo audio')}}</label>
             <div class="col-xs-8">
               <div class="checkbox">
-              	<label>
+               <label>
-                	<input type="checkbox" ng-model="user.settings.stereo"/>
+                  <input type="checkbox" ng-model="user.settings.stereo"/>
-            	</label>
+               </label>
               </div>
             </div>
           </div>
@@ -168,7 +169,7 @@
       </div>
 
       <div class="form-group">
-      	<div class="col-xs-4 control-label"></div>
+         <div class="col-xs-4 control-label"></div>
         <div class="col-xs-8">
           <a ng-click="showAdvancedSettings = !showAdvancedSettings"><span ng-show="showAdvancedSettings">{{_('Show advanced settings')}}</span><span ng-hide="showAdvancedSettings">{{_('Hide advanced settings')}}</span></a>
         </div>
@@ -177,12 +178,12 @@
       <hr/>
 
       <div class="form-group">
-      	<div class="col-xs-4 control-label"></div>
+         <div class="col-xs-4 control-label"></div>
-      	<div class="col-xs-8">
+         <div class="col-xs-8">
           <div class="checkbox" style="padding-bottom:1em">
-          	<label>
+            <label>
-            	<input type="checkbox" ng-model="rememberSettings"> {{_('Remember settings')}}
+               <input type="checkbox" ng-model="rememberSettings"> {{_('Remember settings')}}
-        	  </label>
+           </label>
             <p class="text-warning" style="margin-top:4px" ng-show="userid &&!rememberSettings && loadedUserlogin"><strong>{{_('Your ID will still be kept - press the log out button above to delete the ID.')}}</strong></p>
           </div>
           <a ng-click="layout.settings=false" class="btn btn-default">{{_('Close')}}</a>