diff --git a/ghost/admin/app/components/member/activity-feed.hbs b/ghost/admin/app/components/member/activity-feed.hbs
index 18039af7ee..5fefb3251e 100644
--- a/ghost/admin/app/components/member/activity-feed.hbs
+++ b/ghost/admin/app/components/member/activity-feed.hbs
@@ -38,8 +38,11 @@
{{/if}}
{{#if event.description}}
-
- {{event.description}}
+
+
URL
+
+ {{event.description}}
+
{{/if}}
diff --git a/ghost/admin/app/components/member/activity-feed.js b/ghost/admin/app/components/member/activity-feed.js
new file mode 100644
index 0000000000..d9f5654a5a
--- /dev/null
+++ b/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');
+ }
+}
\ No newline at end of file
diff --git a/ghost/admin/app/helpers/parse-member-event.js b/ghost/admin/app/helpers/parse-member-event.js
index 7b85cb1559..91a2acd60a 100644
--- a/ghost/admin/app/helpers/parse-member-event.js
+++ b/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;
}
diff --git a/ghost/admin/app/styles/layouts/member-activity.css b/ghost/admin/app/styles/layouts/member-activity.css
index d48ceae419..591b9f332f 100644
--- a/ghost/admin/app/styles/layouts/member-activity.css
+++ b/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;
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index f5eabc8949..d7860d05fe 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/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;
diff --git a/ghost/admin/public/assets/icons/event-clicked-in-email.svg b/ghost/admin/public/assets/icons/event-click.svg
similarity index 100%
rename from ghost/admin/public/assets/icons/event-clicked-in-email.svg
rename to ghost/admin/public/assets/icons/event-click.svg