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

Tag input UX improvements
macedigital · Oct 21, 2014 · 5e2d9c4 · 5e2d9c4
2 parents 5db1ede + 89ee30b
commit 5e2d9c4
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 19 deletions.
diff --git 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
@@ -6,20 +6,18 @@
 <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}}
                 <a href="javascript:void(0);">{{view.suggestion.highlightedName}}</a>
             {{/view}}
         {{/each}}
     </ul>
-</div>
+</div>
diff --git 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;