Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-17 23:44:39 -05:00
Code Issues Activity

Updated Paid mix tooltips

Browse source
This commit is contained in:
Peter Zimon 2022-05-11 09:03:56 +02:00
parent 6e7eeba94e
commit fe3e8ee64d
4 changed files with 31 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.hbs
View file

@ -19,9 +19,9 @@
- -
</div> </div>
<div class="gh-dashboard5-tooltip-value"> <div class="gh-dashboard5-tooltip-value">
<div class="gh-dashboard5-tooltip-value-1"><span class="value"></span></div> <div class="gh-dashboard5-tooltip-value-1"><span class="indicator solid"></span><span class="value"></span></div>
<div class="gh-dashboard5-tooltip-value-1"><span class="label">New</span></div> <div class="gh-dashboard5-tooltip-value-1"><span class="label">New</span></div>
<div class="gh-dashboard5-tooltip-value-2"><span class="value"></span></div> <div class="gh-dashboard5-tooltip-value-2"><span class="indicator solid"></span><span class="value"></span></div>
<div class="gh-dashboard5-tooltip-value-2"><span class="label">Canceled</span></div> <div class="gh-dashboard5-tooltip-value-2"><span class="label">Canceled</span></div>
<div class="gh-dashboard5-tooltip-value-3"></div> <div class="gh-dashboard5-tooltip-value-3"></div>
</div> </div>

2
ghost/admin/app/components/dashboard/v5/charts/paid-mix.js
View file

@ -187,7 +187,7 @@ export default class PaidMix extends Component {
} else { } else {
const label = data.datasets[tooltipItems.datasetIndex].label || ''; const label = data.datasets[tooltipItems.datasetIndex].label || '';
const value = data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] || 0; const value = data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] || 0;
tooltipTextEl.innerHTML = `${label} ${value}%`; tooltipTextEl.innerHTML = `<span class="indicator solid" style="background-color: ${data.datasets[tooltipItems.datasetIndex].backgroundColor}"></span><span class="value">${value}%</span><span class="label">${label}</span>`;
} }
}, },
title: () => { title: () => {

1
ghost/admin/app/components/dashboard/v5/charts/paid-mrr.hbs
View file

@ -21,6 +21,7 @@
- -
</div> </div>
<div class="gh-dashboard5-tooltip-value"> <div class="gh-dashboard5-tooltip-value">
<span class="indicator line"></span>
<span class="value">-</span> <span class="value">-</span>
<span class="label">MRR</span> <span class="label">MRR</span>
</div> </div>

54
ghost/admin/app/styles/layouts/dashboard-v5.css
View file

@ -1737,6 +1737,8 @@ Dashboard v5 Tooltips */
} }
.gh-dashboard5-tooltip-value { .gh-dashboard5-tooltip-value {
display: flex;
align-items: baseline;
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0; letter-spacing: 0;
@ -1745,36 +1747,43 @@ Dashboard v5 Tooltips */
color: var(--black); color: var(--black);
} }
.gh-dashboard5-mrr .gh-dashboard5-tooltip-value { .gh-dashboard5-tooltip-value .indicator {
display: flex; display: inline-block;
align-items: baseline; border-radius: 999px;
margin-right: 6px;
} }
.gh-dashboard5-mrr .gh-dashboard5-tooltip-value::before { .gh-dashboard5-tooltip-value .indicator.solid {
display: block; width: 9px;
content: ""; height: 9px;
}
.gh-dashboard5-tooltip-value .indicator.line {
width: 11px; width: 11px;
height: 11px; height: 11px;
border-radius: 999px; border-width: 2px;
margin: 0 6px 1px 0; border-style: solid;
border: 2px solid #8E42FF;
} }
.gh-dashboard5-mrr .gh-dashboard5-tooltip-value .value { .gh-dashboard5-tooltip-value .value {
font-size: 1.5rem; font-size: 1.5rem;
margin-right: 8px;
} }
.gh-dashboard5-mrr .gh-dashboard5-tooltip-value .label { .gh-dashboard5-tooltip-value .label {
margin-left: 6px;
font-size: 1.4rem; font-size: 1.4rem;
font-weight: 400; font-weight: 400;
color: var(--midgrey); color: var(--midgrey);
padding: 0;
}
.gh-dashboard5-mrr .indicator {
border-color: #8E42FF;
} }
.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value { .gh-dashboard5-breakdown .gh-dashboard5-tooltip-value {
display: grid; display: grid;
grid-template-columns: auto auto; grid-template-columns: auto auto;
grid-column-gap: 8px;
} }
.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-1 { .gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-1 {
@ -1797,26 +1806,17 @@ Dashboard v5 Tooltips */
align-items: baseline; align-items: baseline;
} }
.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-1 .value::before, .gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-1 .indicator {
.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-2 .value::before {
display: block;
content: "";
width: 9px;
height: 9px;
border-radius: 999px;
margin: 0 6px 0 0;
}
.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-1 .value::before {
background: #8E42FF; background: #8E42FF;
} }
.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-2 .value::before { .gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-2 .indicator {
background: #FB76B4; background: #FB76B4;
} }
.gh-dashboard5-mix .gh-dashboard5-tooltip-value { .gh-dashboard5-mix .gh-dashboard5-tooltip-value .label {
font-size: 1.4rem; color: var(--midgrey);
font-size: 1.3rem;
} }
.gh-dashboard5-totals { .gh-dashboard5-totals {