From 5b494a023c0a7ffe4365a5fc148e1673e57898d8 Mon Sep 17 00:00:00 2001
From: John O'Nolan <john@onolan.org>
Date: Wed, 15 Mar 2017 17:43:12 +0200
Subject: [PATCH] Card menu trigger styling

---
 app/styles/addons/ghost-editor/cardmenu.css   | 30 +++++++++++--------
 .../addon/components/koenig-plus-menu.js      |  8 ++---
 .../templates/components/koenig-plus-menu.hbs |  4 +--
 public/assets/icons/plus.svg                  |  1 +
 4 files changed, 24 insertions(+), 19 deletions(-)
 create mode 100644 public/assets/icons/plus.svg

diff --git a/app/styles/addons/ghost-editor/cardmenu.css b/app/styles/addons/ghost-editor/cardmenu.css
index 5a967d7bb..cfebc1b80 100644
--- a/app/styles/addons/ghost-editor/cardmenu.css
+++ b/app/styles/addons/ghost-editor/cardmenu.css
@@ -18,20 +18,24 @@
     z-index: 9999999; /* have to compete with codemirror */
 }
 
-#gh-cardmenu-button {
-    position:absolute;
-    width: 40px;
-    height: 40px;
-    background-color:pink;
-    font-size:40px;
-    line-height: 40px;
-    color: powderblue;
-    font-family: "Comic Sans MS", cursive, sans-serif;
+.gh-cardmenu-button {
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    padding: 6px;
+    border: var(--midgrey) 1px solid;
+    background: #fff;
+    border-radius: 100%;
+    font-size: 16px;
+    line-height: 16px;
+    text-align: center;
+    color: var(--midgrey);
+}
+
+.gh-cardmenu-button svg path {
+    stroke: var(--midgrey);
+    stroke-width: 2px;
 }
-#gh-cardmenu-button:hover {
-    background-color:red;
-    color: yellow;
-} 
 
 .gh-cardmenu-search {
     position: relative;
diff --git a/lib/gh-koenig/addon/components/koenig-plus-menu.js b/lib/gh-koenig/addon/components/koenig-plus-menu.js
index 3ba59abf5..cfb41650b 100644
--- a/lib/gh-koenig/addon/components/koenig-plus-menu.js
+++ b/lib/gh-koenig/addon/components/koenig-plus-menu.js
@@ -130,19 +130,19 @@ export default Component.extend({
             this.set('isButton', true);
             run.schedule('afterRender', this,
                 () => {
-                    let button = this.$('#gh-cardmenu-button');
-                    button.css('top', offset.top + $editor.scrollTop() - editorOffset.top - 5);
+                    let button = this.$('.gh-cardmenu-button');
+                    button.css('top', offset.top + $editor.scrollTop() - editorOffset.top - 2);
                     if (currentNode.tagName.toLowerCase() === 'li') {
                         button.css('left', this.$(currentNode.parentNode).position().left + $editor.scrollLeft() - 90);
                     } else {
-                        button.css('left', offset.left + $editor.scrollLeft() - 90);
+                        button.css('left', offset.left + $editor.scrollLeft() - 50);
                     }
                 });
         });
     },
     actions: {
         openMenu: function () { // eslint-disable-line
-            let button = this.$('#gh-cardmenu-button');
+            let button = this.$('.gh-cardmenu-button');
             let editor = this.get('editor');
             this.set('isOpen', true);
 
diff --git a/lib/gh-koenig/addon/templates/components/koenig-plus-menu.hbs b/lib/gh-koenig/addon/templates/components/koenig-plus-menu.hbs
index 3f961940d..79def109c 100644
--- a/lib/gh-koenig/addon/templates/components/koenig-plus-menu.hbs
+++ b/lib/gh-koenig/addon/templates/components/koenig-plus-menu.hbs
@@ -1,5 +1,5 @@
 {{#if showButton}}
-<button id="gh-cardmenu-button" {{action "openMenu"}}>+</button>
+<button class="gh-cardmenu-button" {{action "openMenu"}}>{{inline-svg "plus"}}</button>
 {{/if}}
 {{#if isOpen}}
 <div class="gh-cardmenu">
@@ -14,4 +14,4 @@
         {{koenig-menu-item tool=tool editor=editor range=range selected=tool.selected clicked=(action "closeMenu")}}
     {{/each}}
 </div>
-{{/if}}
\ No newline at end of file
+{{/if}}
diff --git a/public/assets/icons/plus.svg b/public/assets/icons/plus.svg
new file mode 100644
index 000000000..e38af340d
--- /dev/null
+++ b/public/assets/icons/plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none"><path d="M11.5.5v22M22.5 11.5h-22"/></g></svg>
\ No newline at end of file