Merge pull request #4287 from PaulAdamDavis/tag-input-ux

Tag input UX improvements

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;

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>
+</div>

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;