Belong to epic component

app/modules/components/belong-to-epics/belong-to-epics.directive.coffee

@@ -0,0 +1,33 @@
+###
+# Copyright (C) 2014-2016 Taiga Agile LLC <taiga@taiga.io>
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as
+# published by the Free Software Foundation, either version 3 of the
+# License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program. If not, see <http://www.gnu.org/licenses/>.
+#
+# File: belong-to-epics.directive.coffee
+###
+
+module = angular.module('taigaEpics')
+
+BelongToEpicsDirective = () ->
+
+    return {
+        templateUrl:"components/belong-to-epics/belong-to-epics.html",
+        scope: {
+            epics: '='
+        }
+    }
+
+BelongToEpicsDirective.$inject = []
+
+module.directive("tgBelongToEpics", BelongToEpicsDirective)

app/modules/components/belong-to-epics/belong-to-epics.jade

@@ -0,0 +1,4 @@
+- var hash = "#";
+.belong-to-epic-pill-wrapper(tg-repeat="epic in epics")
+    .belong-to-epic-pill(ng-style="{'background': epic.get('color')}")
+    .belong-to-epic-pill-data #{hash}{{epic.get('id')}} {{epic.get('subject')}}

app/modules/components/belong-to-epics/belong-to-epics.scss

@@ -0,0 +1,30 @@
+.belong-to-epic-pill-wrapper {
+    display: inline-block;
+    position: relative;
+    &:hover {
+        .belong-to-epic-pill-data {
+            display: block;
+        }
+    }
+}
+.belong-to-epic-pill {
+    background-color: $grayer;
+    border-radius: 50%;
+    display: inline-block;
+    height: .75rem;
+    margin-left: .25rem;
+    position: relative;
+    width: .75rem;
+}
+.belong-to-epic-pill-data {
+    animation: dropdownFade .2s;
+    background: rgba($black, .9);
+    bottom: 1.25rem;
+    color: $white;
+    display: none;
+    left: -100px;
+    padding: .5rem 1rem;
+    position: absolute;
+    width: 200px;
+    z-index: 99;
+}

app/modules/epics/dashboard/story-row/story-row.jade

@@ -14,9 +14,10 @@
             tg-nav="project-userstories-detail:project=vm.project.slug,ref=vm.story.get('ref')"
             ng-attr-title="{{::vm.story.get('subject')}}"
         ) #{hash}{{::vm.story.get('ref')}} {{::vm.story.get('subject')}}
-        .story-pill-wrapper(tg-repeat="pill in vm.story.get('epics')")
+        tg-belong-to-epics(
-            .story-pill(ng-style="{'background': pill.get('color')}")
+            ng-if="vm.story.get('epics')"
-            .story-pill-data #{hash}{{pill.get('id')}} {{pill.get('subject')}}
+            epics="vm.story.get('epics')"
+        )
     .project(
         ng-if="vm.column.project"
         tg-nav="project:project=vm.story.getIn(['project_extra_info', 'slug'])"

app/modules/epics/dashboard/story-row/story-row.scss

@@ -25,36 +25,6 @@
     .name {
         flex-basis: 17.5vw;
     }
-    .story-pill-wrapper {
-        display: inline-block;
-        position: relative;
-        &:hover {
-            .story-pill-data {
-                display: block;
-            }
-        }
-    }
-    .story-pill {
-        background-color: $grayer;
-        border-radius: 50%;
-        display: inline-block;
-        height: .75rem;
-        margin-left: .25rem;
-        position: relative;
-        width: .75rem;
-    }
-    .story-pill-data {
-        animation: dropdownFade .2s;
-        background: rgba($black, .9);
-        bottom: 1.25rem;
-        color: $white;
-        display: none;
-        left: -100px;
-        padding: .5rem 1rem;
-        position: absolute;
-        width: 200px;
-        z-index: 99;
-    }
     .progress-bar,
     .progress-status {
         height: 1.5rem;