Koenig - Switch card context menu to Spirit classes

refs https://github.com/TryGhost/Ghost/issues/9505
- use Spirit classes for card context menu
- add button and icon class options for context menu items
- add ability to have icon+text for context menu items
- add "Edit" context menu item to markdown and html cards

ghost/admin/app/styles/components/koenig.css

@@ -42,93 +42,6 @@
     margin: 0 auto;
 }
 
-/* Formatting / Container Card Toolbar -------------------------------------- */
-
-.koenig-toolbar {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    text-align: center;
-    user-select: none;
-    cursor: pointer;
-    color: color-mod(var(--lightgrey) l(-10%));
-    background: linear-gradient(
-        color-mod(var(--darkgrey) l(-3%)),
-        color-mod(var(--darkgrey) l(-8%))
-    );
-    border-radius: 5px;
-    box-shadow: 0 0 0 1px color-mod(var(--darkgrey) l(-10%)), 0 8px 16px rgba(26,39,49,0.16), rgba(255,255,255,0.09) 0 1px 0 0 inset;
-    z-index:110; /* places it above the title */
-    pointer-events: none !important; /* no interactivity when hidden */
-    opacity: 0;
-    transition-property: opacity;
-    transition-duration: 300ms;
-}
-
-.koenig-toolbar--visible {
-    pointer-events: auto !important; /* make sure the buttons work */
-    opacity: 1;
-}
-
-.koenig-toolbar:after {
-    display: block;
-    content: "";
-    position: absolute;
-    bottom: -8px;
-    left: 50%;
-    margin-left: -10px;
-    width: 0;
-    height: 0;
-    border-left: transparent 10px solid;
-    border-right: transparent 10px solid;
-    border-top: color-mod(var(--darkgrey) l(-10%)) 8px solid;
-    transition-property: left;
-    transition-duration: 100ms;
-}
-.koenig-toolbar.tick-above:after {
-    border: none;
-}
-
-.koenig-toolbar-btn {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 40px;
-    width: 32px;
-    font-size: 1.6rem;
-    line-height: 40px;
-    transition: text-shadow 0.3s ease;
-}
-
-.koenig-toolbar-btn:first-child {
-    width: 43px;
-    padding-left: 8px;
-}
-
-.koenig-toolbar-btn:last-child {
-    width: 43px;
-    padding-right: 8px;
-}
-
-.koenig-toolbar-btn svg {
-    height: 1.4rem;
-}
-
-.koenig-toolbar-btn svg g {
-    stroke-width: 2px;
-    stroke: color-mod(var(--lightgrey) l(-10%));
-}
-
-.koenig-toolbar-btn:hover,
-.koenig-toolbar-btn.selected {
-    color: #fff;
-    cursor: pointer;
-    text-shadow: #000 0 1px 6px;
-}
-
-.koenig-toolbar-btn:hover svg g {
-    stroke: #fff;
-}
 
 /* ⨁ menu ------------------------------------------------------------------ */
 

ghost/admin/lib/koenig-editor/addon/components/koenig-card-html.js

@@ -1,5 +1,6 @@
 import Component from '@ember/component';
 import layout from '../templates/components/koenig-card-html';
+import {computed} from '@ember/object';
 import {isBlank} from '@ember/utils';
 import {run} from '@ember/runloop';
 import {set} from '@ember/object';
