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