From ab85412625c5afd511d60751a7424519a97abb5e Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Wed, 1 May 2019 13:57:00 +0100
Subject: [PATCH] extract {{kg-action-bar}} component

---
 .../addon/components/kg-action-bar.js         | 28 +++++++++++++++++++
 .../addon/components/koenig-card.js           |  4 ++-
 .../templates/components/kg-action-bar.hbs    |  3 ++
 .../templates/components/koenig-card.hbs      |  4 +--
 .../templates/components/koenig-toolbar.hbs   |  4 +--
 .../app/components/kg-action-bar.js           |  1 +
 6 files changed, 39 insertions(+), 5 deletions(-)
 create mode 100644 ghost/admin/lib/koenig-editor/addon/components/kg-action-bar.js
 create mode 100644 ghost/admin/lib/koenig-editor/addon/templates/components/kg-action-bar.hbs
 create mode 100644 ghost/admin/lib/koenig-editor/app/components/kg-action-bar.js

diff --git a/ghost/admin/lib/koenig-editor/addon/components/kg-action-bar.js b/ghost/admin/lib/koenig-editor/addon/components/kg-action-bar.js
new file mode 100644
index 0000000000..3687a95377
--- /dev/null
+++ b/ghost/admin/lib/koenig-editor/addon/components/kg-action-bar.js
@@ -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(' ');
+    })
+});
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card.js
index 0c95369c85..a9d539ccc5 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card.js
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card.js
@@ -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({
diff --git a/ghost/admin/lib/koenig-editor/addon/templates/components/kg-action-bar.hbs b/ghost/admin/lib/koenig-editor/addon/templates/components/kg-action-bar.hbs
new file mode 100644
index 0000000000..a6d4ea941f
--- /dev/null
+++ b/ghost/admin/lib/koenig-editor/addon/templates/components/kg-action-bar.hbs
@@ -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>
\ No newline at end of file
diff --git a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card.hbs b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card.hbs
index 079eae4e91..cb58fe6fd7 100644
--- a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card.hbs
@@ -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}}
\ No newline at end of file
diff --git a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-toolbar.hbs b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-toolbar.hbs
index f4a9edc47d..63fe35b211 100644
--- a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-toolbar.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-toolbar.hbs
@@ -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}}
diff --git a/ghost/admin/lib/koenig-editor/app/components/kg-action-bar.js b/ghost/admin/lib/koenig-editor/app/components/kg-action-bar.js
new file mode 100644
index 0000000000..cb20fef4d5
--- /dev/null
+++ b/ghost/admin/lib/koenig-editor/app/components/kg-action-bar.js
@@ -0,0 +1 @@
+export {default} from 'koenig-editor/components/kg-action-bar';