Recent post and member activity table updates for new Dashboard

refs: https://github.com/TryGhost/Team/issues/1531

- added in published dates if newsletters not enabled
- also tried out a state to remove engagement if members not enabled
This commit is contained in:
James Morris 2022-05-04 16:45:34 +01:00
parent 6a28de85b8
commit 516a7c3701
4 changed files with 46 additions and 23 deletions

View File

@ -7,10 +7,10 @@
<Dashboard::V5::Charts::Overview />
{{/if}}
<Dashboard::V5::Charts::Anchor />
{{/if}}
{{#if this.areNewslettersEnabled}}
<Dashboard::V5::Charts::Engagement />
{{#if this.areNewslettersEnabled}}
<Dashboard::V5::Charts::Engagement />
{{/if}}
{{/if}}
<Dashboard::V5::Charts::Recents />

View File

@ -13,11 +13,15 @@
{{/if}}
</div>
{{#if this.postsTabSelected}}
<div class="gh-dashboard5-recents-posts gh-dashboard5-list">
<div class="gh-dashboard5-recents-posts gh-dashboard5-list {{unless this.areNewslettersEnabled 'is-single'}}">
<div class="gh-dashboard5-list-header">
<div class="gh-dashboard5-list-title">Title</div>
<div class="gh-dashboard5-list-title">Sends</div>
<div class="gh-dashboard5-list-title">Open rate</div>
{{#if this.areNewslettersEnabled}}
<div class="gh-dashboard5-list-title">Sends</div>
<div class="gh-dashboard5-list-title">Open rate</div>
{{else}}
<div class="gh-dashboard5-list-title">Published</div>
{{/if}}
</div>
<div class="gh-dashboard5-list-body">
{{#each this.posts as |post|}}
@ -25,18 +29,31 @@
<div class="gh-dashboard5-list-item-sub">
<span class="gh-dashboard5-list-text">{{post.title}}</span>
</div>
<div class="gh-dashboard5-list-item-sub">
{{!-- DEMO <span class="gh-dashboard5-metric-minivalue">{{format-number 3294}}</span> --}}
<span class="gh-dashboard5-metric-minivalue">{{format-number post.email.emailCount}}</span>
</div>
<div class="gh-dashboard5-list-item-sub">
<span class="gh-dashboard5-rate-bar">
{{!-- DEMO <span class="gh-dashboard5-metric-minivalue">75%</span> --}}
{{!-- DEMO <span class="gh-dashboard5-rate-amount"><span style={{html-safe (concat "width: " 75 "%;")}}/></span> --}}
<span class="gh-dashboard5-metric-minivalue">{{post.email.openRate}}%</span>
<span class="gh-dashboard5-rate-amount"><span style={{html-safe (concat "width: " post.email.openRate "%;")}}/></span>
</span>
</div>
{{#if this.areNewslettersEnabled}}
<div class="gh-dashboard5-list-item-sub">
<span class="gh-dashboard5-metric-minivalue">
{{#if post.email}}
{{format-number post.email.emailCount}}
{{else}}
&mdash;
{{/if}}
</span>
</div>
<div class="gh-dashboard5-list-item-sub">
<span class="gh-dashboard5-rate-bar">
{{#if post.email}}
<span class="gh-dashboard5-metric-minivalue">{{post.email.openRate}}%</span>
<span class="gh-dashboard5-rate-amount"><span style={{html-safe (concat "width: " post.email.openRate "%;")}}/></span>
{{else}}
<span class="gh-dashboard5-metric-minivalue">&mdash;</span>
{{/if}}
</span>
</div>
{{else}}
<div class="gh-dashboard5-list-item-sub">
<span class="gh-dashboard5-list-subtext">{{moment-format post.published_at "D MMM YYYY HH:mm"}}</span>
</div>
{{/if}}
</LinkTo>
{{else}}
<div class="gh-dashboard5-list-empty">

View File

@ -53,7 +53,10 @@ export default class Recents extends Component {
}
get areMembersEnabled() {
const enabled = this.dashboardStats.siteStatus?.membersEnabled;
return enabled;
return this.dashboardStats.siteStatus?.membersEnabled;
}
get areNewslettersEnabled() {
return this.dashboardStats.siteStatus?.newslettersEnabled;
}
}

View File

@ -1092,6 +1092,11 @@ Dashboard v5 Recents */
margin-left: -4px; /* grid layout adjustments */
}
.gh-dashboard5-recents-posts.is-single .gh-dashboard5-list-header,
.gh-dashboard5-recents-posts.is-single .gh-dashboard5-list-item {
grid-template-columns: 70% 30%;
}
/* ---------------------------------
Dashboard v5 What's New */
@ -1469,17 +1474,15 @@ Dashboard v5 Misc */
}
.gh-dashboard5-rate-amount > span {
/* background: var(--purple); */
background: rgb(213,184,255);
background: linear-gradient(90deg, rgba(213,184,255,1) 0%, rgba(142,66,255,1) 100%);
border-top-right-radius: 2.5px;
border-bottom-right-radius: 2.5px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
min-width: 2px;
}