(js,html) Improve sgAvatarImage directive

2026-04-07 22:38:51 +00:00 · 2015-09-04 09:09:43 -04:00
parent f4dcd37570
commit 9d5f42eefa
12 changed files with 83 additions and 23 deletions
--- a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
@@ -56,7 +56,7 @@
            <sg-avatar-image class="md-tile-left"
                             sg-email="editor.card.$preferredEmail()"
                             sg-src="editor.card.photoURL"
-                             size="48"><!-- avatar --></sg-avatar-image>
+                             size="40"><!-- avatar --></sg-avatar-image>
          </div>
          <div class="sg-list-avatar" ng-show="editor.card.c_component == 'vlist'">
            <!--list avatar-->
--- a/UI/Templates/ContactsUI/UIxContactsUserFolders.wox
+++ b/UI/Templates/ContactsUI/UIxContactsUserFolders.wox
@@ -23,8 +23,7 @@
          <div layout="row" layout-align="start center" class="md-flex">
            <span class="card-picture" ng-switch="user.isGroup">
              <div ng-switch-when="0">
-                <sg-avatar-image class="md-tile-left"
-                                 sg-email="user.c_email"
+                <sg-avatar-image sg-email="user.c_email"
                                 size="48"><!-- avatar --></sg-avatar-image>
              </div>
              <div ng-switch-when="1" class="sg-list-avatar"><!-- normal-group --></div>
--- a/UI/Templates/MailerUI/UIxMailEditor.wox
+++ b/UI/Templates/MailerUI/UIxMailEditor.wox
@@ -10,7 +10,7 @@
      <div class="md-toolbar-tools">
        <md-icon class="material-icons sg-icon-toolbar-bg">edit</md-icon>
        <!-- from -->
-        <sg-avatar-image class="md-tile-left" hide-sm="hide-sm"
+        <sg-avatar-image hide-sm="hide-sm"
                         sg-email="editor.message.editable.from"
                         size="32"><!-- avatar --></sg-avatar-image>
        <md-input-container flex="flex">
--- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -168,7 +168,7 @@
                             ng-show="!currentMessage.selected"
                             ng-click="currentMessage.selected = !currentMessage.selected"
                             sg-email="::currentMessage.from[0].email"
-                             size="48"><!-- avatar --></sg-avatar-image>
+                             size="40"><!-- avatar --></sg-avatar-image>
            <div class="sg-tile-content">
              <span class="msg-date"
                    ng-bind-html="currentMessage.relativedate"><!-- date --></span>
--- a/UI/Templates/MailerUI/UIxMailUserDelegationEditor.wox
+++ b/UI/Templates/MailerUI/UIxMailUserDelegationEditor.wox
@@ -26,7 +26,7 @@
          <div layout="row" layout-align="start center" class="md-flex">
            <sg-avatar-image class="md-tile-left"
                             sg-email="user.c_email"
-                             size="48"><!-- avatar --></sg-avatar-image>
+                             size="40"><!-- avatar --></sg-avatar-image>
            <div class="sg-tile-content">
              <div class="sg-md-subhead-multi">{{user.cn}}</div>
              <div class="sg-md-body-multi">{{user.c_email}}</div>
--- a/UI/Templates/MailerUI/UIxMailViewTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
@@ -85,7 +85,7 @@
            <div layout="row" layout-align="start center">
              <sg-avatar-image class="md-tile-left"
                               sg-email="viewer.message.from[0].email"
-                               size="48">
+                               size="40">
                <!-- contact avatar -->
              </sg-avatar-image>
              <div class="md-list-item-text">
--- a/UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox
@@ -98,7 +98,9 @@
                        ng-model="::editor.organizer"
                        readonly="true">
                <md-chip-template>
-                  <div class="md-contact-avatar"><img src="#" ng-src="{{$chip.$image}}" alt="{{$chip.name}}"/></div>
+                  <div class="md-contact-avatar">
+                    <sg-avatar-image sg-email="$chip.email" size="32"><!-- avatar --></sg-avatar-image>
+                  </div>
                  <div class="md-contact-name">{{$chip.name}}</div>
                </md-chip-template>
              </md-chips>
@@ -112,7 +114,9 @@
                        ng-model="::editor.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-avatar">
+                    <sg-avatar-image sg-email="$chip.email" size="32"><!-- avatar --></sg-avatar-image>
+                  </div>
                  <div class="md-contact-name">{{$chip.name}}</div>
                  <md-icon ng-class="'icon-' + $chip.status"><!-- partstat --></md-icon>
                </md-chip-template>
--- a/UI/Templates/UIxAclEditor.wox
+++ b/UI/Templates/UIxAclEditor.wox
@@ -28,7 +28,7 @@
              <div ng-switch-when="normal-user">
                <sg-avatar-image class="md-tile-left"
                                 sg-email="user.c_email"
-                                 size="48"><!-- avatar --></sg-avatar-image>
+                                 size="40"><!-- avatar --></sg-avatar-image>
              </div>
              <div ng-switch-when="normal-group" class="sg-list-avatar"><!-- normal-group --></div>
              <div ng-switch-when="public-user" class="sg-list-avatar"><!-- public-user --></div>
