OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update the suppression notice front-end (#15869)

Browse Source 
closes TryGhost/Team#2288
This commit is contained in:
Elena Baidakova 2022-11-24 10:02:57 +04:00 committed by GitHub
parent e48072e471
commit 54f075b330
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 53 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
ghost/admin/app/components/member/newsletter-preference.hbs
View File

@ -1,55 +1,59 @@
<h4 class="gh-main-section-header small bn">Newsletters</h4>
<div class="gh-main-section-content grey {{if (feature "suppressionList") 'gh-member-newsletter-section'}}">
<div class="gh-member-newsletters">
{{#each this.newsletters as |newsletter|}}
<div class="gh-member-newsletter-row">
<div>
<h4 class="gh-member-newsletter-title">{{newsletter.name}}</h4>
<div class="gh-main-section-content grey {{if (and (feature "suppressionList") (not this.suppressionData.suppressed)) 'gh-member-newsletter-section'}}">
{{#unless this.suppressionData.suppressed}}
<div class="gh-member-newsletters">
{{#each this.newsletters as |newsletter|}}
<div class="gh-member-newsletter-row">
<div>
<h4 class="gh-member-newsletter-title">{{newsletter.name}}</h4>
</div>
<div class="for-switch {{if (and (feature "suppressionList") this.suppressionData.suppressed) 'disabled'}}">
<label class="switch" for={{newsletter.forId}}>
<Input
@checked={{newsletter.subscribed}}
@type="checkbox"
id={{newsletter.forId}}
name="subscribed"
data-test-checkbox="member-subscribed"
{{on "click" (fn this.updateNewsletterPreference newsletter)}}
/>
<span class="input-toggle-component"></span>
</label>
</div>
</div>
<div class="for-switch {{if (and (feature "suppressionList") this.suppressionData.suppressed) 'disabled'}}">
<label class="switch" for={{newsletter.forId}}>
<Input
@checked={{newsletter.subscribed}}
@type="checkbox"
id={{newsletter.forId}}
name="subscribed"
data-test-checkbox="member-subscribed"
{{on "click" (fn this.updateNewsletterPreference newsletter)}}
/>
<span class="input-toggle-component"></span>
</label>
</div>
</div>
{{/each}}
</div>
{{/each}}
</div>
{{/unless}}
{{#if (and (feature "suppressionList") this.suppressionData.suppressed)}}
<div class="gh-member-newsletter-footer red">
<div class="gh-members-no-data gh-member-newsletter-no-data">
{{#if (eq this.suppressionData.reason 'fail')}}
{{svg-jar "event-email-delivery-failed" class="gh-member-newsletter-footer-icon"}}
{{svg-jar "suppression-notice-bounced" class="gh-member-newsletter-icon"}}
{{/if}}
{{#if (eq this.suppressionData.reason 'spam')}}
{{svg-jar "event-email-delivery-spam" class="gh-member-newsletter-footer-icon"}}
{{svg-jar "suppression-notice-flagged" class="gh-member-newsletter-icon"}}
{{/if}}
<div class="gh-member-newsletter-footer-text">
<h4>Email disabled</h4>
<p>
{{#if (eq this.suppressionData.reason 'fail')}}
Member email was suppressed due to it bouncing on {{this.suppressionData.date}}
Bounced on {{this.suppressionData.date}}
{{/if}}
{{#if (eq this.suppressionData.reason 'spam')}}
Member email was suppressed due to a spam complaint on {{this.suppressionData.date}}
Flagged as spam on {{this.suppressionData.date}}
{{/if}}
<a class="midgrey" href="javascript:void(0)" target="_blank" rel="noopener noreferrer">Learn more</a>
</div>
</p>
</div>
{{/if}}
{{#if (and (feature "suppressionList") (not this.suppressionData.suppressed))}}
<div class="gh-member-newsletter-footer midgrey">
If disabled, member will <i>not</i> receive newsletter emails
If disabled, member will <em>not</em> receive newsletter emails
</div>
{{/if}}
</div>

31
ghost/admin/app/styles/layouts/members.css
View File

@ -1126,38 +1126,27 @@ textarea.gh-member-details-textarea {
padding-bottom: 16px;
}
.gh-member-newsletter-section .for-switch.disabled {
opacity: 0.1;
.gh-member-newsletter-no-data {
padding: 24px 0 28px;
}
.gh-member-newsletter-footer-text {
.gh-member-newsletter-no-data .gh-member-newsletter-icon path {
stroke-width: 2.8;
}
.gh-member-newsletter-no-data a {
color: var(--midgrey);
opacity: 0.6;
font-weight: 500;
}
.gh-member-newsletter-footer-text a {
display: inline-block;
letter-spacing: 0.02em;
text-decoration: underline;
margin-left: 2px;
font-weight: 400;
}
.gh-member-newsletter-footer {
display: flex;
gap: 4px;
align-items: center;
font-size: 1.25rem;
margin-top: 12px;
}
.gh-member-newsletter-footer-icon {
width: 24px;
height: 24px;
}
.gh-member-newsletter-footer-icon [class*="__body"] {
stroke: #95A1AD;
}
.gh-member-feed-container {
display: flex;
flex-grow: 1;

4
ghost/admin/public/assets/icons/suppression-notice-bounced.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 60 60">
<path d="m37.2 37.127 12.237 12.238M37.2 49.362l12.237-12.237" stroke="red" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="m31.316 53.983-7.99-7.956-8.58 4.433.334-12.717m0 0L5.033 27.697a4.033 4.033 0 0 1-1.1-3.667 4.106 4.106 0 0 1 2.713-3.15L45.98 7.757a4.106 4.106 0 0 1 5.28 5.276L45 30m-29.92 7.743 35.006-29.18" stroke="#CAD1D8" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 522 B

5
ghost/admin/public/assets/icons/suppression-notice-flagged.svg Normal file
View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 60 60">
<path d="m31.316 53.983-7.99-7.956-8.58 4.433.334-12.717m0 0L5.033 27.697a4.033 4.033 0 0 1-1.1-3.667 4.106 4.106 0 0 1 2.713-3.15L45.98 7.757a4.106 4.106 0 0 1 5.28 5.276L45 30m-29.92 7.743 35.006-29.18" stroke="#CAD1D8" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M41.474 37.2v7.65" stroke="#F50B23" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="41.399" cy="51.1" r="1.5" fill="#F50B23"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 550 B