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 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-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-3"></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 {
const label = data.datasets[tooltipItems.datasetIndex].label || '';
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: () => {

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

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

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

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