From 26150ca76902793f075e4d30087f353663a052a9 Mon Sep 17 00:00:00 2001 From: James Morris Date: Wed, 17 Aug 2022 16:19:59 +0100 Subject: [PATCH] First iteration of adding in post and page columns to event tables - Adding in dummy column for page or post to various event table places - This still requires wiring up with real data refs https://github.com/TryGhost/Team/issues/1815 --- .../components/dashboard/charts/recents.hbs | 29 +++- .../app/components/member/activity-feed.hbs | 89 +++++----- .../components/members-activity/table-row.hbs | 21 ++- .../app/components/members-activity/table.hbs | 1 + ghost/admin/app/styles/components/lists.css | 164 ++++++++++++++++++ ghost/admin/app/styles/layouts/dashboard.css | 29 ++-- .../app/styles/layouts/member-activity.css | 22 ++- ghost/admin/app/styles/layouts/members.css | 6 +- 8 files changed, 293 insertions(+), 68 deletions(-) diff --git a/ghost/admin/app/components/dashboard/charts/recents.hbs b/ghost/admin/app/components/dashboard/charts/recents.hbs index b5487eff85..34795fd5a8 100644 --- a/ghost/admin/app/components/dashboard/charts/recents.hbs +++ b/ghost/admin/app/components/dashboard/charts/recents.hbs @@ -70,6 +70,7 @@
Member
Event
+
Page / Post
Time
@@ -93,23 +94,33 @@ {{#let (parse-member-event event eventsFetcher.hasMultipleNewsletters) as |parsedEvent|}}
- - {{parsedEvent.subject}} + + + {{parsedEvent.subject}} +
{{svg-jar parsedEvent.icon}} {{capitalize-first-letter parsedEvent.action}} - {{#if parsedEvent.url}} - "{{parsedEvent.object}}" - {{else}} - {{parsedEvent.object}} - {{/if}} - {{parsedEvent.info}} + {{#if parsedEvent.object}} + {{parsedEvent.object}} + {{/if}} + {{#if parsedEvent.info}} + {{parsedEvent.info}} + {{/if}}
+ {{!-- TODO: Wire up the new event page/post links in this column --}}
- {{moment-format parsedEvent.timestamp "DD MMM YYYY HH:mm"}} + {{#if parsedEvent.url}} + {{parsedEvent.object}} + {{else}} + — + {{/if}} +
+
+ {{moment-from-now parsedEvent.timestamp}}
{{/let}} diff --git a/ghost/admin/app/components/member/activity-feed.hbs b/ghost/admin/app/components/member/activity-feed.hbs index 26dc68a04b..006c5eaadb 100644 --- a/ghost/admin/app/components/member/activity-feed.hbs +++ b/ghost/admin/app/components/member/activity-feed.hbs @@ -9,52 +9,61 @@ {{#let (members-event-fetcher filter=(members-event-filter member=@member.id) pageSize=5) as |eventsFetcher|}}
-
-
- {{#if eventsFetcher.isLoading}} -
- {{else if eventsFetcher.data}} - {{#each eventsFetcher.data as |rawEvent|}} - {{#let (parse-member-event rawEvent eventsFetcher.hasMultipleNewsletters) as |event|}} -
-
-
- {{svg-jar event.icon class=event.iconClass}} -
-
-
- - - {{capitalize-first-letter event.action}} - {{#if event.url}} - "{{event.object}}" - {{else}} - {{event.object}} - {{/if}} - - {{#if event.email}} - "" +
+
Event
+
Page / Post
+
Time
+
+
+ {{#if eventsFetcher.isLoading}} +
+ {{else if eventsFetcher.data}} + {{#each eventsFetcher.data as |rawEvent|}} + {{#let (parse-member-event rawEvent eventsFetcher.hasMultipleNewsletters) as |event|}} +
+
+
+ {{svg-jar event.icon class=event.iconClass}} +
+
+
+ + + {{capitalize-first-letter event.action}} + {{#if event.object}} + {{event.object}} + {{/if}} + {{#if event.info}} + {{event.info}} {{/if}} - {{event.info}} - -
-
- {{moment-from-now event.timestamp}} -
+
- {{/let}} - {{/each}} + {{!-- TODO: Wire up the new event page/post links in this column --}} +
+ {{#if event.url}} + {{event.object}} + {{else if event.email}} + + {{else}} + — + {{/if}} +
+
+ {{moment-from-now event.timestamp}} +
+
+ {{/let}} + {{/each}} -
- See all activity → -
- {{else}} - - {{/if}} -
+
+ See all activity → +
+ {{else}} + + {{/if}}
diff --git a/ghost/admin/app/components/members-activity/table-row.hbs b/ghost/admin/app/components/members-activity/table-row.hbs index e8a701e747..abbdacddcb 100644 --- a/ghost/admin/app/components/members-activity/table-row.hbs +++ b/ghost/admin/app/components/members-activity/table-row.hbs @@ -21,19 +21,26 @@
{{capitalize-first-letter event.action}} - {{#if event.url}} - "{{event.object}}" - {{else}} + {{#if event.object}} {{event.object}} {{/if}} + {{#if event.info}} + {{event.info}} + {{/if}} - {{#if event.email}} - "" - {{/if}} - {{event.info}}
+ {{!-- TODO: Wire up the new event page/post links in this column --}} +
+ {{#if event.url}} + {{event.object}} + {{else if event.email}} + + {{else}} + — + {{/if}} +
{{moment-format event.timestamp "DD MMM YYYY HH:mm"}}
{{/let}} diff --git a/ghost/admin/app/components/members-activity/table.hbs b/ghost/admin/app/components/members-activity/table.hbs index 6633cbb935..8796f75c9d 100644 --- a/ghost/admin/app/components/members-activity/table.hbs +++ b/ghost/admin/app/components/members-activity/table.hbs @@ -5,6 +5,7 @@ Member {{/unless}} Event + Page / Post Time diff --git a/ghost/admin/app/styles/components/lists.css b/ghost/admin/app/styles/components/lists.css index e62a1925e1..8d71860b65 100644 --- a/ghost/admin/app/styles/components/lists.css +++ b/ghost/admin/app/styles/components/lists.css @@ -152,6 +152,26 @@ ul.nostyle li { width: 32px; } +.gh-list-nodata { + font-size: 1.5rem; + letter-spacing: 0; + text-decoration: none; + min-width: 54px; + color: var(--lightgrey); + font-weight: 500; +} + +.gh-list-separator { + font-size: 1.5rem; + letter-spacing: 0; + text-decoration: none; + color: var(--lightgrey); + font-weight: 700; + padding-left: 0.375em; + padding-right: 0.375em; +} + + /* Typography /* --------------------------------------------------- */ .gh-list h3 { @@ -428,3 +448,147 @@ ul.nostyle li { height: calc(100vh - 96px); } } + + +/* --------------------------------- +Mini List */ + +.gh-list-mini { + flex: 1; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.gh-list-mini-header, +.gh-list-mini-item { + display: grid; + grid-template-columns: 35% 45% 20%; +} + +.gh-list-mini-header { + padding: 16px 0 8px; + border-bottom: 1px solid var(--whitegrey); + margin: 0 0 8px; +} + +.gh-list-mini-title { + align-items: center; + line-height: 1em; + white-space: nowrap; + font-size: 1.1rem; + font-weight: 500; + letter-spacing: 0.03em; + color: var(--midgrey); + padding: 0 20px 8px 0; + text-transform: uppercase; + white-space: nowrap; +} + +.gh-list-mini-body { + flex: 1; + display: flex; + flex-direction: column; + justify-content: space-evenly; +} + +.gh-list-mini-item { + padding: 14px 0; + padding: 4px 0; +} + +.gh-list-mini-item:nth-child(3) { + border-bottom: 0 none; +} + +.gh-list-mini-item:last-child { + border-bottom: 0; +} + +.gh-list-mini-member { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + min-width: 0; +} + +.gh-list-mini-text { + font-weight: 600; + font-size: 1.5rem; + letter-spacing: 0; + color: var(--darkgrey); + padding: 0 32px 0 0; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.gh-list-mini-subtext { + font-weight: 500; + font-size: 1.4rem; + color: var(--middarkgrey); + text-decoration: none; + padding: 0 12px 0 0; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.gh-list-mini-subtext > a { + color: var(--black); + font-weight: 600; +} + +.gh-list-mini-item svg { + width: 20px; + min-width: 20px; + height: 20px; + margin: 0 0.5rem 0 -4px; +} + +.gh-list-mini-item-sub { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + min-height: 32px; + min-width: 0; +} + +.gh-list-mini-item-sub > a { + color: var(--black); + font-weight: 500; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + padding: 0 24px 0 0; +} + +.gh-list-mini-footer { + border-top: 1px solid var(--whitegrey); + padding: 16px 0 4px; + margin: 8px 0 0; +} + +.gh-list-mini-date { + font-size: 1.3rem; + color: var(--midlightgrey); + text-align: right; + padding: 3px 0 0 0; + white-space: nowrap; +} + +.gh-list-mini-author { + font-size: 1.3rem; + color: var(--midlightgrey); + text-align: right; + padding: 1px 0 0 0; + white-space: nowrap; +} + +.gh-list-mini-empty { + flex: 1; +} \ No newline at end of file diff --git a/ghost/admin/app/styles/layouts/dashboard.css b/ghost/admin/app/styles/layouts/dashboard.css index 832b02a0c2..daade1cd55 100644 --- a/ghost/admin/app/styles/layouts/dashboard.css +++ b/ghost/admin/app/styles/layouts/dashboard.css @@ -689,6 +689,14 @@ Dashboard List */ background: linear-gradient(315deg,rgba(249, 249, 250, 0.5) 60%,rgba(255, 255, 255, 0.5)); } +.gh-dashboard-list-member { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + min-width: 0; +} + .gh-dashboard-list-text { font-weight: 600; font-size: 1.5rem; @@ -706,7 +714,7 @@ Dashboard List */ font-size: 1.4rem; color: var(--middarkgrey); text-decoration: none; - padding: 0 32px 0 0; + padding: 0 12px 0 0; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; @@ -734,6 +742,15 @@ Dashboard List */ min-width: 0; } +.gh-dashboard-list-item-sub > a { + color: var(--black); + font-weight: 500; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + padding: 0 32px 0 0; +} + .gh-dashboard-list-footer { border-top: 1px solid var(--whitegrey); padding: 20px 0 0; @@ -1137,14 +1154,6 @@ Dashboard Recents */ width: 80%; overflow: hidden; color: var(--darkgrey); - display: flex; - justify-content: flex-start; - align-items: center; -} - -.gh-dashboard-recents .gh-dashboard-list-item a > span { - display: inline-block; - height: 57px; } .gh-dashboard-recents .gh-dashboard-list-title:last-child, @@ -1189,7 +1198,7 @@ Dashboard Recents */ .gh-dashboard-recents-activity .gh-dashboard-list-header, .gh-dashboard-recents-activity .gh-dashboard-list-item { - grid-template-columns: 30% 40% 30%; + grid-template-columns: 30% 25% 30% minmax(0, 15%); } .gh-dashboard-recents-activity .gh-dashboard-list-title:nth-child(2), diff --git a/ghost/admin/app/styles/layouts/member-activity.css b/ghost/admin/app/styles/layouts/member-activity.css index af3256ace2..7a64ee2010 100644 --- a/ghost/admin/app/styles/layouts/member-activity.css +++ b/ghost/admin/app/styles/layouts/member-activity.css @@ -88,8 +88,23 @@ color: var(--midgrey); } +.gh-members-activity .gh-list-scrolling thead th:nth-child(2) { + width: 25%; + min-width: 200px; +} + +.gh-members-activity.gh-members-activity-single .gh-list-scrolling thead th:nth-child(2) { + width: 50%; + min-width: 200px; +} + +.gh-members-activity:not(.gh-members-activity-single) .gh-list-scrolling thead th:nth-child(3) { + width: 30%; + min-width: 200px; +} + .gh-members-activity .gh-list-scrolling thead th:last-child { - width: 18%; + width: 15%; } .gh-members-activity .gh-list-scrolling tbody .gh-list-data:last-child { @@ -105,6 +120,11 @@ margin-bottom: 4px; } +.gh-members-activity .gh-list .gh-list-data a { + font-weight: 500; + color: var(--black); +} + .gh-list-data-event { display: flex; justify-content: flex-start; diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css index 87e3b37338..875e24f45d 100644 --- a/ghost/admin/app/styles/layouts/members.css +++ b/ghost/admin/app/styles/layouts/members.css @@ -1166,7 +1166,7 @@ textarea.gh-member-details-textarea { flex-shrink: 0; width: 24px; height: 24px; - margin-right: 1rem; + margin-right: 0.25rem; } .gh-member-feed-icon svg { @@ -1190,6 +1190,10 @@ textarea.gh-member-details-textarea { padding-top: 16px; } +.gh-member-feed-footer a { + font-weight: 600; +} + /* Import modal /* ---------------------------------------------------------- */