Merge pull request #376 from nextcloud/fix-avatar-stuff

Fix avatar issues

css/style.scss

@@ -724,19 +724,9 @@ input.input-inline {
 				.avatardiv-container {
 					margin-right: 5px;
 				}
-				.icon-delete {
-					display: none;
-					position: absolute;
-					top: 8px;
-					left: 8px;
-				}
-				&:hover .icon-delete {
-					display: inline-block;
-					cursor: pointer;
-				}
-				&:hover .avatardiv {
-					opacity: .7;
-				}
+			}
+			.tooltip {
+				z-index: 998;
 			}
 		}
 	}
@@ -1010,6 +1000,10 @@ input.input-inline {
 		padding: 16px;
 		opacity: 0.5;
 	}
+
+	&.has-contactsmenu img {
+		cursor: pointer;
+	}
 }
 
 .avatardiv-container {

js/controller/CardController.js

@@ -170,8 +170,8 @@ app.controller('CardController', function ($scope, $rootScope, $routeParams, $lo
 		$scope.status.showAssignUser = false;
 	};
 
-	$scope.removeAssignedUser = function(item) {
-		CardService.unassignUser(CardService.getCurrent(), item.participant.uid).then(function (data) {
+	$scope.removeAssignedUser = function(uid) {
+		CardService.unassignUser(CardService.getCurrent(), uid).then(function (data) {
 			StackService.updateCard(CardService.getCurrent());
 		});
 	};

js/directive/avatar.js

@@ -23,15 +23,28 @@
 app.directive('avatar', function() {
 	'use strict';
 	return {
-		restrict: 'A',
-		scope: true,
+		restrict: 'AEC',
+		transclude: true,
+		replace: true,
+		template: '<div class="avatardiv-container"><div class="avatardiv" data-toggle="tooltip" ng-transclude></div></div>',
+		scope: { attr: '=' },
 		link: function(scope, element, attr){
+			scope.uid = attr.displayname;
+			scope.displayname = attr.displayname;
 			var value = attr.user;
-			$(element).wrap('<div class="avatardiv-container"></div>');
-			if(attr.contactsmenu && oc_current_user !== value) {
-				$(element).contactsMenu(value, 0, $(element).parent());
+			var avatardiv = $(element).find('.avatardiv');
+			if(typeof attr.contactsmenu !== 'undefined' && attr.contactsmenu !== 'false' && oc_current_user !== value) {
+				avatardiv.contactsMenu(value, 0, $(element));
+				avatardiv.addClass('has-contactsmenu');
 			}
-			$(element).avatar(value, 32, false, false, false, attr.displayname);
-		}
+			if(typeof attr.tooltip !== 'undefined' && attr.tooltip !== 'false') {
+				$(element).tooltip({
+					title: scope.displayname,
+					placement: 'top'
+				});
+			}
+			avatardiv.avatar(value, 32, false, false, false, attr.displayname);
+		},
+		controller: function () {}
 	};
 });

js/directive/contactsmenudelete.js

@@ -0,0 +1,38 @@
+/*
+ * @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ *  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/>.
+ *
+ */
+
+app.directive('contactsmenudelete', function() {
+	'use strict';
+	return {
+		restrict: 'A',
+		priority: 1,
+		link: function(scope, element, attr){
+			var user = attr.user;
+			var menu = $(element).parent().find('.contactsmenu-popover');
+			var menuEntry = $('<li><a><span class="icon icon-delete"></span><span>' + t('deck', 'Remove user from card') + '</span></a></li>');
+			menuEntry.on('click', function () {
+				scope.removeAssignedUser(user);
+			});
+			$(menu).append(menuEntry);
+		}
+	};
+});

templates/main.php

@@ -46,7 +46,7 @@ if(!\OC::$server->getConfig()->getSystemValue('debug', false)) {
 	$js = [
 		'app' => ['App', 'Config', 'Run'],
 		'controller' => ['AppController', 'BoardController', 'CardController', 'ListController'],
-		'directive' => ['appnavigationentryutils', 'appPopoverMenuUtils', 'autofocusoninsert', 'avatar', 'elastic', 'search', 'datepicker', 'timepicker'],
+		'directive' => ['appnavigationentryutils', 'appPopoverMenuUtils', 'autofocusoninsert', 'avatar', 'contactsmenudelete', 'elastic', 'search', 'datepicker', 'timepicker'],
 		'filters' => ['boardFilterAcl', 'cardFilter', 'cardSearchFilter', 'iconWhiteFilter', 'lightenColorFilter', 'orderObjectBy', 'dateFilters', 'textColorFilter', 'withoutAssignedUsers'],
 		'service' => ['ApiService', 'BoardService', 'CardService', 'LabelService', 'StackService', 'StatusService'],
 	];

templates/part.board.mainView.php

@@ -82,7 +82,7 @@
 							</span>
 							<div class="card-assigned-users">
 								<div class="assigned-user" ng-repeat="user in c.assignedUsers | limitTo: 3">
-									<div class="avatardiv" avatar ng-attr-user="{{ user.participant.uid }}" ng-attr-displayname="{{ user.participant.displayname }}" data-toggle="tooltip" data-placement="bottom" title="{{ user.participant.displayname }}"></div>
+									<avatar data-user="{{ user.participant.uid }}" data-displayname="{{ user.participant.displayname }}" data-tooltip></avatar>
 								</div>
 							</div>
 							<div class="app-popover-menu-utils" ng-if="!boardservice.isArchived()">

templates/part.boardlist.php

@@ -41,8 +41,8 @@
 			</td>
 			<td>
 				<div id="assigned-users">
-					<div class="avatardiv" avatar data-user="{{ b.owner.uid }}" data-displayname="{{ b.owner.displayname }}" data-toggle="tooltip" title="{{ b.owner.displayname }}"></div>
-					<div class="avatardiv" avatar data-contactsmenu="true" data-user="{{ acl.participant.uid }}" data-displayname="{{ acl.participant.displayname }}" data-toggle="tooltip" title="{{ acl.participant.displayname }}" ng-repeat="acl in b.acl | limitTo: 7"></div>
+					<avatar data-contactsmenu data-tooltip data-user="{{ b.owner.uid }}" data-displayname="{{ b.owner.displayname }}"></avatar>
+					<avatar data-contactsmenu data-tooltip data-user="{{ acl.participant.uid }}" data-displayname="{{ acl.participant.displayname }}" ng-repeat="acl in b.acl | limitTo: 7"></avatar>
 				</div>
 			</td>
 			<td>

templates/part.card.php

@@ -66,10 +66,8 @@
 			</ui-select-choices>
 	</ui-select>
 		<div class="card-details-assign-users-list">
-			<div class="assigned-user" ng-repeat="user in cardservice.getCurrent().assignedUsers"
-				data-toggle="tooltip" data-placement="bottom" title="{{ user.participant.displayname }}">
-				<div class="avatardiv" avatar data-contactsmenu="true" ng-attr-user="{{ user.participant.uid }}" ng-attr-displayname="{{ user.participant.uid }}"></div>
-				<div class="icon icon-delete" ng-click="removeAssignedUser(user)"></div>
+			<div class="assigned-user" ng-repeat="user in cardservice.getCurrent().assignedUsers">
+				<avatar ng-attr-contactsmenu ng-attr-tooltip ng-attr-user="{{ user.participant.uid }}" ng-attr-displayname="{{ user.participant.displayname }}" contactsmenudelete ></avatar>
 			</div>
 		</div>
 	</div>