TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 20:03:12 +03:00
Code Issues Projects Releases Wiki Activity

Merged conflicts

Browse Source
This commit is contained in:
James Morris 2022-03-24 14:02:13 +00:00
parent a51b625a37
commit ef285a2f02
17 changed files with 272 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
ghost/admin/app/components/dashboard/dashboard-v5.hbs
View File

@ -4,11 +4,11 @@
<GhLoadingSpinner />
{{else}}
{{#if this.areMembersEnabled}}
<section class="prototype-section">
<section class="gh-dashboard5-section">
<Dashboard::V5::ChartMembersCounts />
</section>
<section class="prototype-section">
<section class="gh-dashboard5-section">
<div class="prototype-selection">
<PowerSelect
@selected={{this.selectedDaysOption}}
@ -25,62 +25,56 @@
</PowerSelect>
</div>
<article class="gh-dashboard-box">
<Dashboard::V5::ChartTotalMembers @days={{this.days}} />
</article>
<div class="gh-dashboard5-growth">
<article class="gh-dashboard5-box">
<Dashboard::V5::ChartTotalMembers @days={{this.days}} />
</article>
{{#if this.hasPaidTiers}}
<div class="prototype-section">
<div class="prototype-counts">
<article class="prototype-box">
<Dashboard::V5::ChartMonthlyRevenue @days={{this.days}} />
</article>
{{#if this.hasPaidTiers}}
<article class="gh-dashboard5-box">
<Dashboard::V5::ChartMonthlyRevenue @days={{this.days}} />
</article>
<article class="prototype-box">
<Dashboard::V5::ChartTotalPaid @days={{this.days}} />
</article>
</div>
</div>
<article class="gh-dashboard5-box">
<Dashboard::V5::ChartTotalPaid @days={{this.days}} />
</article>
<div class="prototype-section">
<div class="prototype-counts">
<article class="prototype-box">
<Dashboard::V5::ChartPaidMembers @days={{this.days}}/>
</article>
<article class="gh-dashboard5-box">
<Dashboard::V5::ChartPaidMembers @days={{this.days}}/>
</article>
<article class="prototype-box">
<Dashboard::V5::ChartPaidMix />
</article>
</div>
</div>
{{/if}}
<article class="gh-dashboard5-box">
<Dashboard::V5::ChartPaidMix />
</article>
{{/if}}
</div>
</section>
<section class="prototype-section">
<section class="gh-dashboard5-section">
<Dashboard::V5::ChartEngagement />
</section>
{{/if}}
{{#if this.areNewslettersEnabled}}
<section class="prototype-section">
<Dashboard::V5::ChartEmailOpenRate />
<section class="gh-dashboard5-section">
<Dashboard::V5::ChartEmail />
</section>
{{/if}}
<section class="prototype-section">
<section class="gh-dashboard5-section">
<h2>Recent posts</h2>
<article class="gh-dashboard-box">
<article class="gh-dashboard5-box">
Recent posts
</article>
</section>
<section class="prototype-section">
<section class="gh-dashboard5-section">
<h2>Activity</h2>
<Dashboard::LatestMemberActivity />
</section>
<section class="prototype-section">
<section class="gh-dashboard5-section">
<h2>Resources</h2>
<article class="gh-dashboard-box">
<article class="gh-dashboard5-box">
<Dashboard::V5::ResourceGeneral />
</article>
</section>

29
ghost/admin/app/components/dashboard/v5/chart-email-open-rate.hbs
View File

@ -1,29 +0,0 @@
<h2>Email</h2>
<div class="prototype-counts">
<div class="prototype-counts col">
<div class="prototype-box">
<div class="number">{{this.dataSubscribers}}</div>
<div>Newsletter subscribers</div>
</div>
<div class="prototype-box">
<div class="number">{{this.dataEmailsSent}}</div>
<div>Emails sent in the past 30 days</div>
</div>
</div>
<div class="prototype-box">
<h4>Email open rate</h4>
{{#if this.loading}}
<div class="prototype-placeholder" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
{{else}}
<EmberChart
@type={{this.chartType}}
@data={{this.chartData}}
@options={{this.chartOptions}}
@height={{this.chartHeight}} />
{{/if}}
</div>
</div>

28
ghost/admin/app/components/dashboard/v5/chart-email.hbs Normal file
View File

@ -0,0 +1,28 @@
<h3>Email</h3>
<div class="gh-dashboard5-container gh-dashboard5-email">
<div class="gh-dashboard5-box">
<h4 class="gh-dashboard5-metric">Newsletter subscribers</h4>
<div class="gh-dashboard5-number is-small">{{this.dataSubscribers}}</div>
<div class="gh-dashboard5-percentage is-positive">+2.2%</div>
</div>
<div class="gh-dashboard5-box">
<h4 class="gh-dashboard5-metric">Emails sent in the past 30 days</h4>
<div class="gh-dashboard5-number is-small">{{this.dataEmailsSent}}</div>
<div class="gh-dashboard5-percentage is-positive">+2.2%</div>
</div>
<div class="gh-dashboard5-box">
<h4 class="gh-dashboard5-metric is-main">Email open rate</h4>
{{#if this.loading}}
<div class="gh-dashboard5-loading" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
{{else}}
<EmberChart
@type={{this.chartType}}
@data={{this.chartData}}
@options={{this.chartOptions}}
@height={{this.chartHeight}} />
{{/if}}
</div>
</div>

2
ghost/admin/app/components/dashboard/v5/chart-email-open-rate.js → ghost/admin/app/components/dashboard/v5/chart-email.js
View File

@ -64,6 +64,6 @@ export default class ChartEmailOpenRate extends Component {
}
get chartHeight() {
return 150;
return 100;
}
}

16
ghost/admin/app/components/dashboard/v5/chart-engagement.hbs
View File

@ -16,14 +16,16 @@
</PowerSelect>
</div>
<div class="prototype-counts">
<div class="prototype-box">
<div class="number">{{this.data30Days}}</div>
<div>Engaged in past 30 days</div>
<div class="gh-dashboard5-container">
<div class="gh-dashboard5-box">
<h4 class="gh-dashboard5-metric">Engaged in past 30 days</h4>
<div class="gh-dashboard5-number is-small">{{this.data30Days}}</div>
<div class="gh-dashboard5-percentage is-positive">+2.2%</div>
</div>
<div class="prototype-box">
<div class="number">{{this.data7Days}}</div>
<div>Engaged in past 7 days</div>
<div class="gh-dashboard5-box">
<h4 class="gh-dashboard5-metric">Engaged in past 7 days</h4>
<div class="gh-dashboard5-number is-small">{{this.data7Days}}</div>
<div class="gh-dashboard5-percentage is-negative">-1.1%</div>
</div>
</div>

26
ghost/admin/app/components/dashboard/v5/chart-members-counts.hbs
View File

@ -1,16 +1,18 @@
<div class="prototype-counts">
<div class="prototype-box">
<div class="number">{{format-number this.totalMembers}}</div>
<div>{{gh-pluralize this.totalMembers "Total member" without-count=true}}</div>
<h3>Overview</h3>
<div class="gh-dashboard5-container">
<div class="gh-dashboard5-box">
<h4 class="gh-dashboard5-metric">{{gh-pluralize this.totalMembers "Total member" without-count=true}}</h4>
<div class="gh-dashboard5-number">{{format-number this.totalMembers}}</div>
<div class="gh-dashboard5-percentage is-positive">+2.2%</div>
</div>
<div class="prototype-box">
<div class="number">{{format-number this.paidMembers}}</div>
<div>{{gh-pluralize this.paidMembers "Paid member" without-count=true}}</div>
<div class="gh-dashboard5-box">
<h4 class="gh-dashboard5-metric">{{gh-pluralize this.paidMembers "Paid member" without-count=true}}</h4>
<div class="gh-dashboard5-number">{{format-number this.paidMembers}}</div>
<div class="gh-dashboard5-percentage is-positive">+3.3%</div>
</div>
<div class="prototype-box">
<div class="number">{{format-number this.freeMembers}}</div>
<div>{{gh-pluralize this.freeMembers "Free member" without-count=true}}</div>
<div class="gh-dashboard5-box">
<h4 class="gh-dashboard5-metric">{{gh-pluralize this.freeMembers "Free member" without-count=true}}</h4>
<div class="gh-dashboard5-number">{{format-number this.freeMembers}}</div>
<div class="gh-dashboard5-percentage is-negative">-1.1%</div>
</div>
</div>

4
ghost/admin/app/components/dashboard/v5/chart-monthly-revenue.hbs
View File

@ -1,6 +1,6 @@
<h4>MRR</h4>
<h4 class="gh-dashboard5-metric is-main">Monthly revenue (MMR)</h4>
{{#if this.loading}}
<div class="prototype-placeholder" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
<div class="gh-dashboard5-loading" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
{{else}}
<EmberChart {{did-update this.loadCharts @days}}
@type={{this.chartType}}

2
ghost/admin/app/components/dashboard/v5/chart-monthly-revenue.js
View File

@ -53,6 +53,6 @@ export default class ChartMonthlyRevenue extends Component {
}
get chartHeight() {
return 150;
return 100;
}
}

4
ghost/admin/app/components/dashboard/v5/chart-paid-members.hbs
View File

@ -1,6 +1,6 @@
<h4>Paid members</h4>
<h4 class="gh-dashboard5-metric is-main">Paid members</h4>
{{#if this.loading}}
<div class="prototype-placeholder" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
<div class="gh-dashboard5-loading" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
{{else}}
<EmberChart {{did-update this.loadCharts @days}}
@type={{this.chartType}}

2
ghost/admin/app/components/dashboard/v5/chart-paid-members.js
View File

@ -60,6 +60,6 @@ export default class ChartPaidMembers extends Component {
}
get chartHeight() {
return 150;
return 100;
}
}

4
ghost/admin/app/components/dashboard/v5/chart-paid-mix.hbs
View File

@ -15,10 +15,10 @@
</PowerSelect>
</div>
<h4>Paid mix</h4>
<h4 class="gh-dashboard5-metric is-main">Paid mix</h4>
{{#if this.loading}}
<div class="prototype-placeholder" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
<div class="gh-dashboard5-loading" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
{{else}}
<EmberChart
@type={{this.chartType}}

2
ghost/admin/app/components/dashboard/v5/chart-paid-mix.js
View File

@ -97,6 +97,6 @@ export default class ChartPaidMix extends Component {
}
get chartHeight() {
return 150;
return 100;
}
}

4
ghost/admin/app/components/dashboard/v5/chart-total-members.hbs
View File

@ -1,6 +1,6 @@
<h4>Total members</h4>
<h4 class="gh-dashboard5-metric is-main">Total members</h4>
{{#if this.loading}}
<div class="prototype-placeholder" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
<div class="gh-dashboard5-loading" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
{{else}}
<EmberChart {{did-update this.loadCharts @days}}
@type={{this.chartType}}

2
ghost/admin/app/components/dashboard/v5/chart-total-members.js
View File

@ -53,6 +53,6 @@ export default class ChartTotalMembers extends Component {
}
get chartHeight() {
return 300;
return 75;
}
}

4
ghost/admin/app/components/dashboard/v5/chart-total-paid.hbs
View File

@ -1,6 +1,6 @@
<h4>Total paid</h4>
<h4 class="gh-dashboard5-metric is-main">Total paid</h4>
{{#if this.loading}}
<div class="prototype-placeholder" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
<div class="gh-dashboard5-loading" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
{{else}}
<EmberChart {{did-update this.loadCharts @days}}
@type={{this.chartType}}

2
ghost/admin/app/components/dashboard/v5/chart-total-paid.js
View File

@ -53,6 +53,6 @@ export default class ChartTotalPaid extends Component {
}
get chartHeight() {
return 150;
return 100;
}
}

176
ghost/admin/app/styles/layouts/dashboard.css
View File

@ -1138,3 +1138,179 @@ a.gh-dashboard-container {
font-size: 24px;
}
.gh-dashboard5 h3 {
margin: 0 0 12px;
}
.gh-dashboard5-section {
margin-bottom: 40px;
}
.gh-dashboard5-container {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 0;
}
.gh-dashboard5-box {
flex: 1;
border: 1px solid #ebeef0;
padding: 28px;
border-radius: 3px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.gh-dashboard5-container .gh-dashboard5-box {
border-radius: 0;
border-width: 1px 0 1px 1px;
}
.gh-dashboard5-container .gh-dashboard5-box:first-child {
border-radius: 3px 0 0 3px;
}
.gh-dashboard5-container .gh-dashboard5-box:last-child {
border-radius: 0 3px 3px 0;
border-width: 1px;
}
.gh-dashboard5-number {
display: flex;
align-items: flex-start;
font-size: 3.9rem;
line-height: 4rem;
font-weight: 600;
color: #15171a;
letter-spacing: -.1px;
line-height: 1;
white-space: nowrap;
}
.gh-dashboard5-number.is-small {
font-size: 2.8rem;
}
.gh-dashboard5-metric {
display: flex;
align-items: center;
font-size: 1.1rem;
text-transform: uppercase;
font-weight: 500;
letter-spacing: .2px;
margin: 0 0 4px;
padding: 0;
color: var(--black);
}
.gh-dashboard5-metric.is-main {
margin-bottom: 24px;
}
.gh-dashboard5-percentage {
flex: 0;
background: var(--whitegrey-d1);
border-radius: 3px;
font-size: 1.2rem;
line-height: 1;
font-weight: 500;
letter-spacing: 0;
color: var(--midgrey);
padding: 2px 4px;
margin: 5px 0 1px 0;
}
.gh-dashboard5-percentage.is-positive {
background: color-mod(var(--green) a(13%));
color: color-mod(var(--green) l(-5%));
}
.gh-dashboard5-percentage.is-negative {
background: color-mod(var(--yellow) a(20%));
color: color-mod(var(--yellow) l(-8%));
}
.gh-dashboard5-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.gh-dashboard5-selection {
margin: 0 -8px 6px 0;
}
.gh-dashboard5-email {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 0;
}
.gh-dashboard5-email .gh-dashboard5-box {
border-width: 1px 0 1px 1px;
border-radius: 0;
}
.gh-dashboard5-email .gh-dashboard5-box:nth-child(1) {
grid-column: 1;
grid-row: 1;
border-radius: 3px 0 0 0;
}
.gh-dashboard5-email .gh-dashboard5-box:nth-child(2) {
grid-column: 1;
grid-row: 2;
border-width: 0 0 1px 1px;
border-radius: 0 0 0 3px;
}
.gh-dashboard5-email .gh-dashboard5-box:nth-child(3) {
grid-column: 2;
grid-row: 1 / span 2;
}
.gh-dashboard5-growth {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
gap: 0;
}
.gh-dashboard5-growth .gh-dashboard5-box:nth-child(1) {
grid-column: 1 / span 2;
grid-row: 1;
border-radius: 3px 3px 0 0;
border-width: 1px;
}
.gh-dashboard5-growth .gh-dashboard5-box:nth-child(2) {
grid-column: 1;
grid-row: 2;
border-radius: 0;
border-width: 0 1px 1px 1px;
}
.gh-dashboard5-growth .gh-dashboard5-box:nth-child(3) {
grid-column: 2;
grid-row: 2;
border-radius: 0;
border-width: 0 1px 1px 0;
}
.gh-dashboard5-growth .gh-dashboard5-box:nth-child(4) {
grid-column: 1;
grid-row: 3;
border-radius: 0 0 0 3px;
border-width: 0 1px 1px 1px;
}
.gh-dashboard5-growth .gh-dashboard5-box:nth-child(5) {
grid-column: 2;
grid-row: 3;
border-radius: 0 0 3px 0;
border-width: 0 1px 1px 0;
}