Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Update member activity dropdown (#15875)

Browse source 
closes TryGhost/Team#2250
This commit is contained in:
Elena Baidakova 2022-11-24 20:21:43 +04:00 • committed by GitHub
parent 6fe5023e91
commit 0bdccb6497
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 191 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
ghost/admin/app/components/members-activity/event-type-filter.hbs
View file

@ -6,23 +6,49 @@
</span>
</dd.Trigger>
<dd.Content class="gh-member-activity-actions-menu dropdown-menu dropdown-triangle-top-right">
<dd.Content class="gh-member-activity-actions-menu dropdown-menu dropdown-triangle-top-right {{if (feature "suppressionList") 'gh-member-activity-actions-menu--suppression'}}">
{{!-- NOTE: re-using ember-power-select-options styles --}}
<ul class="ember-power-select-options" role="listbox">
{{#each this.eventTypes as |type idx|}}
<li class="form-group ember-power-select-option mb0 for-checkbox">
<label class="checkbox" for="type-{{idx}}">
<input
type="checkbox"
checked={{type.isSelected}}
id="type-{{idx}}"
name="eventTypes"
class="gh-input post-settings-featured"
{{on "input" (fn this.toggleEventType type.event)}}>
<span class="input-toggle-component"></span>
<p>{{type.name}}</p>
</label>
</li>
{{#if (not (feature "suppressionList"))}}
<li class="form-group ember-power-select-option mb0 for-checkbox">
<label class="checkbox" for="type-{{idx}}">
<input
type="checkbox"
checked={{type.isSelected}}
id="type-{{idx}}"
name="eventTypes"
class="gh-input post-settings-featured"
{{on "input" (fn this.toggleEventType type.event)}}>
<span class="input-toggle-component"></span>
<p>{{type.name}}</p>
</label>
</li>
{{/if}}
{{#if (feature "suppressionList")}}
{{#if type.divider}}
<li class="gh-member-activity-actions-menu-divider"></li>
{{/if}}
<li class="ember-power-select-option mb0 gh-member-activity-actions-menu-item">
<label for="type-{{idx}}">
{{svg-jar type.icon class="gh-member-activity-actions-menu-icon"}}
<span>{{type.name}}</span>
</label>
<div class="for-switch x-small">
<label class="switch" for="type-{{idx}}">
<input
type="checkbox"
checked={{type.isSelected}}
id="type-{{idx}}"
name="eventTypes"
class="gh-input post-settings-featured"
{{on "input" (fn this.toggleEventType type.event)}}>
<span class="input-toggle-component"></span>
</label>
</div>
</li>
{{/if}}
{{/each}}
</ul>
</dd.Content>

59
ghost/admin/app/components/members-activity/event-type-filter.js
View file

@ -3,34 +3,45 @@ import {action} from '@ember/object';
import {inject as service} from '@ember/service';
// todo: replace function with const after suppressionList feature flag will be removed
const ALL_EVENT_TYPES = feature => ([
{event: 'signup_event', icon: 'event-filter-signup', name: 'Signups'},
{event: 'login_event', icon: 'event-filter-login', name: 'Logins'},
{event: 'subscription_event', icon: 'event-filter-subscription', name: 'Paid subscriptions'},
{event: 'payment_event', icon: 'event-filter-payment', name: 'Payments'},
{event: 'newsletter_event', icon: 'event-filter-newsletter', name: 'Email subscriptions'},
{event: 'email_opened_event', icon: 'event-filter-email-opened', name: 'Email opens'},
{event: 'email_delivered_event', icon: 'event-filter-email-delivered', name: 'Email deliveries'},
{event: 'email_failed_event', icon: 'event-filter-email-failed', name: feature.suppressionList ? 'Email bounces' : 'Email failures'}
]);
const ALL_EVENT_TYPES = [
{event: 'signup_event', icon: 'filter-dropdown-signups', name: 'Signups'},
{event: 'login_event', icon: 'filter-dropdown-logins', name: 'Logins'},
{event: 'subscription_event', icon: 'filter-dropdown-paid-subscriptions', name: 'Paid subscriptions'},
{event: 'payment_event', icon: 'filter-dropdown-payments', name: 'Payments'},
{event: 'newsletter_event', icon: 'filter-dropdown-email-subscriptions', name: 'Email subscriptions'},
{event: 'email_opened_event', icon: 'filter-dropdown-email-opened', name: 'Email opens'},
{event: 'email_delivered_event', icon: 'filter-dropdown-email-received', name: 'Email deliveries'},
{event: 'email_failed_event', icon: 'filter-dropdown-email-bounced', name: 'Email failures'}
];
const ALL_EVENT_TYPES_SUPPRESSION = [
{event: 'signup_event', icon: 'filter-dropdown-signups', name: 'Signups', group: 'auth'},
{event: 'login_event', icon: 'filter-dropdown-logins', name: 'Logins', group: 'auth'},
{event: 'subscription_event', icon: 'filter-dropdown-paid-subscriptions', name: 'Paid subscriptions', group: 'payments'},
{event: 'payment_event', icon: 'filter-dropdown-payments', name: 'Payments', group: 'payments'},
{event: 'newsletter_event', icon: 'filter-dropdown-email-subscriptions', name: 'Email subscriptions', group: 'emails'},
{event: 'email_opened_event', icon: 'filter-dropdown-email-opened', name: 'Email opened', group: 'emails'},
{event: 'email_delivered_event', icon: 'filter-dropdown-email-received', name: 'Email received', group: 'emails'},
{event: 'email_complaint_event', icon: 'filter-dropdown-email-flagged-as-spam', name: 'Email flagged as spam', group: 'emails'},
{event: 'email_failed_event', icon: 'filter-dropdown-email-bounced', name: 'Email bounced', group: 'emails'}
];
export default class MembersActivityEventTypeFilter extends Component {
@service settings;
@service feature;
get availableEventTypes() {
const extended = [...ALL_EVENT_TYPES(this.feature)];
if (this.feature.suppressionList) {
extended.push({event: 'email_complaint_event', icon: 'event-filter-email-spam', name: 'Email spam'});
}
// todo: remove condition when feature will be enabled
const extended = this.feature.suppressionList ? [...ALL_EVENT_TYPES_SUPPRESSION] : [...ALL_EVENT_TYPES];
if (this.settings.commentsEnabled !== 'off') {
extended.push({event: 'comment_event', icon: 'event-comment', name: 'Comments'});
}
if (this.settings.emailTrackClicks) {
extended.push({event: 'click_event', icon: 'event-click', name: 'Clicked link'});
extended.push({event: 'comment_event', icon: 'filter-dropdown-comments', name: 'Comments', group: 'others'});
}
if (this.feature.audienceFeedback) {
extended.push({event: 'feedback_event', icon: 'event-more-like-this', name: 'Feedback'});
extended.push({event: 'feedback_event', icon: 'filter-dropdown-feedback', name: 'Feedback', group: 'others'});
}
if (this.settings.emailTrackClicks) {
extended.push({event: 'click_event', icon: 'filter-dropdown-clicked-in-email', name: 'Clicked link in email', group: 'others'});
}
if (this.args.hiddenEvents?.length) {
@ -43,14 +54,22 @@ export default class MembersActivityEventTypeFilter extends Component {
get eventTypes() {
const excludedEvents = (this.args.excludedEvents || '').split(',');
return this.availableEventTypes.map(type => ({
return this.availableEventTypes.map((type, i) => ({
event: type.event,
icon: type.icon,
name: type.name,
divider: this.needDivider(type, this.availableEventTypes[i - 1]),
isSelected: !excludedEvents.includes(type.event)
}));
}
needDivider(event, prevEvent) {
if (!event?.group || !prevEvent?.group) {
return false;
}
return event.group !== prevEvent.group;
}
@action
toggleEventType(eventType) {
const excludedEvents = new Set(this.eventTypes.reject(type => type.isSelected).map(type => type.event));

90
ghost/admin/app/styles/layouts/member-activity.css
View file

@ -313,6 +313,68 @@
color: var(--black);
}
/* todo: remove class gh-member-activity-actions-menu--suppression after feature will be enabled */
/* Start of styles for dropdown for suppressionList feature */
.gh-member-activity-actions-menu-item {
min-height: 35px;
display: flex;
align-items: center;
justify-content: space-between;
}
.gh-member-activity-actions-menu--suppression {
min-width: 260px;
}
.gh-member-activity-actions-menu--suppression.gh-member-activity-actions-menu {
padding: 1rem 0;
}
.gh-member-activity-actions-menu--suppression.gh-member-activity-actions-menu .ember-power-select-option:first-child {
padding-top: 0;
}
.gh-member-activity-actions-menu--suppression.gh-member-activity-actions-menu .ember-power-select-option:last-child {
padding-bottom: 0;
}
.gh-member-activity-actions-menu--suppression.gh-member-activity-actions-menu .for-switch.x-small label {
width: 34px !important;
height: 20px !important;
padding: 0;
}
.gh-member-activity-actions-menu--suppression.gh-member-activity-actions-menu .for-switch.x-small {
display: flex;
align-items: center;
}
.gh-member-activity-actions-menu--suppression .ember-power-select-option > label {
width: 100%;
}
.gh-member-activity-actions-menu--suppression .gh-member-activity-actions-menu-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
fill: none;
}
.gh-member-activity-actions-menu--suppression.gh-member-activity-actions-menu .ember-power-select-option {
padding: 0.3rem 1.6rem;
}
.gh-member-activity-actions-menu--suppression.gh-member-activity-actions-menu .ember-power-select-option label {
padding: 0 6px 0 0;
color: var(--darkgrey);
}
.gh-member-activity-actions-menu--suppression .gh-member-activity-actions-menu-divider {
height: 1px;
margin: 1rem 0;
background: var(--lightgrey-l1);
}
/* End of styles for dropdown for suppressionList feature */
.gh-member-activity-actions-menu {
top: auto;
left: auto;
@ -320,20 +382,20 @@
margin-top: 8px;
}
.gh-member-activity-actions-menu ul {
max-height: 60vh !important;
.gh-member-activity-actions-menu .ember-power-select-options[role=listbox] {
max-height: 60vh;
}
.gh-member-activity-actions-menu ul li {
padding: 3px 2rem !important;
.gh-member-activity-actions-menu .ember-power-select-option {
padding: 3px 2rem;
}
.gh-member-activity-actions-menu ul li:first-of-type {
padding-top: 2rem !important;
.gh-member-activity-actions-menu .ember-power-select-option:first-child {
padding-top: 2rem;
}
.gh-member-activity-actions-menu ul li:last-of-type {
padding-bottom: 2rem !important;
.gh-member-activity-actions-menu .ember-power-select-option:last-child {
padding-bottom: 2rem;
}
.gh-member-activity-actions-menu h3 {
@ -344,18 +406,6 @@
cursor: default;
}
.gh-member-activity-actions-menu .ember-power-select-option {
padding: 4px 0;
}
.gh-member-activity-actions-menu .ember-power-select-option:first-child {
padding-top: 0;
}
.gh-member-activity-actions-menu .ember-power-select-option:last-child {
padding-bottom: 0;
}
.gh-member-activity-actions-menu .ember-power-select-option label {
padding: 0.25rem 2rem 0.25rem 0;
display: flex;

4
ghost/admin/public/assets/icons/filter-dropdown-clicked-in-email.svg Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.207 10.267a.5.5 0 0 0-1 0v1.808H10.4a.5.5 0 1 0 0 1h1.807v1.807a.5.5 0 1 0 1 0v-1.807h1.808a.5.5 0 0 0 0-1h-1.808v-1.808Z" fill="currentColor"/>
<path d="m8.666 14.485-.93.462a.493.493 0 0 1-.673-.243l-1.45-3.32-3.024 1.5a.483.483 0 0 1-.65-.198.527.527 0 0 1-.067-.244L1.6 1.758a.555.555 0 0 1 .302-.505.483.483 0 0 1 .557.079l8.181 6.76c.061.057.107.13.134.211a.554.554 0 0 1-.08.493c-.052.07-5.081 2.589-.196.165" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 629 B

3
ghost/admin/public/assets/icons/filter-dropdown-comments.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
<path d="M7.996 1.7C4.245 1.7 1.2 4.242 1.2 7.38c.018.795.212 1.574.567 2.276a5.105 5.105 0 0 0 1.472 1.78 2.044 2.044 0 0 1-.185 1.519 1.93 1.93 0 0 1-.499.583c-.2.156-.43.27-.675.332 0 0-.218.292.32.398 2.167.412 3.928-1.42 3.928-1.42v-.036c.614.147 1.244.22 1.876.22 3.751 0 6.796-2.54 6.796-5.68 0-3.139-3.052-5.652-6.804-5.652Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 489 B

3
ghost/admin/public/assets/icons/filter-dropdown-email-bounced.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
<path d="m10.232 9.901 3.264 3.263m-3.264 0L13.496 9.9M8.351 14.396l-2.13-2.122-2.289 1.182.09-3.391m0 0-2.68-2.68a1.075 1.075 0 0 1-.293-.977 1.095 1.095 0 0 1 .723-.84l10.49-3.5a1.095 1.095 0 0 1 1.407 1.408L12 8m-7.979 2.065 9.335-7.781" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 396 B

4
ghost/admin/public/assets/icons/filter-dropdown-email-flagged-as-spam.svg Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
<path d="m8.351 14.396-2.13-2.122-2.289 1.182.09-3.391m0 0-2.68-2.68a1.075 1.075 0 0 1-.293-.977 1.095 1.095 0 0 1 .723-.84l10.49-3.5a1.095 1.095 0 0 1 1.407 1.408L12 8m-7.979 2.065 9.335-7.781M11.356 10.665v1.912" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="11.334" cy="14.434" r=".667" fill="currentColor"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 437 B

4
ghost/admin/public/assets/icons/filter-dropdown-email-opened.svg Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
<path d="M14.25 7.12c0-.322-.096-.631-.27-.87-1.098-1.465-3.6-4.317-6.522-4.317-2.921 0-5.423 2.852-6.522 4.318-.173.238-.27.547-.27.868 0 .321.097.63.27.869 1.1 1.466 3.6 4.318 6.522 4.318.194 0 .058-.012.246-.035" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.458 9.215a2.094 2.094 0 1 0 0-4.189 2.094 2.094 0 0 0 0 4.188v0ZM12.5 8.662v5.666m-2.832-2.833h5.665" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 560 B

4
ghost/admin/public/assets/icons/filter-dropdown-email-received.svg Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
<path d="m8.351 14.396-2.13-2.122-2.289 1.182.09-3.391-2.68-2.68a1.076 1.076 0 0 1-.293-.977 1.095 1.095 0 0 1 .723-.84l10.49-3.5a1.095 1.095 0 0 1 1.407 1.408L11.79 9.11m1.567-6.827-9.336 7.78" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="m9.915 12.222 1.62 1.62a.221.221 0 0 0 .315 0l3.177-3.175" stroke="currentColor" stroke-linecap="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 469 B

4
ghost/admin/public/assets/icons/filter-dropdown-email-subscriptions.svg Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
<path d="M13.408 13.316H2.613a1.08 1.08 0 0 1-1.08-1.08V4.68a1.08 1.08 0 0 1 1.08-1.08H13.41a1.08 1.08 0 0 1 1.08 1.08l.003 7.557" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="m1.533 4.96 6.478 4.579L14.49 4.96" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 406 B

3
ghost/admin/public/assets/icons/filter-dropdown-feedback.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
<path d="m1.51 11.956.72.366c4.435 2.24 4.218 1.804 8.016 1.804 1.585 0 2.391-1.031 2.86-2.542v-.01l1.152-3.844v-.008a1.203 1.203 0 0 0-1.156-1.553h-2.963a1.22 1.22 0 0 1-.958-.468 1.196 1.196 0 0 1-.21-1.04l.532-2.01a1.022 1.022 0 0 0-.57-1.198 1.038 1.038 0 0 0-1.276.344l-2.955 4.54a1.219 1.219 0 0 1-.988.509H1.511M1.51 5.627v8.533" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 492 B

4
ghost/admin/public/assets/icons/filter-dropdown-logins.svg Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
<path d="M1.34 8.042h9.074M7.707 5.335l2.707 2.707-2.707 2.708" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2.218 11.649a6.59 6.59 0 0 0 3.2 2.727 6.204 6.204 0 0 0 4.114.162 6.521 6.521 0 0 0 3.385-2.468 7.1 7.1 0 0 0 1.301-4.114 7.102 7.102 0 0 0-1.3-4.112 6.52 6.52 0 0 0-3.386-2.469 6.203 6.203 0 0 0-4.114.161 6.591 6.591 0 0 0-3.2 2.728" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 540 B

3
ghost/admin/public/assets/icons/filter-dropdown-paid-subscriptions.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
<path d="M7.013 3.313V.5M4.2 10.813c0 1.406 1.256 1.874 2.813 1.874 1.556 0 2.812 0 2.812-1.874C9.825 8 4.2 8 4.2 5.186c0-1.875 1.256-1.875 2.813-1.875 1.556 0 2.812.713 2.812 1.876m-2.812 7.5V15.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 354 B

3
ghost/admin/public/assets/icons/filter-dropdown-payments.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
<path d="M5.15 3.3V.8m-2.5 9.166c0 1.25 1.117 1.667 2.5 1.667s2.5 0 2.5-1.667c0-2.5-5-2.5-5-5C2.65 3.3 3.767 3.3 5.15 3.3s2.5.633 2.5 1.666m-2.5 6.667v2.5M11.658 10.8v4.615M9.35 13.108h4.616" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 347 B

3
ghost/admin/public/assets/icons/filter-dropdown-signups.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
<path d="M1.7 12.299a6.573 6.573 0 0 1 8.135-2.65M7.314 7.172a3.286 3.286 0 1 0 0-6.573 3.286 3.286 0 0 0 0 6.573v0ZM12.154 10.193v5.294m-2.648-2.646H14.8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 311 B