TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-24 06:35:49 +03:00
Code Issues Projects Releases Wiki Activity

Linked up divider toggle button in email-cta card toolbar

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

- replaced `hasTopDivider` and `hasBottomDivider` and associated payload properties for a single `showDividers` payload property
- removed divider toggles from non-edit mode card toolbar
- linked edit-mode toolbar divider to a toggle dividers action
This commit is contained in:
Kevin Ansfield 2021-08-24 10:50:19 +01:00
parent 0dab21e604
commit e979e45fdb
2 changed files with 9 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,7 +44,7 @@
</p>
</div>
{{#if this.hasTopDivider}}<hr class="border-top edit-mode">{{/if}}
{{#if @payload.showDividers}}<hr class="border-top edit-mode">{{/if}}
<div class="{{if (eq @payload.buttonAlignment "center") "tc"}}">
<KoenigTextReplacementHtmlInput
@ -69,11 +69,11 @@
{{/if}}
</div>
{{#if this.hasBottomDivider}}<hr class="border-bottom">{{/if}}
{{#if @payload.showDividers}}<hr class="border-bottom">{{/if}}
<form class="email-cta-toolbar">
<div class="borders">
<button type="button" title="Add dividers" class="gh-btn gh-btn-white gh-btn-icon email-cta-toolbar-item"><span>{{svg-jar "dividers"}}</span></button>
<button type="button" title="Add dividers" class="gh-btn gh-btn-white gh-btn-icon email-cta-toolbar-item {{if @payload.showDividers "fill-green-l2"}}" {{on "click" this.toggleDividers}}><span>{{svg-jar "dividers"}}</span></button>
</div>
<div class="gh-btn-group icons email-cta-align">
@ -123,9 +123,9 @@
<p>{{capitalize this.selectedSegment.name}}</p>
</div>
{{#if this.hasTopDivider}}<hr class="border-top">{{/if}}
{{#if @payload.showDividers}}<hr class="border-top">{{/if}}
<div class="{{if (not this.hasBottomDivider) "pb2"}} {{if (eq @payload.buttonAlignment "center") "tc"}}">
<div class="{{if (not @payload.showDividers) "pb2"}} {{if (eq @payload.buttonAlignment "center") "tc"}}">
{{#if @payload.html}}
<div class="relative">
<p>{{{this.formattedHtml}}}</p>
@ -138,7 +138,7 @@
{{/if}}
</div>
{{#if this.hasBottomDivider}}<hr class="border-bottom">{{/if}}
{{#if @payload.showDividers}}<hr class="border-bottom">{{/if}}
{{/if}}

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

@ -34,14 +34,6 @@ export default class KoenigCardEmailCtaComponent extends Component {
return this.segments.find(segment => segment.filter === this.args.payload.segment);
}
get hasTopDivider() {
return !!this.args.payload?.dividerTop;
}
get hasBottomDivider() {
return !!this.args.payload?.dividerBottom;
}
get toolbar() {
if (this.args.isEditing) {
return false;
@ -49,18 +41,6 @@ export default class KoenigCardEmailCtaComponent extends Component {
return {
items: [{
title: 'Top divider',
icon: 'koenig/kg-cta-border',
iconClass: this.hasTopDivider ? 'fill-green-l2' : 'fill-white',
action: run.bind(this, this.toggleDivider, 'top')
}, {
title: 'Bottom divider',
icon: 'koenig/kg-cta-border',
iconClass: this.hasBottomDivider ? 'fill-green-l2' : 'fill-white',
action: run.bind(this, this.toggleDivider, 'bottom')
}, {
divider: true
}, {
buttonClass: 'fw4 flex items-center white',
icon: 'koenig/kg-edit',
iconClass: 'fill-white',
@ -109,6 +89,7 @@ export default class KoenigCardEmailCtaComponent extends Component {
const payloadDefaults = {
showButton: false,
showDividers: true,
segment: 'status:free',
buttonAlignment: 'left'
};
@ -159,13 +140,8 @@ export default class KoenigCardEmailCtaComponent extends Component {
}
@action
toggleDivider(border) {
if (border === 'top') {
this._updatePayloadAttr('dividerTop', !this.hasTopDivider);
}
if (border === 'bottom') {
this._updatePayloadAttr('dividerBottom', !this.hasBottomDivider);
}
toggleDividers() {
this._updatePayloadAttr('showDividers', !this.args.payload.showDividers);
}
@action