(js) Improve sgAvatarImage
parent
0a75f5c4f7
commit
3bbd61cfd2
|
@ -81,17 +81,11 @@
|
|||
<div ng-repeat="user in app.users">
|
||||
<md-list-item ng-class="{ 'sg-collapsed': user.uid != app.selectedUser.uid,
|
||||
'sg-expanded': user.uid == app.selectedUser.uid }"
|
||||
ng-click="app.selectUser($index)">
|
||||
ng-click="app.selectUser($index)"
|
||||
aria-label="{{::user.c_email}}">
|
||||
<sg-avatar-image class="md-avatar"
|
||||
ng-if="::user.isGroup === 0"
|
||||
sg-email="::user.c_email"
|
||||
size="40">
|
||||
<!-- contact avatar -->
|
||||
</sg-avatar-image>
|
||||
<div class="sg-list-avatar"
|
||||
ng-show="::user.isGroup">
|
||||
<!-- list avatar -->
|
||||
</div>
|
||||
size="40">{{::user.$avatarIcon}}</sg-avatar-image>
|
||||
<div class="sg-tile-content">
|
||||
<div class="sg-md-subhead">
|
||||
<div>{{::user.cn}}</div>
|
||||
|
|
|
@ -25,10 +25,8 @@
|
|||
<md-toolbar flex-none="flex-none">
|
||||
<div layout="row">
|
||||
<sg-avatar-image class="md-tile-left"
|
||||
ng-show="acl.user.isGroup === 0"
|
||||
sg-email="::acl.user.c_email"
|
||||
size="40"><!-- avatar --></sg-avatar-image>
|
||||
<div class="sg-list-avatar" ng-show="acl.user.isGroup"><!--list avatar--></div>
|
||||
size="40">{{acl.user.$avatarIcon}}</sg-avatar-image>
|
||||
<div class="msg-header-content">
|
||||
<h1 ng-class="{ 'sg-md-display-2--thin': isGtMedium,
|
||||
'sg-md-title': !isGtMedium }">{{::acl.user.cn}}</h1>
|
||||
|
|
|
@ -463,22 +463,10 @@
|
|||
label:aria-label="Toggle item"
|
||||
ng-class="{ 'sg-avatar-selected': currentCard.selected }"
|
||||
ng-click="addressbook.toggleCardSelection($event, currentCard)">
|
||||
<!-- <div class="md-avatar sg-avatar-selected" -->
|
||||
<!-- ng-if="currentCard.selected"> -->
|
||||
<!-- selected avatar -->
|
||||
<!-- </div> -->
|
||||
<sg-avatar-image
|
||||
aria-disabled="true"
|
||||
ng-if="currentCard.$isCard()"
|
||||
sg-email="currentCard.$preferredEmail(addressbook.selectedFolder.constructor.$query.value)"
|
||||
sg-src="currentCard.photoURL"
|
||||
size="40">
|
||||
<!-- contact avatar -->
|
||||
</sg-avatar-image>
|
||||
<div class="md-avatar sg-avatar-list"
|
||||
ng-show="currentCard.$isList()">
|
||||
<!-- list avatar -->
|
||||
</div>
|
||||
size="40">{{ currentCard.$avatarIcon }}</sg-avatar-image>
|
||||
</div>
|
||||
<div class="sg-progress-linear-bottom"
|
||||
ng-show="currentCard.$isLoading()">
|
||||
|
|
|
@ -57,15 +57,10 @@
|
|||
</md-card-actions>
|
||||
<md-card-content>
|
||||
<header class="msg-header">
|
||||
<div ng-show="editor.card.c_component == 'vcard'">
|
||||
<sg-avatar-image class="md-avatar md-tile-left"
|
||||
sg-email="editor.card.$preferredEmail()"
|
||||
sg-src="editor.card.photoURL"
|
||||
size="40"><!-- avatar --></sg-avatar-image>
|
||||
</div>
|
||||
<div class="md-tile-left md-avatar sg-avatar-list" ng-show="editor.card.$isList()">
|
||||
<!--list avatar-->
|
||||
</div>
|
||||
size="40">{{ editor.card.$avatarIcon }}</sg-avatar-image>
|
||||
<div class="msg-header-content">
|
||||
<h1 class="sg-md-display-2--thin" ng-bind-html="editor.card.$fullname({html: true})"><!-- fullname --></h1>
|
||||
<h6 class="sg-md-display-2-subheader--thin">{{editor.card.$description()}}</h6>
|
||||
|
@ -93,9 +88,7 @@
|
|||
<md-list-item class="md-2-line" ng-repeat="ref in editor.card.refs track by ref.reference">
|
||||
<sg-avatar-image class="md-tile-left"
|
||||
sg-email="ref.$preferredEmail()"
|
||||
size="48">
|
||||
<!-- contact avatar -->
|
||||
</sg-avatar-image>
|
||||
size="48">person</sg-avatar-image>
|
||||
<div class="md-list-item-text">
|
||||
<h3>
|
||||
<a ui-sref="app.addressbook.card.view({cardId: ref.reference})">{{ ref.$fullname() }}</a>
|
||||
|
|
|
@ -39,13 +39,9 @@
|
|||
'sg-expanded': user.uid == subscribe.selectedUser.uid }">
|
||||
<md-button ng-click="subscribe.selectUser($index)">
|
||||
<div layout="row" layout-align="start center" class="md-flex">
|
||||
<span class="card-picture" ng-switch="user.isGroup">
|
||||
<sg-avatar-image class="md-avatar"
|
||||
ng-switch-when="0"
|
||||
sg-email="user.c_email"
|
||||
size="40"><!-- avatar --></sg-avatar-image>
|
||||
<div ng-switch-when="1" class="md-avatar sg-avatar-list"><!-- list avatar --></div>
|
||||
</span>
|
||||
size="40">{{ user.$avatarIcon }}</sg-avatar-image>
|
||||
<div class="sg-tile-content">
|
||||
<div class="sg-md-subhead"><div>{{user.cn}}</div></div>
|
||||
<div class="sg-md-body"><div>{{user.c_email}}</div></div>
|
||||
|
|
|
@ -260,7 +260,7 @@
|
|||
readonly="true">
|
||||
<md-chip-template>
|
||||
<div class="md-contact-avatar">
|
||||
<sg-avatar-image sg-email="$chip.email" size="32"><!-- avatar --></sg-avatar-image>
|
||||
<sg-avatar-image sg-email="$chip.email" size="32">person</sg-avatar-image>
|
||||
</div>
|
||||
<div class="md-contact-name">{{$chip.name}}</div>
|
||||
<md-icon ng-class="'icon-' + $chip.partstat"><!-- partstat --></md-icon>
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
<!-- from -->
|
||||
<sg-avatar-image class="hide-xs"
|
||||
sg-email="editor.message.editable.from"
|
||||
size="32"><!-- avatar --></sg-avatar-image>
|
||||
size="32">person</sg-avatar-image>
|
||||
<md-input-container class="sg-no-wrap">
|
||||
<label><var:string label:value="From"/></label>
|
||||
<md-select name="from"
|
||||
|
|
|
@ -288,7 +288,7 @@
|
|||
ng-click="mailbox.toggleMessageSelection($event, currentMessage)">
|
||||
<sg-avatar-image
|
||||
sg-email="mailbox.service.selectedFolder.type == 'sent' ? currentMessage.to[0].email : currentMessage.from[0].email"
|
||||
size="40"><!-- avatar --></sg-avatar-image>
|
||||
size="40">person</sg-avatar-image>
|
||||
</div>
|
||||
<div class="sg-category"
|
||||
ng-repeat="tag in currentMessage.flags | limitTo:5"
|
||||
|
|
|
@ -52,7 +52,7 @@
|
|||
<div layout="row" layout-align="start center" class="md-flex card-picture">
|
||||
<sg-avatar-image class="md-avatar"
|
||||
sg-email="user.c_email"
|
||||
size="40"><!-- avatar --></sg-avatar-image>
|
||||
size="40">person</sg-avatar-image>
|
||||
<div class="sg-tile-content">
|
||||
<div class="sg-md-subhead"><div>{{user.cn}}</div></div>
|
||||
<div class="sg-md-body"><div>{{user.c_email}}</div></div>
|
||||
|
|
|
@ -127,9 +127,7 @@
|
|||
<div layout="row" layout-align="start center">
|
||||
<sg-avatar-image class="md-tile-left"
|
||||
sg-email="viewer.message.from[0].email"
|
||||
size="40">
|
||||
<!-- contact avatar -->
|
||||
</sg-avatar-image>
|
||||
size="40">person</sg-avatar-image>
|
||||
<div class="md-list-item-text">
|
||||
<span>{{ viewer.message.from[0].name }}</span><br/>
|
||||
<a href="#" class="md-caption"
|
||||
|
|
|
@ -266,7 +266,7 @@
|
|||
readonly="true">
|
||||
<md-chip-template>
|
||||
<div class="md-contact-avatar">
|
||||
<sg-avatar-image sg-email="$chip.email" size="32"><!-- avatar --></sg-avatar-image>
|
||||
<sg-avatar-image sg-email="$chip.email" size="32">person</sg-avatar-image>
|
||||
</div>
|
||||
<div class="md-contact-name">{{$chip.name || $chip.email}}</div>
|
||||
<md-icon ng-class="'icon-' + $chip.partstat"><!-- partstat --></md-icon>
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
<md-list-item ng-repeat="currentAttendee in editor.component.attendees track by currentAttendee.email">
|
||||
<sg-avatar-image class="md-avatar"
|
||||
sg-email="currentAttendee.email"
|
||||
size="40"><!-- avatar --></sg-avatar-image>
|
||||
size="40">person</sg-avatar-image>
|
||||
<div class="sg-tile-content">
|
||||
<div class="sg-md-subhead"><div>{{currentAttendee.name}}</div></div>
|
||||
<div class="sg-md-body"><div>{{currentAttendee.email}}</div></div>
|
||||
|
|
|
@ -51,15 +51,11 @@
|
|||
ng-class="{ 'sg-expanded': user.uid == acl.selectedUid }">
|
||||
<a class="md-flex md-button" ng-click="acl.selectUser(user, $event)">
|
||||
<div layout="row" layout-align="start center">
|
||||
<span class="card-picture" ng-switch="user.userClass">
|
||||
<div ng-switch-when="normal-user">
|
||||
<div class="card-picture">
|
||||
<sg-avatar-image class="md-avatar"
|
||||
sg-email="user.c_email"
|
||||
size="40"><!-- avatar --></sg-avatar-image>
|
||||
size="40">{{ user.$avatarIcon }}</sg-avatar-image>
|
||||
</div>
|
||||
<div ng-switch-when="normal-group" class="md-avatar sg-avatar-list"><!-- normal-group --></div>
|
||||
<div ng-switch-when="public-user" class="md-avatar sg-avatar-list"><!-- public-user --></div>
|
||||
</span>
|
||||
<div class="sg-tile-content">
|
||||
<div class="sg-md-subhead"><div>{{user.cn}}</div></div>
|
||||
<div class="sg-md-body"><div>{{user.c_email}}</div></div>
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
<md-toolbar class="sg-padded md-hue-2 md-tall" flex-none="flex-none">
|
||||
<sg-avatar-image class="md-tile-left"
|
||||
sg-email="activeUser.email"
|
||||
size="40"><!-- avatar --></sg-avatar-image>
|
||||
size="40">person</sg-avatar-image>
|
||||
<div layout="row" layout-align="space-between center">
|
||||
<div style="overflow: hidden">
|
||||
<p class="sg-md-title sg-no-wrap">{{activeUser.identification}}</p>
|
||||
|
|
|
@ -114,6 +114,7 @@
|
|||
this.$$shortFormat = this.$shortFormat();
|
||||
if (!this.$$image)
|
||||
this.$$image = this.image;
|
||||
this.$avatarIcon = (this.$isGroup() || this.$isSpecial()) ? 'group' : 'person';
|
||||
// NOTE: We can't assign a Gravatar at this stage since we would need the Preferences module
|
||||
// which already depend on the User module.
|
||||
|
||||
|
@ -175,6 +176,15 @@
|
|||
return deferred.promise;
|
||||
};
|
||||
|
||||
/**
|
||||
* @function $isGroup
|
||||
* @memberof User.prototype
|
||||
* @return true if the user actually represents a group of users
|
||||
*/
|
||||
User.prototype.$isGroup = function() {
|
||||
return this.isGroup || this.userClass && this.userClass == 'normal-group';
|
||||
};
|
||||
|
||||
/**
|
||||
* @function $isAnonymous
|
||||
* @memberof User.prototype
|
||||
|
|
|
@ -6,11 +6,11 @@
|
|||
|
||||
/**
|
||||
* sgAvatarImage - An avatar directive that returns un img element with either a local URL (if sg-src is specified)
|
||||
* or a Gravatar URL built from the Gravatar factory (using sg-email).
|
||||
* or a Gravatar URL built from the Gravatar factory (using sg-email). The element's content must return the name of the generic icon to be used (usually 'person' or 'group').
|
||||
* Based on http://blog.lingohub.com/2014/08/better-ux-with-angularjs-directives/.
|
||||
* @memberof SOGo.Common
|
||||
* @example:
|
||||
<sg-avatar-image sg-email="test@email.com" size="50"></sg-avatar-image>
|
||||
<sg-avatar-image sg-email="test@email.com" size="50">person</sg-avatar-image>
|
||||
*/
|
||||
function sgAvatarImage() {
|
||||
return {
|
||||
|
@ -21,8 +21,9 @@
|
|||
email: '=sgEmail',
|
||||
src: '=sgSrc'
|
||||
},
|
||||
transclude: true,
|
||||
template: [
|
||||
'<md-icon>person</md-icon>', // the generic icon
|
||||
'<md-icon ng-transclude></md-icon>', // the generic icon
|
||||
'<img class="ng-hide" ng-src="{{vm.url}}" />' // the gravatar or local image
|
||||
].join(''),
|
||||
link: link,
|
||||
|
|
|
@ -154,6 +154,7 @@
|
|||
});
|
||||
if (this.isgroup)
|
||||
this.c_component = 'vlist';
|
||||
this.$avatarIcon = this.$isList()? 'group' : 'person';
|
||||
if (data.notes && data.notes.length)
|
||||
this.notes = _.map(data.notes, function(note) { return { 'value': note }; });
|
||||
else if (!this.notes || !this.notes.length)
|
||||
|
|
|
@ -873,7 +873,8 @@
|
|||
email: ref.$preferredEmail(),
|
||||
role: 'req-participant',
|
||||
partstat: 'needs-action',
|
||||
uid: ref.c_uid
|
||||
uid: ref.c_uid,
|
||||
$avatarIcon: 'person',
|
||||
};
|
||||
if (!_.find(_this.attendees, function(o) {
|
||||
return o.email == attendee.email;
|
||||
|
@ -896,7 +897,8 @@
|
|||
email: card.$preferredEmail(),
|
||||
role: 'req-participant',
|
||||
partstat: 'needs-action',
|
||||
uid: card.c_uid
|
||||
uid: card.c_uid,
|
||||
$avatarIcon: card.$avatarIcon
|
||||
};
|
||||
if (!_.find(this.attendees, function(o) {
|
||||
return o.email == attendee.email;
|
||||
|
|
Loading…
Reference in New Issue