From 1df0e2b917341bffe42a45c65505680af19afdd2 Mon Sep 17 00:00:00 2001
From: Naz Gargol <nazargargol@gmail.com>
Date: Tue, 3 Dec 2019 18:10:47 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20=20Added=20gravatars=20for=20mem?=
 =?UTF-8?q?ber=20avatars=20(#1417)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../admin/app/components/gh-member-avatar.js  |  2 +-
 ghost/admin/app/helpers/gravatar.js           | 20 ++++++++++++
 ghost/admin/app/styles/layouts/members.css    | 31 +++++++++++++++++++
 .../templates/components/gh-member-avatar.hbs |  9 ++++--
 .../components/gh-members-list-item.hbs       |  2 +-
 ghost/admin/app/templates/member.hbs          |  2 +-
 ghost/admin/app/templates/member/new.hbs      |  2 +-
 7 files changed, 61 insertions(+), 7 deletions(-)
 create mode 100644 ghost/admin/app/helpers/gravatar.js

diff --git a/ghost/admin/app/components/gh-member-avatar.js b/ghost/admin/app/components/gh-member-avatar.js
index f8351eeec3..e225a6ea9c 100644
--- a/ghost/admin/app/components/gh-member-avatar.js
+++ b/ghost/admin/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';
diff --git a/ghost/admin/app/helpers/gravatar.js b/ghost/admin/app/helpers/gravatar.js
new file mode 100644
index 0000000000..0924f06c54
--- /dev/null
+++ b/ghost/admin/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}`;
+    }
+});
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index 60f49b761d..ac3e8a7a73 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/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
 /* ----------------------------------------- */
 
diff --git a/ghost/admin/app/templates/components/gh-member-avatar.hbs b/ghost/admin/app/templates/components/gh-member-avatar.hbs
index 8db2094df2..e6e14e2ebe 100644
--- a/ghost/admin/app/templates/components/gh-member-avatar.hbs
+++ b/ghost/admin/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>
\ No newline at end of file
+<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>
\ No newline at end of file
diff --git a/ghost/admin/app/templates/components/gh-members-list-item.hbs b/ghost/admin/app/templates/components/gh-members-list-item.hbs
index 828d6d6344..1eef3eee39 100644
--- a/ghost/admin/app/templates/components/gh-members-list-item.hbs
+++ b/ghost/admin/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}}
diff --git a/ghost/admin/app/templates/member.hbs b/ghost/admin/app/templates/member.hbs
index 8c6abbbfd0..81cbb5da12 100644
--- a/ghost/admin/app/templates/member.hbs
+++ b/ghost/admin/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}}
diff --git a/ghost/admin/app/templates/member/new.hbs b/ghost/admin/app/templates/member/new.hbs
index 9b81ecc14e..1134b3dda5 100644
--- a/ghost/admin/app/templates/member/new.hbs
+++ b/ghost/admin/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>