Unify avatar directive

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2018-01-08 13:35:49 +01:00
parent 403629c91a
commit e1e01c0e0d
6 changed files with 29 additions and 15 deletions

View File

@@ -996,6 +996,10 @@ input.input-inline {
padding: 16px; padding: 16px;
opacity: 0.5; opacity: 0.5;
} }
&.has-contactsmenu img {
cursor: pointer;
}
} }
.avatardiv-container { .avatardiv-container {

View File

@@ -23,15 +23,27 @@
app.directive('avatar', function() { app.directive('avatar', function() {
'use strict'; 'use strict';
return { return {
restrict: 'A', restrict: 'AEC',
scope: true, 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){ link: function(scope, element, attr){
scope.uid = attr.displayname;
scope.displayname = attr.displayname;
var value = attr.user; var value = attr.user;
$(element).wrap('<div class="avatardiv-container"></div>'); var avatardiv = $(element).find('.avatardiv');
if(attr.contactsmenu && oc_current_user !== value) { if(typeof attr.contactsmenu !== 'undefined' && attr.contactsmenu !== 'false' && oc_current_user !== value) {
$(element).contactsMenu(value, 0, $(element).parent()); 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 () {} controller: function () {}
}; };

View File

@@ -25,15 +25,14 @@ app.directive('contactsmenudelete', function() {
return { return {
restrict: 'A', restrict: 'A',
priority: 1, priority: 1,
scope: true,
link: function(scope, element, attr){ link: function(scope, element, attr){
var user = attr.user; var user = attr.user;
var menu = $(element).parent().find('.contactsmenu-popover'); 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>'); var menuEntry = $('<li><a><span class="icon icon-delete"></span><span>' + t('deck', 'Remove user from card') + '</span></a></li>');
menuentry.on('click', function () { menuEntry.on('click', function () {
scope.removeAssignedUser(user); scope.removeAssignedUser(user);
}); });
$(menu).append(menuentry); $(menu).append(menuEntry);
} }
}; };
}); });

View File

@@ -82,7 +82,7 @@
</span> </span>
<div class="card-assigned-users"> <div class="card-assigned-users">
<div class="assigned-user" ng-repeat="user in c.assignedUsers | limitTo: 3"> <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> </div>
<div class="app-popover-menu-utils" ng-if="!boardservice.isArchived()"> <div class="app-popover-menu-utils" ng-if="!boardservice.isArchived()">

View File

@@ -41,8 +41,8 @@
</td> </td>
<td> <td>
<div id="assigned-users"> <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> <avatar data-user="{{ b.owner.uid }}" data-displayname="{{ b.owner.displayname }}"></avatar>
<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="{{ acl.participant.uid }}" data-displayname="{{ acl.participant.displayname }}" ng-repeat="acl in b.acl | limitTo: 7"></avatar>
</div> </div>
</td> </td>
<td> <td>

View File

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