From ab118ba572386b82c7aa578fddacc04f70e0d97a Mon Sep 17 00:00:00 2001
From: Ryan McCarvill <ryan@disordinary.com>
Date: Tue, 21 Mar 2017 01:44:09 +1300
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=20Insert=20Link=20styling=20(#598)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

closes: https://github.com/TryGhost/Ghost/issues/8109
- adds styling for the insert link toolbar component.
---
 app/styles/addons/gh-koenig/koenig-toolbar.css       | 12 ++++++++++++
 lib/gh-koenig/addon/components/koenig-toolbar.js     | 10 +++++++---
 .../addon/templates/components/koenig-toolbar.hbs    |  1 +
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/app/styles/addons/gh-koenig/koenig-toolbar.css b/app/styles/addons/gh-koenig/koenig-toolbar.css
index e713ce8773..03de27a795 100644
--- a/app/styles/addons/gh-koenig/koenig-toolbar.css
+++ b/app/styles/addons/gh-koenig/koenig-toolbar.css
@@ -29,6 +29,18 @@
     border-top: color(var(--darkgrey) l(-10%)) 8px solid;
 }
 
+.gh-toolbar.is-link {
+    width: 263px;
+    height: 40px;
+}
+.gh-toolbar.is-link input {
+    width: 100%;
+    background-color: transparent;
+    outline: none;
+    border: none;
+    padding:5px;
+}
+
 .gh-toolbar-btn {
     display: flex;
     justify-content: center;
diff --git a/lib/gh-koenig/addon/components/koenig-toolbar.js b/lib/gh-koenig/addon/components/koenig-toolbar.js
index ef8dfcfbbb..5a5f0265bc 100644
--- a/lib/gh-koenig/addon/components/koenig-toolbar.js
+++ b/lib/gh-koenig/addon/components/koenig-toolbar.js
@@ -9,7 +9,7 @@ import Tools from '../options/default-tools';
 export default Component.extend({
     layout,
     classNames: ['gh-toolbar'],
-    classNameBindings: ['isVisible'],
+    classNameBindings: ['isVisible', 'isLink'],
     isVisible: false,
     tools: [],
     hasRendered: false,
@@ -83,14 +83,14 @@ export default Component.extend({
         linkKeyDown(event) {
             // if escape close link
             if (event.keyCode === 27) {
-                this.set('isLink', false);
+                this.send('closeLink');
             }
         },
 
         linkKeyPress(event) {
             // if enter run link
             if (event.keyCode === 13) {
-                this.set('isLink', false);
+                this.send('closeLink');
                 this.set('isVisible', false);
                 this.editor.run((postEditor) => {
                     let markup = postEditor.builder.createMarkup('a', {href: event.target.value});
@@ -100,6 +100,10 @@ export default Component.extend({
                 this.set('linkRange', null);
                 event.stopPropagation();
             }
+        },
+
+        closeLink() {
+            this.set('isLink', false);
         }
     },
     doLink(range) {
diff --git a/lib/gh-koenig/addon/templates/components/koenig-toolbar.hbs b/lib/gh-koenig/addon/templates/components/koenig-toolbar.hbs
index 2d90a92b1f..2c484733f3 100644
--- a/lib/gh-koenig/addon/templates/components/koenig-toolbar.hbs
+++ b/lib/gh-koenig/addon/templates/components/koenig-toolbar.hbs
@@ -1,5 +1,6 @@
 {{#if isLink}}
     {{input keyDown=(action "linkKeyDown") keyPress=(action "linkKeyPress") autofocus=true placeholder="Enter a link"}}
+    <button class="gh-toolbar-btn" {{action 'closeLink'}}>x</button>
 {{else}}
     {{#each toolbar as |tool|}}
         {{koenig-toolbar-button tool=tool editor=editor iconURL=iconURL assetPath=assetPath}}