Adding basic created by

app/coffee/modules/common/components.coffee

@@ -260,6 +260,48 @@ AssignedToDirective = ($rootscope, $confirm) ->
 module.directive("tgAssignedTo", ["$rootScope", "$tgConfirm", AssignedToDirective])
 
 
+
+#############################################################################
+## Created by directive
+#############################################################################
+
+CreatedByDirective = ->
+    # TODO: i18n
+    template = _.template("""
+    <div class="user-avatar">
+        <img src="<%= owner.photo %>" alt="<%- owner.full_name_display %>" />
+    </div>
+
+    <div class="created-by">
+        <span class="assigned-title">Created by</span>
+        <a href="" title="edit assignment" class="user-assigned">
+            <%- owner.full_name_display %>
+        </a>
+        <span class="assigned-title"><%- date %></span>
+    </div>
+    """)
+
+    link = ($scope, $el, $attrs, $model) ->
+        renderAssignedTo = (instance) ->
+            ownerId = instance?.owner
+            owner = null
+            owner = $scope.usersById[ownerId]
+            date = moment(instance.created_date).format("DD MMM YYYY HH:mm")
+            html = template({owner: owner, date: date})
+            $el.html(html)
+
+        $scope.$watch $attrs.ngModel, (instance) ->
+            renderAssignedTo(instance)
+
+    return {
+        link:link,
+        require:"ngModel"
+    }
+
+
+module.directive("tgCreatedBy", CreatedByDirective)
+
+
 #############################################################################
 ## Common list directives
 #############################################################################

app/partials/issues-detail.jade

@@ -50,4 +50,5 @@ block content
         sidebar.menu-secondary.sidebar
             section.us-status(tg-issue-status, ng-model="issue")
             section.us-assigned-to(tg-assigned-to, ng-model="issue")
+            section.us-created-by(tg-created-by, ng-model="issue")
             section.watchers(tg-watchers, ng-model="issue")

app/partials/task-detail.jade

@@ -50,6 +50,7 @@ block content
         sidebar.menu-secondary.sidebar
             section.us-status(tg-task-status, ng-model="task")
             section.us-assigned-to(tg-assigned-to, ng-model="task")
+            section.us-created-by(tg-created-by, ng-model="task")
             section.watchers(tg-watchers, ng-model="task")
 
             section.us-detail-settings

app/partials/us-detail.jade

@@ -52,6 +52,7 @@ block content
         sidebar.menu-secondary.sidebar
             section.us-status(tg-us-status-detail, ng-model="us")
             section.us-assigned-to(tg-assigned-to, ng-model="us")
+            section.us-created-by(tg-created-by, ng-model="us")
             section.watchers(tg-watchers, ng-model="us")
 
             section.us-detail-settings

app/styles/components/created-by.scss

@@ -0,0 +1,40 @@
+.us-created-by {
+    @include table-flex();
+    margin-top: 2rem;
+    position: relative;
+    .user-avatar {
+        @include table-flex-child(1, 0);
+        img {
+            border-radius: 8%;
+            width: 100%;
+        }
+    }
+    .created-by {
+        @include table-flex-child(3, 0);
+        margin-left: 1rem;
+        margin-top: 5px;
+        .assigned-title {
+            @extend %small;
+            color: $gray-light;
+            display: block;
+        }
+        .user-assigned {
+            @extend %large;
+            color: $green-taiga;
+            cursor: default;
+            &.editable {
+                cursor: pointer;
+            }
+        }
+        .icon-delete {
+            color: $gray-light;
+            opacity: 1;
+            position: absolute;
+            right: 1rem;
+            top: 1rem;
+            &:hover {
+                color: $red;
+            }
+        }
+    }
+}

app/styles/main.scss

@@ -39,6 +39,7 @@ $prefix-for-spec:      true;
 @import 'components/watchers';
 @import 'components/level';
 @import 'components/assigned-to';
+@import 'components/created-by';
 @import 'components/wysiwyg';
 @import 'components/select-color';
 @import 'components/loader';