From 89ee30becde32bfd4cbc4c6b40aa9e1d85e17556 Mon Sep 17 00:00:00 2001
From: Paul Adam Davis <pauladamdavis@gmail.com>
Date: Thu, 16 Oct 2014 10:34:27 +0100
Subject: [PATCH] Tag input UX improvements

Closes #4105

- Turns the tag icon white when input is focused.
- Focuses on the tag inout after deleting a tag.

Credit to @novaugust for a PR to this which is rebased into one single commit
---
 core/client/assets/sass/layouts/editor.scss |  5 +++++
 core/client/templates/post-tags-input.hbs   |  8 +++----
 core/client/views/post-tags-input.js        | 25 +++++++++------------
 3 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/core/client/assets/sass/layouts/editor.scss b/core/client/assets/sass/layouts/editor.scss
index eb890de09a..5d7d4ac64c 100644
--- a/core/client/assets/sass/layouts/editor.scss
+++ b/core/client/assets/sass/layouts/editor.scss
@@ -616,6 +616,11 @@ body.zen {
         color: #fff;
     }
 }//.tag-label
+#entry-tags.focused {
+    .tag-label:before {
+        color: #fff;
+    }
+}
 
 .publish-bar-inner {
     display: flex;
diff --git a/core/client/templates/post-tags-input.hbs b/core/client/templates/post-tags-input.hbs
index e30e4fc73d..630d7d4310 100644
--- a/core/client/templates/post-tags-input.hbs
+++ b/core/client/templates/post-tags-input.hbs
@@ -6,15 +6,13 @@
 <div class="publish-bar-tags">
     <div class="tags-wrapper tags">
         {{#each controller.tags}}
-            {{#view view.tagView tag=this}}
-                {{view.tag.name}}
-            {{/view}}
+           <span class="tag" {{action "deleteTag" this target=view}}>{{name}}</span>
         {{/each}}
     </div>
 </div>
 <div class="publish-bar-tags-input">
     <input type="hidden" class="tags-holder" id="tags-holder">
-    {{view view.tagInputView class="tag-input" id="tags" value=newTagText}}
+    {{view view.tagInputView class="tag-input js-tag-input" id="tags" value=newTagText}}
     <ul class="suggestions dropdown-menu dropdown-triangle-bottom" {{bind-attr style=view.overlayStyles}}>
         {{#each suggestions}}
             {{#view view.suggestionView suggestion=this}}
@@ -22,4 +20,4 @@
             {{/view}}
         {{/each}}
     </ul>
-</div>
\ No newline at end of file
+</div>
diff --git a/core/client/views/post-tags-input.js b/core/client/views/post-tags-input.js
index 1ddbfcffe3..1b9b88dceb 100644
--- a/core/client/views/post-tags-input.js
+++ b/core/client/views/post-tags-input.js
@@ -2,6 +2,7 @@ var PostTagsInputView = Ember.View.extend({
     tagName: 'section',
     elementId: 'entry-tags',
     classNames: 'publish-bar-inner',
+    classNameBindings: ['hasFocus:focused'],
 
     templateName: 'post-tags-input',
 
@@ -108,19 +109,6 @@ var PostTagsInputView = Ember.View.extend({
         }
     }),
 
-
-    tagView: Ember.View.extend({
-        tagName: 'span',
-        classNames: 'tag',
-
-        tag: null,
-
-        click: function () {
-            this.get('parentView.controller').send('deleteTag', this.get('tag'));
-        }
-    }),
-
-
     suggestionView: Ember.View.extend({
         tagName: 'li',
         classNameBindings: 'suggestion.selected',
@@ -139,7 +127,16 @@ var PostTagsInputView = Ember.View.extend({
             this.get('parentView.controller').send('addTag',
                 this.get('suggestion.tag'));
         },
-    })
+    }),
+
+    actions: {
+        deleteTag: function (tag) {
+            //The view wants to keep focus on the input after a click on a tag
+            Ember.$('.js-tag-input').focus();
+            //Make the controller do the actual work
+            this.get('controller').send('deleteTag', tag);
+        }
+    }
 });
 
 export default PostTagsInputView;