CSS fix + preparation for the new peers photos

css/style.css

@@ -37,7 +37,7 @@
 	padding: 0 12px;
 }
 #app-mailbox-peers li > a {
-	display: block;
+	display: inline-block;
 	overflow: hidden;
 	-moz-box-sizing: border-box; box-sizing: border-box;
 	white-space: nowrap;

js/public/app.js

@@ -32,6 +32,24 @@ function arrayUnique(arr) {
 	});
 }
 
+// Imported from ownCloud contact app
+app.filter('peerColor', function() {
+	return function(input) {
+		// Check if core has the new color generator
+		if(typeof input.toHsl === 'function') {
+			var hsl = input.toHsl();
+			return 'hsl('+hsl[0]+', '+hsl[1]+'%, '+hsl[2]+'%)';
+		} else {
+			// If not, we use the old one
+			/* global md5 */
+			var hash = md5(input).substring(0, 4),
+				maxRange = parseInt('ffff', 16),
+				hue = parseInt(hash, 16) / maxRange * 256;
+			return 'hsl(' + hue + ', 90%, 65%)';
+		}
+	};
+});
+
 app.controller('OcSmsController', ['$scope', '$interval', '$timeout', '$compile',
 	function ($scope, $interval, $timeout, $compile) {
 		$scope.buttons = [

templates/main.php

@@ -10,8 +10,8 @@ use \OCA\OcSms\Lib\CountryCodes;
 	<div id="app-mailbox-peers">
 		<ul class="contact-list">
 			<li ng-repeat="contact in contacts" peer-label="{{ contact.label }}">
-				<div class="ocsms-plavatar" style="background-image: url('{{ contact.avatar }}');" ng-show="contact.avatar != ''"></div>
+				<div class="ocsms-plavatar" style="background-image: url('{{ contact.avatar }}');" ng-show="contact.avatar !== undefined"></div>
-				<div class="ocsms-plavatar" ng-show="contact.avatar == ''"></div>
+				<div class="ocsms-plavatar" ng-show="contact.avatar === undefined" ng-style="{'background-color': (contact.label | peerColor)}"></div>
 				<a class="ocsms-plname" style="{{ contact.unread > 0 ? 'font-weight:bold;' : ''}}" mailbox-label="{{ contact.label }}" mailbox-navigation="{{ contact.nav }}" ng-click="loadConversation(contact);" href="#">{{ contact.label }}{{ contact.unread > 0 ? ' (' + contact.unread + ') ' : '' }}</a>
 			</li>
 		</ul>