TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-28 22:43:30 +03:00
Code Issues Projects Releases Wiki Activity

Further tweaks to the new dashboard to make it feel a little nicer

Browse Source 
refs: https://github.com/TryGhost/Team/issues/1462
This commit is contained in:
James Morris 2022-04-01 17:02:30 +01:00
parent e4364eaa91
commit 298e9b4d04
10 changed files with 61 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
ghost/admin/app/components/dashboard/v5/chart-anchor.hbs
View File

@ -8,24 +8,26 @@
</div>
<small class="gh-dashboard5-info">{{gh-pluralize this.totalMembers "Total member" without-count=true}}</small>
</button>
<button type="button" {{on "click" (fn this.changeChartDisplay "paid")}} class={{if this.chartShowingPaid 'is-selected'}}>
<div class="gh-dashboard5-number">
{{format-number this.paidMembers}}
{{#if this.hasTrends}}
<Dashboard::v5::parts::ChartPercentage @percentage={{this.paidMembersTrend}}/>
{{/if}}
</div>
<small class="gh-dashboard5-info">{{gh-pluralize this.paidMembers "Paid member" without-count=true}}</small>
</button>
<button type="button" {{on "click" (fn this.changeChartDisplay "monthly")}} class={{if this.chartShowingMonthly 'is-selected'}}>
<div class="gh-dashboard5-number">
${{gh-price-amount this.currentMRR}}
{{#if this.hasTrends}}
<Dashboard::v5::parts::ChartPercentage @percentage={{this.mrrTrend}}/>
{{/if}}
</div>
<small class="gh-dashboard5-info">Monthly revenue (MRR)</small>
</button>
{{#if this.hasPaidTiers}}
<button type="button" {{on "click" (fn this.changeChartDisplay "paid")}} class={{if this.chartShowingPaid 'is-selected'}}>
<div class="gh-dashboard5-number">
{{format-number this.paidMembers}}
{{#if this.hasTrends}}
<Dashboard::v5::parts::ChartPercentage @percentage={{this.paidMembersTrend}}/>
{{/if}}
</div>
<small class="gh-dashboard5-info">{{gh-pluralize this.paidMembers "Paid member" without-count=true}}</small>
</button>
<button type="button" {{on "click" (fn this.changeChartDisplay "monthly")}} class={{if this.chartShowingMonthly 'is-selected'}}>
<div class="gh-dashboard5-number">
${{gh-price-amount this.currentMRR}}
{{#if this.hasTrends}}
<Dashboard::v5::parts::ChartPercentage @percentage={{this.mrrTrend}}/>
{{/if}}
</div>
<small class="gh-dashboard5-info">Monthly revenue (MRR)</small>
</button>
{{/if}}
</div>
<div class="gh-dashboard5-chart">
{{#if this.loading}}

4
ghost/admin/app/components/dashboard/v5/chart-anchor.js
View File

@ -77,6 +77,10 @@ export default class ChartAnchor extends Component {
return this.calculatePercentage(this.dashboardStats.currentMRRTrend, this.dashboardStats.currentMRR);
}
get hasPaidTiers() {
return this.dashboardStats.siteStatus?.hasPaidTiers;
}
get chartType() {
return 'line';
}

3
ghost/admin/app/components/dashboard/v5/chart-email.hbs
View File

@ -19,7 +19,8 @@
<EmberChart
@type={{this.chartType}}
@data={{this.chartData}}
@options={{this.chartOptions}} />
@options={{this.chartOptions}}
@height={{130}} />
{{/if}}
<div>
<div class="gh-dashboard5-number">{{this.currentOpenRate}}%</div>

4
ghost/admin/app/components/dashboard/v5/chart-email.js
View File

@ -62,7 +62,7 @@ export default class ChartEmailOpenRate extends Component {
pointHitRadius: 10,
borderColor: '#14b8ff',
borderJoinStyle: 'miter',
maxBarThickness: 20,
maxBarThickness: 15,
minBarLength: 2
}]
};
@ -70,8 +70,6 @@ export default class ChartEmailOpenRate extends Component {
get chartOptions() {
return {
responsive: true,
maintainAspectRatio: true,
title: {
display: false
},

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

@ -3,12 +3,12 @@
<article class="gh-dashboard5-box">
<div class="gh-dashboard5-insert">
<div class="gh-dashboard5-box">
<div class="gh-dashboard5-number is-solo">{{this.data30Days}}</div>
<div class="gh-dashboard5-number is-solo">{{this.data30Days}}<small><span class="gh-dashboard5-slash">/</span>99 members</small></div>
<small class="gh-dashboard5-info">Last 30 days</small>
</div>
<div class="gh-dashboard5-box">
<div class="gh-dashboard5-number is-solo">{{this.data7Days}}</div>
<div class="gh-dashboard5-number is-solo">{{this.data7Days}}<small><span class="gh-dashboard5-slash">/</span>99 members</small></div>
<small class="gh-dashboard5-info">Last 7 days</small>
</div>
</div>

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

@ -34,19 +34,23 @@ export default class ChartPaidMembers extends Component {
{
data: newData,
fill: true,
backgroundColor: '#14b8ff',
borderColor: '#9B90F9',
backgroundColor: '#9B90F9',
tension: 0.1,
borderWidth: 0,
barThickness: 10,
minBarLength: 3
minBarLength: 3,
borderWidth: 2,
borderRadius: 5
},{
data: canceledData,
fill: true,
backgroundColor: '#E16262',
borderColor: '#E28B9D',
backgroundColor: '#E28B9D',
tension: 0.1,
borderWidth: 0,
barThickness: 10,
minBarLength: 3
minBarLength: 3,
borderWidth: 2,
borderRadius: 5
}]
};
}
@ -64,6 +68,7 @@ export default class ChartPaidMembers extends Component {
},
scales: {
yAxes: [{
offset: true,
gridLines: {
drawTicks: false,
display: true,
@ -78,17 +83,17 @@ export default class ChartPaidMembers extends Component {
}
}],
xAxes: [{
offset: true,
stacked: true,
gridLines: {
drawTicks: false,
drawTicks: true,
display: false,
drawBorder: false
},
ticks: {
display: false,
maxTicksLimit: 5,
autoSkip: true,
maxRotation: 0,
minRotation: 0
autoSkip: true
},
type: 'time',
time: {

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

@ -29,6 +29,7 @@
<EmberChart
@type={{this.chartType}}
@data={{this.chartData}}
@options={{this.chartOptions}} />
@options={{this.chartOptions}}
@height={{150}} />
</div>
{{/if}}

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

@ -56,7 +56,7 @@ export default class ChartPaidMix extends Component {
}
get chartType() {
return 'pie';
return 'doughnut';
}
get chartData() {
@ -81,6 +81,7 @@ export default class ChartPaidMix extends Component {
data,
fill: false,
backgroundColor: ['#14b8ff'],
borderWidth: 3,
tension: 0.1
}]
};
@ -88,11 +89,10 @@ export default class ChartPaidMix extends Component {
get chartOptions() {
return {
cutoutPercentage: (this.mode === 'cadence' ? 85 : 75),
legend: {
display: false
},
responsive: true,
maintainAspectRatio: false,
animation: {
duration: 0
}

5
ghost/admin/app/styles/app-dark.css
View File

@ -1045,6 +1045,11 @@ input:focus,
background: var(--white);
}
.gh-dashboard5-box {
flex: 1;
border: 1px solid var(--lightgrey);
}
.gh-notification {
background: var(--lightgrey);
}

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

@ -1068,7 +1068,7 @@ a.gh-dashboard-container {
.gh-dashboard5-box {
flex: 1;
border: 1px solid #ebeef0;
border: 1px solid var(--whitegrey);
padding: 28px;
border-radius: 3px;
display: flex;
@ -1116,7 +1116,7 @@ a.gh-dashboard-container {
.gh-dashboard5-number small {
font-size: 1.4rem;
padding: 0 0 0.25rem;
color: var(--darkgrey);
color: var(--midgrey);
}
.gh-dashboard5-slash {
@ -1132,7 +1132,7 @@ a.gh-dashboard-container {
letter-spacing: .2px;
margin: 0 0 8px;
padding: 0;
color: var(--black);
color: var(--midgrey);
}
.gh-dashboard5-metric.is-main {
@ -1143,7 +1143,7 @@ a.gh-dashboard-container {
display: flex;
flex-direction: column;
align-items: flex-start;
font-size: 1.8rem;
font-size: 1.4rem;
text-transform: none;
margin: 0 0 32px;
}
@ -1159,7 +1159,7 @@ a.gh-dashboard-container {
}
.gh-dashboard5-info {
font-size: 1.3rem;
font-size: 1.4rem;
text-transform: none;
font-weight: 500;
letter-spacing: .2px;
@ -1423,17 +1423,17 @@ a.gh-dashboard-container {
.gh-dashboard5-section .prototype-selection {
position: absolute;
top: 18px;
right: 16px;
right: 12px;
}
.gh-dashboard5-section .ember-power-select-selected-item {
color: var(--darkgrey);
font-size: 1.1rem;
text-transform: uppercase;
font-weight: 500;
letter-spacing: .2px;
margin: 0 0 8px;
padding: 0;
color: #15171a;
}
.gh-dashboard5 .gh-list-header {
@ -1444,10 +1444,6 @@ a.gh-dashboard-container {
font-weight: 600;
font-size: 14px !important;
color: rgb(21, 23, 26);
/* white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%; */
}
.gh-dashboard5-posts .gh-dashboard5-box {