From 01b5717783ed22fea81a334b9104cf7576e7dbcf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Thu, 28 Jul 2016 13:12:37 +0200
Subject: [PATCH] Add depending epics

---
 .../epics/dashboard/story-row/story-row.jade  |  4 ++-
 .../epics/dashboard/story-row/story-row.scss  | 28 +++++++++++++++++--
 .../dependencies/mixins/epics-dashboard.scss  |  1 -
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/app/modules/epics/dashboard/story-row/story-row.jade b/app/modules/epics/dashboard/story-row/story-row.jade
index 379e917b..c851e7b2 100644
--- a/app/modules/epics/dashboard/story-row/story-row.jade
+++ b/app/modules/epics/dashboard/story-row/story-row.jade
@@ -17,7 +17,9 @@
             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(ng-style="::{'background-color': vm.epic.get('color')}")
+        .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')}}
     .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 ec31c14d..320e93f0 100644
--- a/app/modules/epics/dashboard/story-row/story-row.scss
+++ b/app/modules/epics/dashboard/story-row/story-row.scss
@@ -35,13 +35,35 @@
     .name {
         flex-basis: 16vw;
     }
+    .story-pill-wrapper {
+        display: inline-block;
+        position: relative;
+        &:hover {
+            .story-pill-data {
+                display: block;
+            }
+        }
+    }
     .story-pill {
-        background: $grayer;
+        background-color: $grayer;
         border-radius: 50%;
         display: inline-block;
-        height: .5rem;
+        height: .75rem;
         margin-left: .25rem;
-        width: .5rem;
+        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 {
diff --git a/app/styles/dependencies/mixins/epics-dashboard.scss b/app/styles/dependencies/mixins/epics-dashboard.scss
index 6465fda3..c7e83fa4 100644
--- a/app/styles/dependencies/mixins/epics-dashboard.scss
+++ b/app/styles/dependencies/mixins/epics-dashboard.scss
@@ -44,7 +44,6 @@
     .progress {
         flex-shrink: 3;
     }
-    .name,
     .sprint {
         overflow: hidden;
         text-overflow: ellipsis;