Refactorized assigned to template

app/coffee/modules/issues/detail.coffee

@@ -270,16 +270,18 @@ AssignedToDirective = ($rootscope, $confirm) ->
         <% } %>
         <div class="assigned-to">
             <span class="assigned-title">Assigned to</span>
-            <span class="user-assigned">
+            <a href="" title="edit assignment" class="user-assigned">
             <% if (assignedTo) { %>
-            <%= assignedTo.full_name_display %>
+                <%= assignedTo.full_name_display %>
             <% } else { %>
-            Not assigned
+                Not assigned
             <% } %>
-            </span>
+            <% if (editable) { %>
+                <span class="icon icon-arrow-bottom"></span>
+            <% } %>
+            </a>
             <% if (editable) { %>
             <a href="" title="delete assignment" class="icon icon-delete"></a>
-            <a href="" title="edit assignment" class="icon icon-edit"></a>
             <% } %>
         </div>
     """)
@@ -293,7 +295,7 @@ AssignedToDirective = ($rootscope, $confirm) ->
             html = template({assignedTo: assignedTo, editable:editable})
             $el.html(html)
 
-        $el.on "click", ".icon-edit", (event) ->
+        $el.on "click", ".user-assigned", (event) ->
             event.preventDefault()
             $rootscope.$broadcast("assigned-to:add")
 

app/partials/issues-detail-edit.jade

@@ -60,7 +60,7 @@ block content
                     span.status-status new
                     span.level-name status
 
-            section.us-detail-assigned-to(tg-assigned-to, ng-model="issue.assigned_to", editable="true")
+            section.us-assigned-to(tg-assigned-to, ng-model="issue.assigned_to", editable="true")
             section.watchers(tg-watchers, ng-model="issue.watchers", editable="true")
 
             section.us-detail-settings

app/partials/issues-detail.jade

@@ -63,7 +63,7 @@ block content
                     span.status-status new
                     span.level-name status
 
-            section.us-detail-assigned-to(tg-assigned-to, ng-model="issue.assigned_to")
+            section.us-assigned-to(tg-assigned-to, ng-model="issue.assigned_to")
             section.watchers(tg-watchers, ng-model="issue.watchers")
 
             section.us-detail-settings

app/partials/us-detail.jade

@@ -62,13 +62,7 @@ block content
                      li.total
                          span.points 10
                          span.role UX
-                 section.us-detail-assigned-to
+                 include views/components/assigned-to
-                     div.user-avatar
-                         a.avatar(href="", title="Assigned to")
-                             img(src="http://thecodeplayer.com/u/uifaces/18.jpg", alt="username")
-                     div.assigned-to
-                         span.assigned-title Assigned to
-                         span.user-assigned Anler Hernández
                  section.watchers
                      div.watchers-header
                          span.title watchers

app/partials/views/components/assigned-to.jade

@@ -1,4 +1,4 @@
-section.us-detail-assigned-to
+section.us-assigned-to
     div.user-avatar
         a.avatar(href="", title="Assigned to")
             img(src="http://thecodeplayer.com/u/uifaces/18.jpg", alt="username")

app/styles/components/assigned-to.scss

@@ -0,0 +1,31 @@
+.us-assigned-to {
+    @include table-flex();
+    margin-top: 2rem;
+    position: relative;
+    .user-avatar {
+        @include table-flex-child(1, 0);
+    }
+    .assigned-to {
+        @include table-flex-child(3, 0);
+        margin-left: 1rem;
+        margin-top: 15px;
+        .assigned-title {
+            color: $gray-light;
+            display: block;
+        }
+        .user-assigned {
+            @extend %large;
+            color: $green-taiga;
+        }
+        .icon-delete {
+            color: $gray-light;
+            opacity: 1;
+            position: absolute;
+            right: 1rem;
+            top: 1rem;
+            &:hover {
+                color: $green-taiga;
+            }
+        }
+    }
+}

app/styles/layout/us-detail.scss

@@ -217,38 +217,6 @@
     }
 }
 
-.us-detail-assigned-to {
-    @include table-flex();
-    margin-top: 2rem;
-    position: relative;
-    .user-avatar {
-        @include table-flex-child(1, 0);
-    }
-    .assigned-to {
-        @include table-flex-child(3, 0);
-        margin-left: 1rem;
-        margin-top: 15px;
-        .assigned-title {
-            color: $gray-light;
-            display: block;
-        }
-        .user-assigned {
-            @extend %large;
-            color: $green-taiga;
-        }
-        .icon-edit {
-            color: $gray-light;
-            opacity: 1;
-            position: absolute;
-            right: 1rem;
-            top: 1rem;
-            &:hover {
-                color: $green-taiga;
-            }
-        }
-    }
-}
-
 .watchers {
     margin-top: 2rem;
     .watchers-header {

app/styles/main.scss

@@ -31,6 +31,7 @@ $prefix-for-spec:      true;
 @import 'components/paginator';
 @import 'components/watchers';
 @import 'components/level';
+@import 'components/assigned-to';
 
 //Modules
 @import 'modules/nav';