TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 11:55:03 +03:00
Code Issues Projects Releases Wiki Activity

Switched to top/bottom toggles for email-cta dividers

Browse Source 
refs https://github.com/TryGhost/Team/issues/928

- two toggle buttons is cleaner than 4 buttons to achieve the same thing
- adjusted payload to have `dividerTop` and `dividerBottom` attributes rather
This commit is contained in:
Kevin Ansfield 2021-08-02 14:48:14 +01:00
parent 1f24c09c5f
commit 43aff32dc6
2 changed files with 18 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ghost/admin/lib/koenig-editor/addon/components/koenig-card-email-cta.hbs
View File

@ -20,7 +20,7 @@
as |card|
>
{{#if @isEditing}}
{{#if this.hasTopBorder}}<hr>{{/if}}
{{#if this.hasTopDivider}}<hr>{{/if}}
<div class="kg-card-help kg-card-help-labs">
<p>
@ -86,7 +86,7 @@
<p>{{capitalize this.selectedSegment.name}}</p>
</div>
{{#if this.hasTopBorder}}<hr>{{/if}}
{{#if this.hasTopDivider}}<hr>{{/if}}
{{#if @payload.html}}
<div class="relative">
@ -99,5 +99,5 @@
{{/if}}
{{/if}}
{{#if this.hasBottomBorder}}<hr>{{/if}}
{{#if this.hasBottomDivider}}<hr>{{/if}}
</KoenigCard>

37
ghost/admin/lib/koenig-editor/addon/components/koenig-card-email-cta.js
View File

@ -32,14 +32,12 @@ export default class KoenigCardEmailCtaComponent extends Component {
return this.segments.find(segment => segment.filter === this.args.payload.segment);
}
get hasTopBorder() {
const border = this.args.payload?.border;
return border === 'top' || border === 'both';
get hasTopDivider() {
return !!this.args.payload?.dividerTop;
}
get hasBottomBorder() {
const border = this.args.payload?.border;
return border === 'bottom' || border === 'both';
get hasBottomDivider() {
return !!this.args.payload?.dividerBottom;
}
get toolbar() {
@ -49,25 +47,15 @@ export default class KoenigCardEmailCtaComponent extends Component {
return {
items: [{
title: 'No dividers',
icon: 'koenig/kg-img-regular',
iconClass: this.args.payload.border === 'none' ? 'fill-green-l2' : 'fill-white',
action: run.bind(this, this.setBorder, null)
}, {
title: 'Top divider',
icon: 'koenig/kg-img-regular',
iconClass: this.args.payload.border === 'top' ? 'fill-green-l2' : 'fill-white',
action: run.bind(this, this.setBorder, 'top')
}, {
title: 'Both dividers',
icon: 'koenig/kg-img-regular',
iconClass: this.args.payload.border === 'both' ? 'fill-green-l2' : 'fill-white',
action: run.bind(this, this.setBorder, 'both')
iconClass: this.hasTopDivider ? 'fill-green-l2' : 'fill-white',
action: run.bind(this, this.toggleDivider, 'top')
}, {
title: 'Bottom divider',
icon: 'koenig/kg-img-regular',
iconClass: this.args.payload.border === 'bottom' ? 'fill-green-l2' : 'fill-white',
action: run.bind(this, this.setBorder, 'bottom')
iconClass: this.hasBottomDivider ? 'fill-green-l2' : 'fill-white',
action: run.bind(this, this.toggleDivider, 'bottom')
}, {
divider: true
}, {
@ -110,8 +98,13 @@ export default class KoenigCardEmailCtaComponent extends Component {
}
@action
setBorder(border) {
this._updatePayloadAttr('border', border);
toggleDivider(border) {
if (border === 'top') {
this._updatePayloadAttr('dividerTop', !this.hasTopDivider);
}
if (border === 'bottom') {
this._updatePayloadAttr('dividerBottom', !this.hasBottomDivider);
}
}
@action