From ec9e61dc2fe363dbf9b9d265498aa078fa39c4dc Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Tue, 27 Sep 2022 12:29:08 +0100
Subject: [PATCH] Tweaks to how click events are handled based on feedback

refs https://github.com/TryGhost/Team/issues/1981
---
 .../app/components/member/activity-feed.hbs   |  3 ++-
 .../components/members-activity/table-row.hbs |  5 +++--
 ghost/admin/app/helpers/parse-member-event.js |  2 +-
 ghost/admin/app/styles/components/lists.css   |  1 +
 .../app/styles/layouts/member-activity.css    | 21 +++++++++++++------
 5 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/ghost/admin/app/components/member/activity-feed.hbs b/ghost/admin/app/components/member/activity-feed.hbs
index 920b902eef..1a811f92ff 100644
--- a/ghost/admin/app/components/member/activity-feed.hbs
+++ b/ghost/admin/app/components/member/activity-feed.hbs
@@ -31,15 +31,16 @@
                                                             {{/if}}
                                                             {{#if event.url}}
                                                                 <span class="gh-members-activity-event-join">{{event.join}}</span>
+                                                                {{#if (feature "emailClicks")}}<span class="gh-members-activity-event-dash">–</span>{{/if}}
                                                                 <a class="ghost-members-activity-object-link" href="{{event.url}}" target="_blank" rel="noopener noreferrer">{{event.object}}</a>
                                                             {{/if}}
                                                             {{#if event.email}}
+                                                                {{#if (feature "emailClicks")}}<span class="gh-members-activity-event-dash">–</span>{{/if}}
                                                                 <GhEmailPreviewLink @data={{event.email}} />
                                                             {{/if}}
                                                         </span>
                                                         {{#if event.description}}
                                                             <div class="ghost-members-activity-event-description {{if (feature "memberAttribution") 'feature-memberAttribution'}}">
-                                                                <div class="ghost-members-activity-event-prefix">URL</div>
                                                                 <div class="ghost-members-activity-event-url" {{on "mouseenter" this.enterLinkURL}} {{on "mouseleave" this.leaveLinkURL}}>
                                                                     <span>{{event.description}}</span>
                                                                 </div>
diff --git a/ghost/admin/app/components/members-activity/table-row.hbs b/ghost/admin/app/components/members-activity/table-row.hbs
index f8b1ef7859..b5abe3dc9a 100644
--- a/ghost/admin/app/components/members-activity/table-row.hbs
+++ b/ghost/admin/app/components/members-activity/table-row.hbs
@@ -26,15 +26,16 @@
                         {{/if}}
                         {{#if event.url}}
                             <span class="gh-members-activity-event-join">{{event.join}}</span>
+                            {{#if (feature "emailClicks")}}<span class="gh-members-activity-event-dash">–</span>{{/if}}
                             <a class="ghost-members-activity-object-link" href="{{event.url}}" target="_blank" rel="noopener noreferrer">{{event.object}}</a>
                         {{/if}}
                         {{#if event.email}}
-                            <span class="{{if (feature "memberAttribution") 'hidden'}}"><GhEmailPreviewLink @data={{event.email}} /></span>
+                            {{#if (feature "emailClicks")}}<span class="gh-members-activity-event-dash">–</span>{{/if}}
+                            <GhEmailPreviewLink @data={{event.email}} />
                         {{/if}}
                     </span>
                     {{#if event.description}}
                         <div class="ghost-members-activity-event-description {{if (feature "memberAttribution") 'feature-memberAttribution'}}">
-                            <div class="ghost-members-activity-event-prefix">URL</div>
                             <div class="ghost-members-activity-event-url" {{on "mouseenter" this.enterLinkURL}} {{on "mouseleave" this.leaveLinkURL}}>
                                 <span>{{event.description}}</span>
                             </div>
diff --git a/ghost/admin/app/helpers/parse-member-event.js b/ghost/admin/app/helpers/parse-member-event.js
index 09307657dd..3f9ceef7f4 100644
--- a/ghost/admin/app/helpers/parse-member-event.js
+++ b/ghost/admin/app/helpers/parse-member-event.js
@@ -157,7 +157,7 @@ export default class ParseMemberEventHelper extends Helper {
         }
 
         if (event.type === 'click_event') {
-            return 'clicked in email';
+            return 'clicked link in email';
         }
     }
 
diff --git a/ghost/admin/app/styles/components/lists.css b/ghost/admin/app/styles/components/lists.css
index b0375ebfe0..a46fbe5974 100644
--- a/ghost/admin/app/styles/components/lists.css
+++ b/ghost/admin/app/styles/components/lists.css
@@ -455,6 +455,7 @@ ul.nostyle li {
     background: var(--main-bg-color);
     background: linear-gradient(90deg, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%);
     padding: 0 60px 0 0;
+    z-index: 99;
 }
 
 .gh-list-scrolling thead th:first-child::before,
diff --git a/ghost/admin/app/styles/layouts/member-activity.css b/ghost/admin/app/styles/layouts/member-activity.css
index e7cc3240bb..0e6d3dec67 100644
--- a/ghost/admin/app/styles/layouts/member-activity.css
+++ b/ghost/admin/app/styles/layouts/member-activity.css
@@ -36,6 +36,14 @@
     color: var(--darkgrey);
 }
 
+.gh-members-activity .gh-list-data {
+    height: 84px;
+}
+
+.gh-members-activity.gh-members-activity-single .gh-list-data {
+    height: 68px;
+}
+
 .no-posts .gh-members-placeholder {
     fill: var(--lightgrey);
     width: 60px;
@@ -141,7 +149,6 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding: 1.25rem 0;
 }
 
 .gh-members-activity-detail {
@@ -153,6 +160,7 @@
     display: block;
     font-weight: 500;
     font-size: 1.4rem;
+    letter-spacing: 0;
     color: var(--middarkgrey);
     text-overflow: ellipsis;
     overflow: hidden;
@@ -179,6 +187,10 @@
     color: var(--darkgrey);
 }
 
+.gh-members-activity-event-dash {
+    color: var(--midgrey);
+}
+
 .gh-members-activity-event-join {
     font-weight: 500;
     color: var(--middarkgrey);
@@ -190,10 +202,7 @@
 }
 
 .ghost-members-activity-event-description {
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-    gap: 6px;
+    margin-top: -1px;
 }
 
 .ghost-members-activity-event-prefix {
@@ -254,7 +263,7 @@
 .ghost-members-activity-event-url > span {
     display: inline-block;
     font-weight: 400;
-    font-size: 1.2rem;
+    font-size: 1.3rem;
     color: var(--midgrey);
     letter-spacing: 0;
     line-height: 1.3em;