From 1a42030e80562a737a263c18a38e6dd0c69fdb78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Mon, 8 Aug 2016 12:29:04 +0200
Subject: [PATCH] Belong to epic component

---
 .../belong-to-epics.directive.coffee          | 33 +++++++++++++++++++
 .../belong-to-epics/belong-to-epics.jade      |  4 +++
 .../belong-to-epics/belong-to-epics.scss      | 30 +++++++++++++++++
 .../epics/dashboard/story-row/story-row.jade  |  7 ++--
 .../epics/dashboard/story-row/story-row.scss  | 30 -----------------
 5 files changed, 71 insertions(+), 33 deletions(-)
 create mode 100644 app/modules/components/belong-to-epics/belong-to-epics.directive.coffee
 create mode 100644 app/modules/components/belong-to-epics/belong-to-epics.jade
 create mode 100644 app/modules/components/belong-to-epics/belong-to-epics.scss

diff --git a/app/modules/components/belong-to-epics/belong-to-epics.directive.coffee b/app/modules/components/belong-to-epics/belong-to-epics.directive.coffee
new file mode 100644
index 00000000..0752ef40
--- /dev/null
+++ b/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)
diff --git a/app/modules/components/belong-to-epics/belong-to-epics.jade b/app/modules/components/belong-to-epics/belong-to-epics.jade
new file mode 100644
index 00000000..d492581e
--- /dev/null
+++ b/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')}}
diff --git a/app/modules/components/belong-to-epics/belong-to-epics.scss b/app/modules/components/belong-to-epics/belong-to-epics.scss
new file mode 100644
index 00000000..65ad4f2c
--- /dev/null
+++ b/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;
+}
diff --git a/app/modules/epics/dashboard/story-row/story-row.jade b/app/modules/epics/dashboard/story-row/story-row.jade
index ba9580ef..4010abde 100644
--- a/app/modules/epics/dashboard/story-row/story-row.jade
+++ b/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')")
-            .story-pill(ng-style="{'background': pill.get('color')}")
-            .story-pill-data #{hash}{{pill.get('id')}} {{pill.get('subject')}}
+        tg-belong-to-epics(
+            ng-if="vm.story.get('epics')"
+            epics="vm.story.get('epics')"
+        )
     .project(
         ng-if="vm.column.project"
         tg-nav="project:project=vm.story.getIn(['project_extra_info', 'slug'])"
diff --git a/app/modules/epics/dashboard/story-row/story-row.scss b/app/modules/epics/dashboard/story-row/story-row.scss
index ad742a2a..51aa9fcd 100644
--- a/app/modules/epics/dashboard/story-row/story-row.scss
+++ b/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;