🎨 Added gravatars for member avatars (#1417)

no issue

- When an email has a valid gravatar handle it displays an image instead of initials for the member
- Introduces new {{gravatar}} helper which accepts an email as parameter and size/d as named parameters. The output is a URL to gravatar image
- Refactored usage of "splattribute" to explicit property. There was a need to duplicate class property usage in the component and doing that through splatttibute feature is unsafe as pointed ou here - https://github.com/TryGhost/Ghost-Admin/pull/1417#discussion_r351837584

app/components/gh-member-avatar.js

@@ -14,7 +14,7 @@ const stringToHslColor = function (str, saturation, lightness) {
 
 export default Component.extend({
     tagName: '',
-
+    containerClass: '',
     member: null,
     initialsClass: computed('sizeClass', function () {
         return this.sizeClass || 'gh-member-list-avatar';

app/helpers/gravatar.js

@@ -0,0 +1,20 @@
+import Helper from '@ember/component/helper';
+import md5 from 'blueimp-md5';
+import {isEmpty} from '@ember/utils';
+import {inject as service} from '@ember/service';
+
+export default Helper.extend({
+    config: service(),
+
+    compute([email], {size = 180, d = 'blank'}/*, hash*/) {
+        if (!this.get('config.useGravatar')) {
+            return;
+        }
+
+        if (!email || isEmpty(email)) {
+            return;
+        }
+
+        return `https://www.gravatar.com/avatar/${md5(email)}?s=${size}&d=${d}`;
+    }
+});

app/styles/layouts/members.css

@@ -1,10 +1,41 @@
 /* Global
 /* ----------------------------------------- */
+
+/* Members avatar
+/* ----------------------------------------- */
+.gh-member-gravatar {
+    position: relative;
+}
+
 .gh-member-avatar-label {
     display: block;
     color: #fff;
 }
 
+.gh-member-avatar-image {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-sizing: content-box;
+    background-position: center center;
+    background-size: cover;
+    border-radius: 100%;
+}
+
+.gh-member-initials {
+    border: none;
+    box-shadow: 0 0 0 1px var(--white);
+}
+
+.gh-member-detail-avatar .gh-member-initials {
+    box-shadow: 0 0 0 1px var(--main-bg-color);
+}
+
 /* Members list
 /* ----------------------------------------- */
 

app/templates/components/gh-member-avatar.hbs

@@ -1,3 +1,6 @@
-<div class="flex items-center justify-center br-100" style={{this.backgroundStyle}} ...attributes>
-    <span class="gh-member-avatar-label {{this.initialsClass}}">{{this.initials}}</span>
-</div>
+<figure class="gh-member-gravatar {{this.containerClass}}">
+    <div class="gh-member-initials flex items-center justify-center br-100 {{this.containerClass}}" style={{this.backgroundStyle}}>
+        <span class="gh-member-avatar-label {{this.initialsClass}}">{{this.initials}}</span>
+    </div>
+    <img class="gh-member-avatar-image" src={{gravatar this.member.email size=180}} />
+</figure>

app/templates/components/gh-members-list-item.hbs

@@ -1,6 +1,6 @@
 <LinkTo @route="member" @model={{this.member}} title="Member details" class="gh-list-data gh-members-list-basic">
     <div class="flex items-center">
-        <GhMemberAvatar @member={{member}} class="w9 h9 mr3" />
+        <GhMemberAvatar @member={{member}} @containerClass="w9 h9 mr3" />
         <div>
             <h3 class="ma0 pa0 gh-members-list-name {{if (not member.name) "gh-members-name-noname"}}">{{this.displayName}}</h3>
             {{#if this.name}}

app/templates/member.hbs

@@ -15,7 +15,7 @@
             </section>
         </GhCanvasHeader>
         <div class="flex items-center mb10 bt b--lightgrey-d1 pt8">
-            <GhMemberAvatar @member={{member}} @sizeClass={{if member.name 'f-subheadline fw4 lh-zero tracked-1' 'f-headline fw4 lh-zero tracked-1'}} class="w18 h18 mr4" />
+            <GhMemberAvatar @member={{member}} @sizeClass={{if member.name 'f-subheadline fw4 lh-zero tracked-1' 'f-headline fw4 lh-zero tracked-1'}} @containerClass="w18 h18 mr4 gh-member-detail-avatar" />
             <div>
                 <h3 class="f2 fw5 ma0 pa0">
                     {{or member.name member.email}}

app/templates/member/new.hbs

@@ -11,7 +11,7 @@
         </GhCanvasHeader>
         <div class="flex items-center mb10 bt b--lightgrey-d1 pt8">
             {{#if (or member.name member.email)}}
-                <GhMemberAvatar @member={{member}} @sizeClass={{if member.name 'f-subheadline fw4 lh-zero tracked-1' 'f-headline fw4 lh-zero tracked-1'}} class="w18 h18 mr4" />
+                <GhMemberAvatar @member={{member}} @sizeClass={{if member.name 'f-subheadline fw4 lh-zero tracked-1' 'f-headline fw4 lh-zero tracked-1'}} @containerClass="w18 h18 mr4" />
             {{else}}
                 <div class="flex items-center justify-center br-100 w18 h18 mr4 gh-new-member-avatar">
                     <span class="gh-member-avatar-label f-subheadline fw4 lh-zero tracked-1">N</span>