Added in email clicks icon and better handling of URLs

- Now has a new email click icon
- Handles long URLs better in the events list
- Fixed narrow viewports bug with events

refs https://github.com/TryGhost/Team/issues/1936

ghost/admin/app/components/member/activity-feed.hbs

@@ -38,8 +38,11 @@
                                                             {{/if}}
                                                         </span>
                                                         {{#if event.description}}
-                                                            <div>
+                                                            <div class="ghost-members-activity-event-description">
-                                                                {{event.description}}
+                                                                <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>
                                                             </div>
                                                         {{/if}}
                                                     </span>

ghost/admin/app/components/member/activity-feed.js

@@ -0,0 +1,32 @@
+import Component from '@glimmer/component';
+import {action} from '@ember/object';
+
+export default class ActivityFeed extends Component {
+    linkScrollerTimeout = null; // needs to be global so can be cleared when needed across functions
+
+    @action
+    enterLinkURL(event) {
+        event.stopPropagation();
+        const parent = event.target;
+        const child = event.target.querySelector('span');
+
+        clearTimeout(this.linkScrollerTimeout);
+        if (child.offsetWidth > parent.offsetWidth) {
+            this.linkScrollerTimeout = setTimeout(() => {
+                parent.classList.add('scroller');
+                child.style.transform = `translateX(-${(child.offsetWidth - parent.offsetWidth) + 8}px)`;
+            }, 100);
+        }
+    }
+
+    @action
+    leaveLinkURL(event) {
+        event.stopPropagation();
+        clearTimeout(this.linkScrollerTimeout);
+        const parent = event.target;
+        const child = event.target.querySelector('span');
+
+        child.style.transform = 'translateX(0)';
+        parent.classList.remove('scroller');
+    }
+}

ghost/admin/app/helpers/parse-member-event.js

@@ -156,7 +156,7 @@ export default class ParseMemberEventHelper extends Helper {
         }
 
         if (event.type === 'click_event') {
-            return 'clicked email';
+            return 'click in email';
         }
     }
 
@@ -231,11 +231,11 @@ export default class ParseMemberEventHelper extends Helper {
 
                 // Remove protocol, querystring and hash
                 // + strip trailing /
-                return 'URL: ' + parsedURL.host + (parsedURL.pathname === '/' ? '' : parsedURL.pathname);
+                return parsedURL.host + (parsedURL.pathname === '/' ? '' : parsedURL.pathname);
             } catch (e) {
                 // Invalid URL
             }
-            return 'URL: ' + event.data.link.to;
+            return event.data.link.to;
         }
         return;
     }

ghost/admin/app/styles/layouts/member-activity.css

@@ -187,6 +187,80 @@
     color: var(--darkgrey);
 }
 
+.ghost-members-activity-event-description {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    gap: 6px;
+}
+
+.ghost-members-activity-event-prefix {
+    text-transform: uppercase;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--lightgrey); 
+}
+
+.ghost-members-activity-event-url {
+    font-weight: 500;
+    color: var(--midlightgrey);
+    position: relative;
+    display: block;
+    width: 100%;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    text-align: left;
+}
+
+.ghost-members-activity-event-url::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -20px;
+    width: 20px;
+    height: 100%;
+    background: rgb(255,255,255);
+    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
+    z-index: 999;
+    opacity: 0;
+    transition: all 250ms ease-out;
+}
+
+.ghost-members-activity-event-url::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 20px;
+    height: 100%;
+    background: rgb(255,255,255);
+    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
+    z-index: 999;
+}
+
+.ghost-members-activity-event-url.scroller:hover::before {
+    opacity: 1;
+    left: 0;
+    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
+}
+
+.ghost-members-activity-event-url.scroller:hover::after {
+    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
+}
+
+.ghost-members-activity-event-url > span {
+    display: inline-block;
+    font-weight: 400;
+    font-size: 1.2rem;
+    color: var(--midgrey);
+    letter-spacing: 0;
+    line-height: 1.3em;
+    transition: transform 300ms ease-out;
+    transform: translateX(0); /* used for dynamic positioning with js */
+    padding-right: 8px; /* extra padding used for dynamic positioning with js */
+}
+
 .gh-members-activity-icon {
     width: 24px;
     min-width: 24px;

ghost/admin/app/styles/layouts/members.css

@@ -1159,12 +1159,6 @@ textarea.gh-member-details-textarea {
     width: 0;
 }
 
-@media (max-width: 600px) {
-    .gh-member-feed-detail {
-        flex-direction: column;
-    }
-}
-
 .gh-member-feed-event {
     flex: 1;
     min-width: 0;