Improve display of attendees in event viewer

This commit is contained in:
Francis Lachapelle
2015-07-29 16:23:41 -04:00
parent 3e6c50b7dc
commit d7b7824aad
5 changed files with 50 additions and 21 deletions
@@ -188,9 +188,10 @@
md-search-text="editor.searchText"
md-selected-item-change="editor.addAttendee(card)"
md-items="card in editor.cardFilter(editor.searchText)"
md-min-length="2"
md-no-cache="true"
md-item-text="user.empty"
md-min-length="3"
md-delay="300"
md-no-cache="true"
sg-enter="editor.addAttendee(editor.searchText)">
<md-item-template>
<div class="md-contact-suggestion" layout="row" layout-align="space-between center">
@@ -209,13 +210,18 @@
<md-icon ng-class="{'md-rotate-180': editor.showAttendeesEditor}">expand_more</md-icon>
</md-button>
</div>
<div layout="row" layout-align="space-between end">
<div class="sg-avatars" ng-hide="editor.showAttendeesEditor">
<sg-avatar-image ng-repeat="currentAttendee in editor.component.attendees track by currentAttendee.email"
sg-email="currentAttendee.email"
size="32"><!-- avatar --></sg-avatar-image>
</div>
</div>
<!-- md-contact-chips don't support "readonly", so we build them using md-chips
in readonly mode and a template similar to the one of md-contact-chips -->
<md-chips class="md-contact-chips sg-readonly"
ng-model="editor.component.attendees"
ng-hide="editor.showAttendeesEditor"
readonly="true">
<md-chip-template>
<div class="md-contact-avatar"><img src="#" ng-src="{{$chip.image}}" alt="{{$chip.name}}"/></div>
<div class="md-contact-name">{{$chip.name}}</div>
<md-icon ng-class="'icon-' + $chip.status"><!-- partstat --></md-icon>
</md-chip-template>
</md-chips>
<div ng-show="editor.showAttendeesEditor" class="sg-subcontent attendees">
<var:component className="UIxAttendeesEditor" />
</div>
@@ -8,7 +8,7 @@
<form name="eventForm" ng-submit="viewer.save(eventForm)">
<md-toolbar class="md-padding" ng-class="viewer.component.getClassName('bg')">
<div class="md-toolbar-tools">
<md-icon class="material-icons sg-icon-toolbar-bg">event</md-icon>
<md-icon class="material-icons sg-icon-toolbar-bg">event</md-icon>
<h2 class="md-flex">
<!-- classification -->
<md-icon ng-if="viewer.component.classification == 'confidential'">visibility_off</md-icon>
@@ -97,18 +97,20 @@
<md-list-item ng-show="viewer.component.attendees.length > 0">
<div class="pseudo-input-container">
<label class="pseudo-input-label"><var:string label:value="Attendees:"/></label>
<div class="sg-avatars">
<sg-avatar-image ng-repeat="currentAttendee in viewer.component.attendees track by currentAttendee.email"
sg-email="currentAttendee.email"
size="32"><!-- avatar --></sg-avatar-image>
</div>
<!-- md-contact-chips don't support "readonly", so we build them using md-chips
in readonly mode and a template similar to the one of md-contact-chips -->
<md-chips class="md-contact-chips"
ng-model="viewer.component.attendees"
readonly="true">
<md-chip-template>
<div class="md-contact-avatar"><img src="#" ng-src="{{$chip.image}}" alt="{{$chip.name}}"/></div>
<div class="md-contact-name">{{$chip.name}}</div>
<md-icon ng-class="'icon-' + $chip.status"><!-- partstat --></md-icon>
</md-chip-template>
</md-chips>
</div>
</md-list-item>
</md-list>
<!-- attendees -->
<div ng-show="viewer.showAttendeesEditor" class="sg-subcontent attendees">
<var:component className="UIxAttendeesEditor" />
</div>
</md-list>
</md-dialog-content>
<!-- actions -->
<div class="md-actions">
@@ -31,12 +31,13 @@
* @desc The factory we'll use to register with Angular
* @returns the Component constructor
*/
Component.$factory = ['$q', '$timeout', '$log', 'sgSettings', 'Preferences', 'Resource', function($q, $timeout, $log, Settings, Preferences, Resource) {
Component.$factory = ['$q', '$timeout', '$log', 'sgSettings', 'Preferences', 'Gravatar', 'Resource', function($q, $timeout, $log, Settings, Preferences, Gravatar, Resource) {
angular.extend(Component, {
$q: $q,
$timeout: $timeout,
$log: $log,
$Preferences: Preferences,
$gravatar: Gravatar,
$$resource: new Resource(Settings.baseURL, Settings.activeUser),
$categories: window.UserDefaults.SOGoCalendarCategoriesColors,
// Filter parameters common to events and tasks
@@ -354,6 +355,7 @@
if (this.attendees) {
_.each(this.attendees, function(attendee) {
attendee.image = Component.$gravatar(attendee.email, 32);
_this.updateFreeBusy(attendee);
});
}
@@ -527,6 +529,7 @@
if (!_.find(this.attendees, function(o) {
return o.email == attendee.email;
})) {
attendee.image = Component.$gravatar(attendee.email, 32);
if (this.attendees)
this.attendees.push(attendee);
else
@@ -67,9 +67,14 @@ md-icon {
&.icon-alarm:before {
content: "\e855";
}
&.icon-delegated:before,
&.icon-arrow-forward:before {
content: "\e5c8";
}
&.icon-check:before {
content: "\e5ca";
}
&.icon-accepted:before,
&.icon-clear:before {
content: "\e14c";
}
@@ -85,12 +90,24 @@ md-icon {
&.icon-expand-more:before {
content: "\e5cf";
}
&.icon-needs-action:before,
&.icon-help:before {
content: "\e887";
}
&.icon-more-horiz:before {
content: "\e5d3";
}
&.icon-tentative:before,
&.icon-person:before {
content: "\e7fd";
}
// &.icon_public:before {
// content: "\e80b";
// }
&.icon-declined:before,
&.icon-remove-circle:before {
content: "\e15c";
}
&.icon-visibility-off:before {
content: "\e8f5";
}
@@ -94,6 +94,7 @@ div.md-tile-left {
margin-right: ($mg / 2);
}
}
// Avatar placeholder
// ------------------------------------
.md-tile-left:before {