--- a/UI/WebServerResources/js/Common/Gravatar.service.js
+++ b/UI/WebServerResources/js/Common/Gravatar.service.js
@@ -27,8 +27,10 @@
      }
      hash = email.md5();

+      return 'https://www.gravatar.com/avatar/' + hash + '?s=' + s + '&d=404';
+      //return 'https://www.gravatar.com/avatar/' + hash + '?s=' + s + '&d=retro';
      // return 'https://www.gravatar.com/avatar/' + hash + '?s=' + s + '&d=identicon';
-      return 'https://www.gravatar.com/avatar/' + hash + '?s=' + s + '&d=wavatar';
+      // return 'https://www.gravatar.com/avatar/' + hash + '?s=' + s + '&d=wavatar';
    };
  }

--- a/UI/WebServerResources/js/Common/sgAvatarImage.directive.js
+++ b/UI/WebServerResources/js/Common/sgAvatarImage.directive.js
@@ -15,19 +15,36 @@
  function sgAvatarImage() {
    return {
      restrict: 'AE',
-      replace: true,
      scope: {
        size: '@',
        email: '=sgEmail',
        src: '=sgSrc'
      },
      template: '<img ng-src="{{vm.url}}"/>',
+      link: link,
      bindToController: true,
      controller: 'sgAvatarImageController',
      controllerAs: 'vm'
    };
  }

+  function link(scope, element, attrs, controller) {
+    var el = element[0],
+        className = el.className,
+        imgElement = element.find('img'),
+        img = imgElement[0];
+
+    if (attrs.size) {
+      imgElement.attr('width', attrs.size);
+      imgElement.attr('height', attrs.size);
+    }
+
+    imgElement.bind('error', function() {
+      // Error while loading external link; insert a generic avatar
+      controller.insertGenericAvatar(img);
+    });
+  }
+
  /**
   * @ngInject
   */
@@ -36,7 +53,18 @@
    var vm = this;

    $scope.$watch('vm.email', function(email) {
-      if (email && !vm.url) {
+      var img = $element.find('img')[0];
+      if (!email && !vm.genericAvatar) {
+        // If no email is specified, insert a generic avatar
+        vm.insertGenericAvatar(img);
+      }
+      else if (email && !vm.url) {
+        if (vm.genericAvatar) {
+          // Remove generic avatar and restore visibility of image
+          vm.genericAvatar.parentNode.removeChild(vm.genericAvatar);
+          delete vm.genericAvatar;
+          img.classList.remove('ng-hide');
+        }
        vm.url = Gravatar(email, vm.size);
      }
    });
@@ -49,6 +77,17 @@
        }
      });
    }
+
+    vm.insertGenericAvatar = function(img) {
+      var avatar;
+
+      if (!vm.genericAvatar) {
+        avatar = document.createElement('md-icon');
+        avatar.className = 'material-icons icon-person';
+        img.classList.add('ng-hide');
+        vm.genericAvatar = img.parentNode.insertBefore(avatar, img);
+      }
+    };
  }

  angular
--- a/UI/WebServerResources/scss/components/chips/chips.scss
+++ b/UI/WebServerResources/scss/components/chips/chips.scss
@@ -21,6 +21,20 @@ md-chips {
  width: (3 * $contact-chip-name-width);
 }

+// Adjust avatar size according to chips dimensions
+.md-contact-chips {
+  .md-chips {
+    .md-chip {
+      .md-contact-avatar {
+        md-icon {
+          height: ($chip-height * .75);
+          margin: ($chip-height * .25/2);
+        }
+      }
+    }
+  }
+}
+
 // In the autocompletion menu, don't limit the contact name to a fixed width
 // and show the email address right after it
 .md-contact-suggestion {
--- a/UI/WebServerResources/scss/components/list/list.scss
+++ b/UI/WebServerResources/scss/components/list/list.scss
@@ -42,6 +42,7 @@ md-list-item {

 .md-tile-left,
 .md-tile-right {
+  display: block;
  border-radius: 100%;
  padding: $layout-gutter-width;
  width: $sg-md-grid-pitch + $baseline-grid;
@@ -149,17 +150,18 @@ div.md-tile-left {

 // Avatar placeholder
 // ------------------------------------
-.md-tile-left:before {
+.md-tile-left:before,
+.md-tile-left md-icon {
  font-family: 'Material Icons';
  font-size: 40px;
  color: rgba(0, 0, 0, 0.26);
 }
-.md-tile-left-card {
-  @extend .md-tile-left;
-  &:before {
-    content: "\e7fd"; // person
-  }
-}
+//.md-tile-left-card {
+//  @extend .md-tile-left;
+//  &:before {
+//    content: "\e7fd"; // person
+//  }
+//}
 .md-tile-left-list {
  @extend .md-tile-left;
  &:before {
@@ -201,9 +203,9 @@ div.md-tile-left {
 //  content: "\e7fd"; // person
 //}
 .sg-avatar {
-  @extend .md-tile-left-card;
-  margin-right: 0;
-  margin-left: 0;
+//  @extend .md-tile-left-card;
+//  margin-right: 0;
+//  margin-left: 0;
 }
 .sg-list-avatar {
  @extend .md-tile-left-list;