mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-24 19:33:02 +03:00
Added toggling between blockquote/aside/p via quote toolbar button
refs https://github.com/TryGhost/Team/issues/1239 - added new action for toggling quote sections that will loop through blockquote/aside/p when clicked - copied `kg-quote.svg` to `kg-quote-2.svg` ready for alternate icon designs
This commit is contained in:
parent
7ff73753c8
commit
91191fea48
@ -45,16 +45,35 @@
|
||||
<li class="ma0 ml1 mr1 lh-solid kg-action-bar-divider bg-darkgrey-l2 h5" role="separator"></li>
|
||||
|
||||
{{#unless this.basicOnly}}
|
||||
<li class="ma0 lh-solid">
|
||||
<button
|
||||
type="button"
|
||||
title="Quote"
|
||||
class="dib dim-lite link h9 w9 nudge-top--1"
|
||||
{{action "toggleSection" "blockquote"}}
|
||||
>
|
||||
{{svg-jar "koenig/kg-quote" class=(concat (if this.activeSectionTagNames.isBlockquote "fill-green-l2" "fill-white") " w4 h4")}}
|
||||
</button>
|
||||
</li>
|
||||
{{#if feature.quoteStyles}}
|
||||
<li class="ma0 lh-solid">
|
||||
<button
|
||||
type="button"
|
||||
title="Quote"
|
||||
class="dib dim-lite link h9 w9 nudge-top--1"
|
||||
{{action "toggleQuoteSection"}}
|
||||
>
|
||||
{{#if this.activeSectionTagNames.isBlockquote}}
|
||||
{{svg-jar "koenig/kg-quote" class="fill-green w4 h4"}}
|
||||
{{else if this.activeSectionTagNames.isAside}}
|
||||
{{svg-jar "koenig/kg-quote-2" class="fill-green w4 h4"}}
|
||||
{{else}}
|
||||
{{svg-jar "koenig/kg-quote" class="fill-white w4 h4"}}
|
||||
{{/if}}
|
||||
</button>
|
||||
</li>
|
||||
{{else}}
|
||||
<li class="ma0 lh-solid">
|
||||
<button
|
||||
type="button"
|
||||
title="Quote"
|
||||
class="dib dim-lite link h9 w9 nudge-top--1"
|
||||
{{action "toggleSection" "blockquote"}}
|
||||
>
|
||||
{{svg-jar "koenig/kg-quote" class=(concat (if this.activeSectionTagNames.isBlockquote "fill-green-l2" "fill-white") " w4 h4")}}
|
||||
</button>
|
||||
</li>
|
||||
{{/if}}
|
||||
{{/unless}}
|
||||
<li class="ma0 lh-solid">
|
||||
<button
|
||||
|
@ -2,6 +2,7 @@ import Component from '@ember/component';
|
||||
import {computed} from '@ember/object';
|
||||
import {htmlSafe} from '@ember/template';
|
||||
import {run} from '@ember/runloop';
|
||||
import {inject as service} from '@ember/service';
|
||||
import {task, timeout} from 'ember-concurrency';
|
||||
|
||||
// initially rendered offscreen with opacity 0 so that sizing is available
|
||||
@ -19,6 +20,8 @@ export const TOOLBAR_MARGIN = 15;
|
||||
const TICK_ADJUSTMENT = 8;
|
||||
|
||||
export default Component.extend({
|
||||
feature: service(),
|
||||
|
||||
attributeBindings: ['style'],
|
||||
classNames: ['absolute', 'z-999'],
|
||||
|
||||
@ -127,6 +130,22 @@ export default Component.extend({
|
||||
});
|
||||
},
|
||||
|
||||
toggleQuoteSection() {
|
||||
let sectionName = 'blockquote';
|
||||
|
||||
if (this.activeSectionTagNames.isBlockquote) {
|
||||
sectionName = 'aside';
|
||||
} else if (this.activeSectionTagNames.isAside) {
|
||||
sectionName = 'p';
|
||||
}
|
||||
|
||||
const range = this.editorRange;
|
||||
this.editor.run((postEditor) => {
|
||||
this.toggleSection(sectionName, postEditor);
|
||||
postEditor.setRange(range);
|
||||
});
|
||||
},
|
||||
|
||||
toggleHeaderSection(headingTagName) {
|
||||
let range = this.editorRange;
|
||||
this.editor.run((postEditor) => {
|
||||
|
@ -0,0 +1 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M4 8h2c.552 0 1 .448 1 1v4c0 .552-.448 1-1 1H3c-.552 0-1-.448-1-1V5.082c0-1.176.906-2.12 2.538-2.969.49-.255 1.094-.065 1.349.425.255.49.065 1.094-.425 1.349-.578.3-.993.589-1.24.847-.168.174-.222.286-.222.348V8zm9 0c.552 0 1 .448 1 1v4c0 .552-.448 1-1 1h-3c-.552 0-1-.448-1-1V5.082c0-1.176.906-2.12 2.538-2.969.49-.255 1.094-.065 1.349.425.255.49.065 1.094-.425 1.349-.578.3-.993.589-1.24.847-.168.174-.222.286-.222.348V8h2z" fill="#FFF" fill-rule="nonzero"/></svg>
|
After Width: | Height: | Size: 559 B |
Loading…
Reference in New Issue
Block a user