Skip to content

Commit

Permalink
(js) Improve sgAvatarImage
Browse files Browse the repository at this point in the history
  • Loading branch information
@cgx
cgx committed Nov 11, 2016
1 parent 0a75f5c commit 3bbd61c
Show file tree
Hide file tree
Showing 18 changed files with 45 additions and 68 deletions.
12 changes: 3 additions & 9 deletions UI/Templates/AdministrationUI/UIxAdministration.wox
View file
Expand Up @@ -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>
Expand Down
4 changes: 1 addition & 3 deletions UI/Templates/AdministrationUI/UIxAdministrationAclEditor.wox
View file
Expand Up @@ -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>
Expand Down
14 changes: 1 addition & 13 deletions UI/Templates/ContactsUI/UIxContactFoldersView.wox
View file
Expand Up @@ -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()">
Expand Down
17 changes: 5 additions & 12 deletions UI/Templates/ContactsUI/UIxContactViewTemplate.wox
View file
Expand Up @@ -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>
<sg-avatar-image class="md-avatar md-tile-left"
sg-email="editor.card.$preferredEmail()"
sg-src="editor.card.photoURL"
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>
Expand Down Expand Up @@ -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>
Expand Down
10 changes: 3 additions & 7 deletions UI/Templates/ContactsUI/UIxContactsUserFolders.wox
View file
Expand Up @@ -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>
<sg-avatar-image class="md-avatar"
sg-email="user.c_email"
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>
Expand Down
2 changes: 1 addition & 1 deletion UI/Templates/MailPartViewers/UIxMailPartICalViewer.wox
View file
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion UI/Templates/MailerUI/UIxMailEditor.wox
View file
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion UI/Templates/MailerUI/UIxMailFolderTemplate.wox
View file
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion UI/Templates/MailerUI/UIxMailUserDelegationEditor.wox
View file
Expand Up @@ -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>
Expand Down
4 changes: 1 addition & 3 deletions UI/Templates/MailerUI/UIxMailViewTemplate.wox
View file
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
View file
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion UI/Templates/SchedulerUI/UIxAttendeesEditor.wox
View file
Expand Up @@ -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>
Expand Down
14 changes: 5 additions & 9 deletions UI/Templates/UIxAclEditor.wox
View file
Expand Up @@ -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">
<sg-avatar-image class="md-avatar"
sg-email="user.c_email"
size="40"><!-- avatar --></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="card-picture">
<sg-avatar-image class="md-avatar"
sg-email="user.c_email"
size="40">{{ user.$avatarIcon }}</sg-avatar-image>
</div>
<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>
Expand Down
2 changes: 1 addition & 1 deletion UI/Templates/UIxSidenavToolbarTemplate.wox
View file
Expand Up @@ -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>
Expand Down
10 changes: 10 additions & 0 deletions UI/WebServerResources/js/Common/User.service.js
View file
Expand Up @@ -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.

Expand Down Expand Up @@ -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
Expand Down
7 changes: 4 additions & 3 deletions UI/WebServerResources/js/Common/sgAvatarImage.directive.js
View file
Expand Up @@ -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 {
Expand All @@ -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,
Expand Down
1 change: 1 addition & 0 deletions UI/WebServerResources/js/Contacts/Card.service.js
View file
Expand Up @@ -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)
Expand Down
6 changes: 4 additions & 2 deletions UI/WebServerResources/js/Scheduler/Component.service.js
View file
Expand Up @@ -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;
Expand All @@ -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;
Expand Down

0 comments on commit 3bbd61c

Please sign in to comment.