Us detail name and tag line edition

app/coffee/modules/common/components.coffee

@@ -447,9 +447,7 @@ EditableSubjectDirective = ($rootscope, $repo, $confirm, $loading) ->
 
     editTemplate = _.template("""
         <input type="text" value="<%- item.subject %>" data-required="true" data-maxlength="500"/>
-      <div class="save-container">
         <a class="save icon icon-floppy" href="" title="Save" />
-      </div>
     """)
 
     link = ($scope, $el, $attrs, $model) ->
@@ -528,9 +526,7 @@ EditableDescriptionDirective = ($rootscope, $repo, $confirm, $compile, $loading)
       <textarea placeholder="Write a description of your user story"
                 ng-model="item.description"
                 tg-markitup="tg-markitup"><%- item.description %></textarea>
-      <div class="save-container">
       <a class="save icon icon-floppy" href="" title="Save" />
-      </div>
     """)
 
     link = ($scope, $el, $attrs, $model) ->

app/coffee/modules/common/tags.coffee

@@ -95,19 +95,20 @@ TagLineDirective = ($rootscope, $log, $rs, $tgrepo, $confirm) ->
     # Main directive template (rendered by angular)
     template = """
     <div class="tags-container"></div>
-    <input type="text" placeholder="Write tag..." class="tag-input" />
+    <a href="#" class="add-tag icon icon-plus" title="Add tag"></a>
+    <input type="text" placeholder="Write tag..." class="tag-input hidden" />
     <a href="" title="Save" class="save icon icon-floppy"></a>
     """
 
     # Tags template (rendered manually using lodash)
     templateTags = _.template("""
     <% _.each(tags, function(tag) { %>
-        <div class="tag" style="border-left: 5px solid <%- tag.color %>;">
+        <span class="tag" style="border-left: 5px solid <%- tag.color %>;">
             <span class="tag-name"><%- tag.name %></span>
             <% if (editable) { %>
             <a href="" title="delete tag" class="icon icon-delete"></a>
             <% } %>
-        </div>
+        </span>
     <% }); %>""")
 
     renderTags = ($el, tags, editable, tagsColors) ->
@@ -201,6 +202,12 @@ TagLineDirective = ($rootscope, $log, $rs, $tgrepo, $confirm) ->
 
         $el.on "click", ".save", saveInputTag
 
+        $el.on "click", ".add-tag", (event) ->
+            event.preventDefault()
+            target = angular.element(event.currentTarget)
+            target.hide()
+            target.siblings('input').removeClass('hidden')
+
         $el.on "click", ".icon-delete", (event) ->
             event.preventDefault()
             target = angular.element(event.currentTarget)

app/styles/components/tag.scss

@@ -33,7 +33,6 @@
         vertical-align: middle;
     }
     input {
-        display: inline-block;
         padding: .4rem;
         width: 14rem;
     }

app/styles/layout/us-detail.scss

@@ -86,8 +86,10 @@
             display: inline-block;
             line-height: 2.2rem;
             padding-right: 1rem;
+            width: 100%;
         }
-        .save {
+        .icon-edit,
+        .icon-floppy {
             @extend %large;
             color: $gray-light;
             margin-left: .5rem;
@@ -153,6 +155,17 @@
     }
 }
 
+.tags-block {
+    .icon-plus {
+        @extend %large;
+        color: $gray-light;
+        vertical-align: top;
+        &:hover {
+            color: $fresh-taiga;
+        }
+    }
+}
+
 .us-content {
     textarea {
         background: $white;