Epic statuses

app/modules/epics/dashboard/epic-row/epic-row.controller.coffee

@@ -25,6 +25,7 @@ class EpicRowController
 
     constructor: () ->
         console.log @.epic.toJS()
+        console.log @.project
         @._calculateProgressBar()
 
     _calculateProgressBar: () ->

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

@@ -1,6 +1,7 @@
 .epic-row(
     ng-class="{'is-blocked':  vm.epic.get('is_blocked'), 'is-closed': vm.epic.get('is_closed')}"
 )
+    tg-svg(svg-icon="icon-drag")
     .vote(
         ng-if="vm.column.votes"
         ng-class="{'is-voter': vm.epic.get('is_voter')}"
@@ -31,14 +32,22 @@
     ) Unassigned
     .status(
         ng-if="vm.column.status"
-        ng-style="{'color': vm.epic.getIn(['status_extra_info', 'color'])}"
         ng-mouseleave="displayStatusList = false"
     )
         button(
             ng-click="displayStatusList = true"
+            ng-style="{'color': vm.epic.getIn(['status_extra_info', 'color'])}"
         )
             span {{::vm.epic.getIn(['status_extra_info', 'name'])}}
-            tg-svg(svg-icon="icon-arrow-down")        
+            tg-svg(
+                svg-icon="icon-arrow-down"
+            )
+            
+        ul.epic-statuses(ng-show="displayStatusList")
+            li(
+                ng-repeat="status in vm.project.epic_statuses | orderBy:'order'"
+                ng-click="vm.updateEpicStatus(status.name)"
+            ) {{status.name}}
     .progress(ng-if="vm.column.progress")
         .progress-bar
         .progress-status(

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

@@ -12,8 +12,12 @@
             text-decoration: line-through;
         }
     }
+    .icon-drag {
+        fill: $gray-light;
+    }
     .status {
         cursor: pointer;
+        position: relative;
         button {
             background: none;
         }
@@ -48,4 +52,29 @@
         margin-right: .25rem;
         vertical-align: middle;
     }
+    .epic-statuses {
+        @include font-type(light);
+        @include font-size(small);
+        background: rgba($blackish, .9);
+        border-bottom: 1px solid $grayer;
+        box-shadow: 3px 3px 2px rgba($black, .1);
+        color: $white;
+        left: 0;
+        list-style-type: none;
+        margin: 0;
+        position: absolute;
+        top: 2.5rem;
+        width: 200px;
+        z-index: 99;
+        &:last-child {
+            border: 0;
+        }
+        li {
+            padding: .5rem;
+            &:hover {
+                color: $primary-light;
+                transition: color .3s linear;
+            }
+        }
+    }
 }