From 24b8cf2cef9f80178d77925330c67fecdb2576cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Thu, 28 Jul 2016 12:51:09 +0200
Subject: [PATCH] US#4445: Add milestones to main menu

---
 .../components/project-menu/project-menu.jade | 16 ++++++-
 app/styles/modules/common/nav.scss            | 45 +++++++++++++++++++
 2 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/app/modules/components/project-menu/project-menu.jade b/app/modules/components/project-menu/project-menu.jade
index ddb4e109..e1bdd2d9 100644
--- a/app/modules/components/project-menu/project-menu.jade
+++ b/app/modules/components/project-menu/project-menu.jade
@@ -25,7 +25,12 @@ nav.menu(
                     tg-svg(svg-icon="icon-timeline")
                     span.helper(translate="PROJECT.SECTION.TIMELINE")
 
-            li#nav-backlog(ng-if="vm.menu.get('backlog')")
+            li#nav-backlog(
+                ng-if="vm.menu.get('backlog')"
+                ng-mouseover="backlogHover = true"
+                ng-mouseleave="backlogHover = false"
+                ng-init="backlogHover = false"
+            )
                 a(
                     tg-nav="project-backlog:project=vm.project.get('slug')"
                     ng-class="{active: vm.active == 'backlog'}"
@@ -33,7 +38,14 @@ nav.menu(
                     tabindex="2"
                 )
                     tg-svg(svg-icon="icon-scrum")
-                    span.helper(translate="PROJECT.SECTION.BACKLOG")
+
+                span.backlog-sprints-menu(ng-show="backlogHover")
+                  span(translate="PROJECT.SECTION.BACKLOG")
+                  a(
+                      tg-repeat="sprint in vm.project.get('milestones') track by sprint.get('id')"
+                      ng-if="!sprint.get('closed')"
+                      tg-nav="project-taskboard:project=vm.project.get('slug'),sprint=sprint.get('slug')"
+                  ) {{::sprint.get('name')}}
 
             li#nav-kanban(ng-if="vm.menu.get('kanban')")
                 a(
diff --git a/app/styles/modules/common/nav.scss b/app/styles/modules/common/nav.scss
index 0da555f0..6aca2ffe 100644
--- a/app/styles/modules/common/nav.scss
+++ b/app/styles/modules/common/nav.scss
@@ -27,6 +27,9 @@ tg-project-menu {
         padding: 1.1rem .8rem;
         position: relative;
     }
+    li {
+        position: relative;
+    }
     a:hover {
         background: rgba($black, .2);
         transition: color .3s linear;
@@ -100,3 +103,45 @@ tg-project-menu {
         opacity: 1;
     }
 }
+
+.backlog-sprints-menu {
+    @include font-size(small);
+    animation: slideLeft 200ms ease-in-out both;
+    background: linear-gradient(to right, rgba($black, 1) 0%, rgba($black, .8) 100%);
+    color: $white;
+    display: block;
+    left: 50px;
+    opacity: 1;
+    padding: .4rem 1rem;
+    position: absolute;
+    top: 1rem;
+    transition: all .2s;
+    white-space: nowrap;
+    z-index: 99;
+    a {
+        color: $white;
+        padding: .6rem .8rem;
+        text-align: left;
+        text-transform: none;
+        &:nth-child(2) {
+            padding: 1rem .8rem .6rem;
+        }
+        &:last-child {
+            padding: .6rem .8rem .4rem;
+        }
+        &:hover {
+            background: none;
+        }
+    }
+    &::after {
+        background: rgba($blackish, 1);
+        content: '';
+        height: $label-arrow-wh;
+        left: calc(-#{$label-arrow-wh}/2);
+        position: absolute;
+        top: calc(1rem - #{$label-arrow-wh}/2);
+        transform: rotate(45deg);
+        width: $label-arrow-wh;
+        z-index: 98;
+    }
+}