Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

extract {{kg-action-bar}} component

Browse source
This commit is contained in:
Kevin Ansfield 2019-05-01 13:57:00 +01:00
parent 74fa03a72a
commit ab85412625
6 changed files with 39 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
ghost/admin/lib/koenig-editor/addon/components/kg-action-bar.js Normal file
View file

@ -0,0 +1,28 @@
import Component from '@ember/component';
import layout from '../templates/components/kg-action-bar';
import {computed} from '@ember/object';
export default Component.extend({
layout,
tagName: '',
instantClose: false,
isVisible: false,
style: null,
animationClasses: computed('isVisible', 'instantClose', function () {
let {instantClose, isVisible} = this;
let classes = [];
if (!instantClose || (instantClose && isVisible)) {
classes.push('anim-fast-bezier');
}
if (!isVisible) {
classes.push('o-0 pop-down');
}
return classes.join(' ');
})
});

4
ghost/admin/lib/koenig-editor/addon/components/koenig-card.js
View file

@ -239,7 +239,9 @@ export default Component.extend({
_setToolbarProperties() {
if (this.toolbar) {
let toolbar = this.element.querySelector('[data-toolbar="true"]');
// select the last toolbar in the element because card contents/captions
// may have their own toolbar elements
let toolbar = this.element.querySelector(':scope > [data-kg-toolbar="true"]');
let {width, height} = toolbar.getBoundingClientRect();
this.setProperties({

3
ghost/admin/lib/koenig-editor/addon/templates/components/kg-action-bar.hbs Normal file
View file

@ -0,0 +1,3 @@
<ul class="kg-action-bar inline-flex items-center pa0 ma0 pl1 pr1 nl1 list br3 shadow-2 bg-darkgrey-d1 white sans-serif f8 fw6 tracked-2 z-999 {{this.class}} {{this.animationClasses}}" style={{this.style}} data-kg-toolbar="true" data-kg-allow-clickthrough="true">
{{yield}}
</ul>

4
ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card.hbs
View file

@ -12,7 +12,7 @@
))}}
{{#if toolbar}}
<ul data-toolbar="true" class="kg-action-bar bg-darkgrey-d1 inline-flex pa0 ma0 pl1 pr1 nl1 list br3 shadow-2 items-center absolute white sans-serif f8 fw6 tracked-2 anim-fast-bezier z-999 {{if shouldShowToolbar "" "o-0 pop-down"}}" style={{toolbarStyle}}>
{{#kg-action-bar class="absolute" style=toolbarStyle isVisible=shouldShowToolbar}}
{{#each toolbar.items as |item|}}
{{#if item.divider}}
<li class="ma0 kg-action-bar-divider bg-darkgrey-d2 h5"></li>
@ -29,5 +29,5 @@
</li>
{{/if}}
{{/each}}
</ul>
{{/kg-action-bar}}
{{/if}}

4
ghost/admin/lib/koenig-editor/addon/templates/components/koenig-toolbar.hbs
View file

@ -1,4 +1,4 @@
<ul class="kg-action-bar bg-darkgrey-d1 inline-flex pa0 ma0 pl1 pr1 nl1 list br3 shadow-2 items-center relative white f8 fw6 tracked-2 {{if showToolbar "anim-fast-bezier" "o-0 pop-down"}}" data-kg-allow-clickthrough="true">
{{#kg-action-bar class="relative" instantClose=true isVisible=showToolbar}}
<li class="ma0 lh-solid">
<button
type="button"
@ -66,4 +66,4 @@
{{svg-jar "koenig/kg-link" class=(concat (if activeMarkupTagNames.isA "fill-blue-l2" "fill-white") " w4 h4")}}
</button>
</li>
</ul>
{{/kg-action-bar}}

1
ghost/admin/lib/koenig-editor/app/components/kg-action-bar.js Normal file
View file

@ -0,0 +1 @@
export {default} from 'koenig-editor/components/kg-action-bar';