Merge pull request #373 from nextcloud/feature/207/add_avatar_list_to…

…_sharing_dialog

add avatar to sharing dropdown

css/app/calendarlist.css

@@ -459,28 +459,22 @@ li.calendar-share-item span {
 }
 
 ul.dropdown-menu {
-	max-height: 100px;
+	max-height: 200px;
 	overflow-y: scroll;
+	overflow-x: hidden;
 	border: 1px #ddd solid;
-	border-radius: 0 0 3px 3px;
+	border-radius: 0 0 4px 4px;
 	margin-top: -7px;
 	margin-left: 6px;
-	width: 94%;
-}
-
-ul.dropdown-menu li {
-	height: 25px;
+	width: 89%;
 }
 
 ul.dropdown-menu li:last-child {
 	border-bottom: none !important;
 }
 
 #app-navigation ul.dropdown-menu a {
-	min-height: 22px;
-	max-height: 22px;
-	padding: 0 10px;
-	line-height: 2;
+	padding: 6px;
 }
 
 ul.dropdown-menu li > a:hover {

js/app/directives/avatarDirective.js

@@ -0,0 +1,32 @@
+/**
+ * Calendar App
+ *
+ * @author Georg Ehrke
+ * @copyright 2017 Georg Ehrke <oc.list@georgehrke.com>
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or any later version.
+ *
+ * This library 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 library. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+app.directive('avatar', function() {
+	'use strict';
+
+	return {
+		restrict: 'A',
+		scope: {},
+		link: function (scope, elm, attrs) {
+			$(elm).avatar(attrs.user, 32);
+		}
+	};
+});

templates/main.php

@@ -120,6 +120,17 @@
 		</span>
 	</script>
 
+	<script type="text/ng-template" id="customShareMatchTemplate.html">
+		<a tabindex="-1"
+		   ng-attr-title="{{ match.label }}">
+			<div class="share-autocomplete-item" title="{{ match.label }}">
+				<div class="avatardiv" data-user="{{ match.model.identifier }}" avatar></div>
+				<div class="autocomplete-item-text" ng-bind-html="match.label | uibTypeaheadHighlight:query"></div>
+			</div>
+
+		</a>
+	</script>
+
 	<?php if(!$_['isPublic']): ?>
 	<script type="text/ng-template" id="import.html">
 		<?php print_unescaped($this->inc('part.import.dialog')); ?>

templates/part.calendarlist.item.php

@@ -155,6 +155,7 @@ class="app-navigation-entry-menu hidden">
 		   type="text"
 		   typeahead-on-select="onSelectSharee($item, $model, $label, item.calendar)"
 		   typeahead-loading="loadingSharees"
+		   typeahead-template-url="customShareMatchTemplate.html"
 		   uib-typeahead="sharee.display for sharee in findSharee($viewValue, item.calendar)">
 	<ul class="calendar-share-list">
 		<li class="calendar-share-item"