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
This commit is contained in:
James Morris 2022-09-21 13:58:22 +01:00
parent ad79d45926
commit fe46bd05fb
6 changed files with 114 additions and 11 deletions

View File

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

View File

@ -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');
}
}

View File

@ -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;
}

View File

@ -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;

View File

@ -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;

View File

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB