Updated email newsletter tracking settings

Refs https://github.com/TryGhost/Team/issues/1914
This commit is contained in:
Sanne de Vries 2022-09-16 13:14:48 +01:00
parent ce461aef34
commit e87f468042
2 changed files with 94 additions and 28 deletions

View File

@ -141,6 +141,65 @@
</div>
{{/unless}}
{{#if this.feature.emailClicks }}
<div class="gh-expandable-block">
<div class="gh-expandable-header">
<div>
<h4 class="gh-expandable-title">Newsletter tracking</h4>
<p class="gh-expandable-description">Track how many members are opening emails and clicking links</p>
</div>
<button type="button" class="gh-btn" {{on "click" (toggle-action "newsletterTrackingOpen" this)}} data-test-toggle-membersemail>
<span>{{if this.newsletterTrackingOpen "Close" "Expand"}}</span>
</button>
</div>
<div class="gh-expandable-content">
{{#liquid-if this.newsletterTrackingOpen}}
<div class="mb6">
<div class="gh-newsletter-tracking">
<div class="gh-newsletter-tracking-row">
<div>
<h4 class="gh-newsletter-tracking-title">Enable open-rate tracking</h4>
</div>
<div class="for-switch">
<label class="switch" data-test-label="email-track-opens">
<input
id="email-track-opens"
type="checkbox"
checked={{this.settings.emailTrackOpens}}
class="gh-input"
{{on "change" this.toggleEmailTrackOpens}}
data-test-checkbox="email-track-opens"
>
<span class="input-toggle-component mt1"></span>
</label>
</div>
</div>
<div class="gh-newsletter-tracking-row">
<div>
<h4 class="gh-newsletter-tracking-title">Enable newsletter click tracking</h4>
</div>
<div class="for-switch">
<label class="switch" data-test-label="email-track-opens">
<input
id="email-track-clicks"
type="checkbox"
checked={{this.settings.emailTrackClicks}}
class="gh-input"
{{on "change" this.toggleEmailTrackClicks}}
data-test-checkbox="email-track-clicks"
>
<span class="input-toggle-component mt1"></span>
</label>
</div>
</div>
</div>
</div>
{{/liquid-if}}
</div>
</div>
{{else}}
<div class="gh-expandable-block">
<div class="gh-expandable-header">
<div>
@ -162,29 +221,6 @@
</div>
</div>
</div>
{{#if this.feature.emailClicks }}
<div class="gh-expandable-block">
<div class="gh-expandable-header">
<div>
<h4 class="gh-expandable-title">Enable newsletter click tracking</h4>
<p class="gh-expandable-description">Track how many members are clicking on links in your emails</p>
</div>
<div class="for-switch">
<label class="switch" data-test-label="email-track-opens">
<input
id="email-track-clicks"
type="checkbox"
checked={{this.settings.emailTrackClicks}}
class="gh-input"
{{on "change" this.toggleEmailTrackClicks}}
data-test-checkbox="email-track-clicks"
>
<span class="input-toggle-component mt1"></span>
</label>
</div>
</div>
</div>
{{/if}}
</div>
</section>

View File

@ -985,6 +985,36 @@
padding-bottom: 12px;
}
.gh-newsletter-tracking {
padding: 16px 20px;
background: var(--main-bg-color);
box-shadow: 0 1px 4px -1px rgb(0 0 0 / 10%);
border-radius: 3px;
}
.gh-newsletter-tracking-row {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--whitegrey);
padding: 16px 0;
}
.gh-newsletter-tracking-row:first-child {
padding-top: 0;
}
.gh-newsletter-tracking-row:last-child {
padding-bottom: 0;
border-bottom: none;
}
.gh-newsletter-tracking-title {
font-weight: 600;
font-size: 1.4rem;
margin-bottom: 0;
}
.gh-newsletter-card-container {
margin-left: -24px;
padding-left: 24px;