@@ -13,9 +14,26 @@ export default Component.extend({
     isEditing: false,
 
     // closure actions
+    editCard() {},
     saveCard() {},
+    selectCard() {},
     deleteCard() {},
 
+    toolbar: computed('isEditing', function () {
+        if (!this.get('isEditing')) {
+            return {
+                items: [{
+                    buttonClass: 'fw4 flex items-center white',
+                    icon: 'koenig/kg-edit-v2',
+                    iconClass: 'stroke-white',
+                    title: 'Edit',
+                    text: 'Edit',
+                    action: run.bind(this, this.get('editCard'))
+                }]
+            };
+        }
+    }),
+
     init() {
         this._super(...arguments);
 

ghost/admin/lib/koenig-editor/addon/components/koenig-card-image.js

@@ -32,7 +32,9 @@ export default Component.extend({
         if (this.get('payload.src')) {
             return {
                 items: [{
-                    title: 'Replace',
+                    title: 'Replace image',
+                    icon: 'koenig/kg-replace',
+                    iconClass: 'nudge-top--1',
                     action: run.bind(this, this._triggerFileDialog)
                 }]
             };

ghost/admin/lib/koenig-editor/addon/components/koenig-card-markdown.js

@@ -15,10 +15,8 @@ export default Component.extend({
     isSelected: false,
     isEditing: false,
 
-    // properties
-    toolbar: null,
-
     // closure actions
+    editCard() {},
     saveCard() {},
     selectCard() {},
     deleteCard() {},
@@ -27,16 +25,20 @@ export default Component.extend({
         return htmlSafe(formatMarkdown(this.get('payload.markdown')));
     }),
 
-    init() {
-        this._super(...arguments);
-        this.set('toolbar', {
-            items: [{
-                icon: 'trash',
-                title: 'Delete',
-                action: () => {}
-            }]
-        });
-    },
+    toolbar: computed('isEditing', function () {
+        if (!this.get('isEditing')) {
+            return {
+                items: [{
+                    buttonClass: 'fw4 flex items-center white',
+                    icon: 'koenig/kg-edit-v2',
+                    iconClass: 'stroke-white',
+                    title: 'Edit',
+                    text: 'Edit',
+                    action: run.bind(this, this.get('editCard'))
+                }]
+            };
+        }
+    }),
 
     actions: {
         enterEditMode() {

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

@@ -79,6 +79,11 @@ export default Component.extend({
         this._lastIsEditing = isEditing;
     },
 
+    didInsertElement() {
+        this._super(...arguments);
+        this._setToolbarProperties();
+    },
+
     willDestroyElement() {
         this._super(...arguments);
         window.removeEventListener('keydown', this._onKeydownHandler);
@@ -143,17 +148,21 @@ export default Component.extend({
         this.onLeaveEdit();
     },
 
-    _showToolbar() {
-        // only show a toolbar if we have one
+    _setToolbarProperties() {
         if (this.get('toolbar')) {
-            let toolbar = this.element.querySelector('.koenig-card-toolbar');
+            let toolbar = this.element.querySelector('[data-toolbar="true"]');
             let {width, height} = toolbar.getBoundingClientRect();
 
             this.setProperties({
                 toolbarWidth: width,
                 toolbarHeight: height + TICK_HEIGHT
             });
+        }
+    },
 
+    _showToolbar() {
+        // only show a toolbar if we have one
+        if (this.get('toolbar')) {
             if (!this.get('showToolbar') && !this._onMousemoveHandler) {
                 this._onMousemoveHandler = run.bind(this, this._handleMousemove);
                 window.addEventListener('mousemove', this._onMousemoveHandler);

ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-html.hbs

@@ -1,5 +1,6 @@
 {{#koenig-card
     class=(concat (kg-style "media-card") " mih10 miw-100 tc")
+    toolbar=toolbar
     isSelected=isSelected
     isEditing=isEditing
     selectCard=(action selectCard)

ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-markdown.hbs

@@ -1,6 +1,7 @@
 {{#koenig-card
     icon="koenig/markdown"
     class=(kg-style "container-card")
+    toolbar=toolbar
     isSelected=isSelected
     isEditing=isEditing
     onEnterEdit=(action "enterEditMode")

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

@@ -3,21 +3,18 @@
 {{yield}}
 
 {{#if toolbar}}
-    <div class="koenig-card-toolbar koenig-toolbar {{if showToolbar "koenig-toolbar--visible"}}" style={{toolbarStyle}}>
+    <ul data-toolbar="true" class="kg-action-bar bg-lgr-darkgrey inline-flex pa0 ma0 list br3 shadow-2 items-center absolute white sans-serif f8 fw6 tracked-2 anim-fast-bezier {{if showToolbar "" "o-0 drop-down"}}" style={{toolbarStyle}}>
         {{#each toolbar.items as |item|}}
-            <button
-                type="button"
-                title={{item.title}}
-                class="koenig-toolbar-btn sans-serif f7"
-                style="width: auto !important"
-                onmousedown={{action item.action}}
-            >
-                {{#if item.icon}}
-                    {{svg-jar item.icon}}
-                {{else}}
-                    {{item.title}}
-                {{/if}}
-            </button>
+            <li class="ma0">
+                <button
+                    type="button"
+                    title={{item.title}}
+                    class="dib dim-lite pa3 pt2 pb2 link {{item.buttonClass}}"
+                    onmousedown={{action item.action}}
+                >
+                    {{#if item.icon}}{{svg-jar item.icon class=(concat item.iconClass (if item.text " mr2") " w4 h4")}} {{/if}}{{item.text}}
+                </button>
+            </li>
         {{/each}}
-    </div>
+    </ul>
 {{/if}}