From f63328e2cfb4488f777078f18491aaab9a6cfc03 Mon Sep 17 00:00:00 2001 From: James Morris Date: Wed, 26 Jan 2022 09:52:51 +0000 Subject: [PATCH] Added basic styling with icons for events and tided structure refs https://github.com/TryGhost/Team/issues/1277 --- .../components/members-activity/table-row.hbs | 19 ++++---- ghost/admin/app/helpers/parse-member-event.js | 48 ++++++++++++++++++- ghost/admin/app/styles/app-dark.css | 6 +++ ghost/admin/app/styles/app.css | 1 + .../app/styles/layouts/member-activity.css | 38 +++++++++++++++ .../admin/app/templates/members-activity.hbs | 9 +++- .../icons/event-canceled-subscription.svg | 8 ++++ .../icons/event-email-delivery-failed.svg | 6 +++ .../public/assets/icons/event-logged-in.svg | 5 ++ .../assets/icons/event-made-a-payment.svg | 7 +++ .../assets/icons/event-opened-email.svg | 6 +++ .../assets/icons/event-received-email.svg | 5 ++ .../public/assets/icons/event-signed-up.svg | 6 +++ .../icons/event-started-subscription.svg | 6 +++ .../icons/event-subscribed-to-email.svg | 8 ++++ .../icons/event-unsubscribed-from-email.svg | 5 ++ 16 files changed, 172 insertions(+), 11 deletions(-) create mode 100644 ghost/admin/app/styles/layouts/member-activity.css create mode 100644 ghost/admin/public/assets/icons/event-canceled-subscription.svg create mode 100644 ghost/admin/public/assets/icons/event-email-delivery-failed.svg create mode 100644 ghost/admin/public/assets/icons/event-logged-in.svg create mode 100644 ghost/admin/public/assets/icons/event-made-a-payment.svg create mode 100644 ghost/admin/public/assets/icons/event-opened-email.svg create mode 100644 ghost/admin/public/assets/icons/event-received-email.svg create mode 100644 ghost/admin/public/assets/icons/event-signed-up.svg create mode 100644 ghost/admin/public/assets/icons/event-started-subscription.svg create mode 100644 ghost/admin/public/assets/icons/event-subscribed-to-email.svg create mode 100644 ghost/admin/public/assets/icons/event-unsubscribed-from-email.svg diff --git a/ghost/admin/app/components/members-activity/table-row.hbs b/ghost/admin/app/components/members-activity/table-row.hbs index 445a0e50f6..5aa2741852 100644 --- a/ghost/admin/app/components/members-activity/table-row.hbs +++ b/ghost/admin/app/components/members-activity/table-row.hbs @@ -10,14 +10,17 @@ {{/unless}}
- {{event.action}} - {{event.object}} - - {{#if event.email}} - "" - {{/if}} - - {{event.info}} +
+ {{svg-jar event.icon}} + + {{event.action}} + {{event.object}} + + {{#if event.email}} + "" + {{/if}} + {{event.info}} +
{{moment-format event.timestamp "D MMM YYYY HH:MM"}}
diff --git a/ghost/admin/app/helpers/parse-member-event.js b/ghost/admin/app/helpers/parse-member-event.js index c77864accb..e8dca6601d 100644 --- a/ghost/admin/app/helpers/parse-member-event.js +++ b/ghost/admin/app/helpers/parse-member-event.js @@ -26,7 +26,53 @@ export default function parseMemberEvent(event) { /* internal helper functions */ function getIcon(event) { - return event.type; + let icon; + + if (event.type === 'signup_event') { + icon = 'signed-up'; + } + + if (event.type === 'login_event') { + icon = 'logged-in'; + } + + if (event.type === 'payment_event') { + icon = 'made-a-payment'; + } + + if (event.type === 'newsletter_event') { + if (event.data.subscribed) { + icon = 'subscribed-to-email'; + } else { + icon = 'unsubscribed-from-email'; + } + } + + if (event.type === 'subscription_event') { + if (event.data.from_plan === null) { + icon = 'started-subscription'; + } + + if (event.data.to_plan === null) { + icon = 'canceled-subscription'; + } + + icon = 'changed'; + } + + if (event.type === 'email_opened_event') { + icon = 'opened-email'; + } + + if (event.type === 'email_delivered_event') { + icon = 'received-email'; + } + + if (event.type === 'email_failed_event') { + icon = 'email-delivery-failed'; + } + + return 'event-' + icon; } function getAction(event) { diff --git a/ghost/admin/app/styles/app-dark.css b/ghost/admin/app/styles/app-dark.css index 40529972cf..076aee22d8 100644 --- a/ghost/admin/app/styles/app-dark.css +++ b/ghost/admin/app/styles/app-dark.css @@ -58,6 +58,7 @@ @import "layouts/whatsnew.css"; @import "layouts/tags.css"; @import "layouts/members.css"; +@import "layouts/member-activity.css"; @import "layouts/error.css"; @import "layouts/apps.css"; @import "layouts/packages.css"; @@ -959,6 +960,11 @@ input:focus, background: var(--dark-main-bg-color); } +/* Members activity */ +.gh-members-activity-icon svg path { + stroke: #fff; +} + /* Portal */ .gh-portal-settings-maintabs { border: 1px solid color-mod(var(--darkgrey) l(-27%) blackness(+15%)); diff --git a/ghost/admin/app/styles/app.css b/ghost/admin/app/styles/app.css index 284b700a04..d6f638d47b 100644 --- a/ghost/admin/app/styles/app.css +++ b/ghost/admin/app/styles/app.css @@ -58,6 +58,7 @@ @import "layouts/whatsnew.css"; @import "layouts/tags.css"; @import "layouts/members.css"; +@import "layouts/member-activity.css"; @import "layouts/error.css"; @import "layouts/apps.css"; @import "layouts/packages.css"; diff --git a/ghost/admin/app/styles/layouts/member-activity.css b/ghost/admin/app/styles/layouts/member-activity.css new file mode 100644 index 0000000000..e8de280c5d --- /dev/null +++ b/ghost/admin/app/styles/layouts/member-activity.css @@ -0,0 +1,38 @@ +.gh-members-activity-single .members-header { + height: 88px; +} + +.gh-members-activity .gh-member-detail-overview { + padding: 0 0 32px; +} + +.gh-members-activity-single .gh-list-scrolling { + height: calc(100vh - 200px); +} + +.gh-list-data-event { + display: flex; + justify-content: flex-start; + align-items: center; +} + +.gh-members-activity-description { + display: inline-block; + text-transform: lowercase; +} + +.gh-members-activity-description:first-letter { + text-transform: uppercase; +} + +.gh-members-activity-icon { + width: 16px; + height: 16px; + display: inline-block; + margin: 0 0.5rem 0 0; +} + +.gh-members-activity-icon svg { + width: 16px; + height: 16px; +} diff --git a/ghost/admin/app/templates/members-activity.hbs b/ghost/admin/app/templates/members-activity.hbs index c3b7386b52..5c82b68e7b 100644 --- a/ghost/admin/app/templates/members-activity.hbs +++ b/ghost/admin/app/templates/members-activity.hbs @@ -1,9 +1,14 @@ -
+

Members {{svg-jar "arrow-right"}} - Activity + {{#if this.memberRecord}} + Activity + {{svg-jar "arrow-right"}} + {{else}} + Activity + {{/if}}

diff --git a/ghost/admin/public/assets/icons/event-canceled-subscription.svg b/ghost/admin/public/assets/icons/event-canceled-subscription.svg new file mode 100644 index 0000000000..8fa621a178 --- /dev/null +++ b/ghost/admin/public/assets/icons/event-canceled-subscription.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/ghost/admin/public/assets/icons/event-email-delivery-failed.svg b/ghost/admin/public/assets/icons/event-email-delivery-failed.svg new file mode 100644 index 0000000000..09ee050e99 --- /dev/null +++ b/ghost/admin/public/assets/icons/event-email-delivery-failed.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/ghost/admin/public/assets/icons/event-logged-in.svg b/ghost/admin/public/assets/icons/event-logged-in.svg new file mode 100644 index 0000000000..6ad5a780b9 --- /dev/null +++ b/ghost/admin/public/assets/icons/event-logged-in.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/ghost/admin/public/assets/icons/event-made-a-payment.svg b/ghost/admin/public/assets/icons/event-made-a-payment.svg new file mode 100644 index 0000000000..8ed111ea0e --- /dev/null +++ b/ghost/admin/public/assets/icons/event-made-a-payment.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/ghost/admin/public/assets/icons/event-opened-email.svg b/ghost/admin/public/assets/icons/event-opened-email.svg new file mode 100644 index 0000000000..088aef5f6a --- /dev/null +++ b/ghost/admin/public/assets/icons/event-opened-email.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/ghost/admin/public/assets/icons/event-received-email.svg b/ghost/admin/public/assets/icons/event-received-email.svg new file mode 100644 index 0000000000..fe3a750060 --- /dev/null +++ b/ghost/admin/public/assets/icons/event-received-email.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/ghost/admin/public/assets/icons/event-signed-up.svg b/ghost/admin/public/assets/icons/event-signed-up.svg new file mode 100644 index 0000000000..3030aa76d0 --- /dev/null +++ b/ghost/admin/public/assets/icons/event-signed-up.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/ghost/admin/public/assets/icons/event-started-subscription.svg b/ghost/admin/public/assets/icons/event-started-subscription.svg new file mode 100644 index 0000000000..17f149cbec --- /dev/null +++ b/ghost/admin/public/assets/icons/event-started-subscription.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/ghost/admin/public/assets/icons/event-subscribed-to-email.svg b/ghost/admin/public/assets/icons/event-subscribed-to-email.svg new file mode 100644 index 0000000000..4639e48b48 --- /dev/null +++ b/ghost/admin/public/assets/icons/event-subscribed-to-email.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/ghost/admin/public/assets/icons/event-unsubscribed-from-email.svg b/ghost/admin/public/assets/icons/event-unsubscribed-from-email.svg new file mode 100644 index 0000000000..ea07e534cf --- /dev/null +++ b/ghost/admin/public/assets/icons/event-unsubscribed-from-email.svg @@ -0,0 +1,5 @@ + + + + +