Hide columns

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

@@ -25,5 +25,11 @@ class EpicRowController
 
     constructor: () ->
         console.log @.epic.toJS()
+        @._calculateProgressBar()
+
+    _calculateProgressBar: () ->
+        totalUs = @.epic.getIn(['user_stories_counts', 'closed'])
+        totalUsCompleted = @.epic.getIn(['user_stories_counts', 'opened'])
+        @.percentage = (totalUs * 100) / totalUsCompleted
 
 module.controller("EpicRowCtrl", EpicRowController)

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

@@ -27,7 +27,9 @@ EpicRowDirective = () ->
         controllerAs: "vm",
         bindToController: true,
         scope: {
-            epic: '='
+            project: '=',
+            epic: '=',
+            column: '='
         }
     }
 

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

@@ -1,29 +1,47 @@
-.epic-row
-    .vote(ng-class="{'is-voter': vm.epic.get('is_voter')}") 
+.epic-row(
+    ng-class="{'is-blocked':  vm.epic.get('is_blocked'), 'is-closed': vm.epic.get('is_closed')}"
+)
+    .vote(
+        ng-if="vm.column.votes"
+        ng-class="{'is-voter': vm.epic.get('is_voter')}"
+    ) 
         tg-svg(svg-icon='icon-upvote')
         span {{::vm.epic.get('total_voters')}}
         
-    .name() {{::vm.epic.get('subject')}}
+    .name(ng-if="vm.column.name") 
+        a(
+            tg-nav="project-epic-detail:project=vm.project.get('slug')"
+            ng-attr-title="{{::vm.epic.get('subject')}}"
+        ) {{::vm.epic.get('subject')}}
     
-    .project() {{::vm.epic.get('project')}}
+    .project(ng-if="vm.column.project") {{::vm.epic.get('project')}}
     .sprint(
+        ng-if="vm.column.sprint"
         translate="EPICS.TABLE.SPRINT"
     )
     .assigned(
-        ng-if="vm.epic.getIn(['assigned_to_extra_info', 'photo'])"
+        ng-if="vm.column.assigned && vm.epic.getIn(['assigned_to_extra_info', 'photo'])"
     ) 
         img(
             ng-src="{{vm.epic.getIn(['assigned_to_extra_info', 'photo'])}}"
             alt="::vm.epic.getIn(['assigned_to_extra_info', 'name'])"
         )    
     .assigned(
-        ng-if="!vm.epic.getIn(['assigned_to_extra_info', 'photo'])"
+        ng-if="vm.column.assigned && !vm.epic.getIn(['assigned_to_extra_info', 'photo'])"
     ) Unassigned
     .status(
+        ng-if="vm.column.status"
         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")        
-    .progress
+        ng-mouseleave="displayStatusList = false"
+    )
+        button(
+            ng-click="displayStatusList = true"
+        )
+            span {{::vm.epic.getIn(['status_extra_info', 'name'])}}
+            tg-svg(svg-icon="icon-arrow-down")        
+    .progress(ng-if="vm.column.progress")
         .progress-bar
-        .progress-status
+        .progress-status(
+            ng-if="::vm.percentage"
+            ng-attr-width="::vm.percentage"
+        )

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

@@ -3,6 +3,26 @@
     align-items: center;
     border-bottom: 1px solid $whitish;
     display: flex;
+    &.is-blocked {
+        background: rgba($red-light, .5);
+    }
+    &.is-closed {
+        .name {
+            color: $gray-light;
+            text-decoration: line-through;
+        }
+    }
+    .status {
+        cursor: pointer;
+        button {
+            background: none;
+        }
+        .icon {
+            @include svg-size(.7rem);
+            fill: $gray-light;
+            margin-left: .1rem;
+        }
+    }
     .progress-bar,
     .progress-status {
         height: 1.5rem;

app/modules/epics/dashboard/epics-table/epics-table.jade

@@ -92,4 +92,6 @@ mixin epicSwitch(name, model)
         .epics-table-body-row(tg-repeat="epic in vm.epics track by epic.get('id')")
             tg-epic-row(
                 epic="epic"
+                project="vm.project"
+                column="vm.column"
             )

app/modules/epics/dashboard/epics-table/epics-table.scss

@@ -29,11 +29,15 @@
         flex-grow: 0;
         flex-shrink: 0;
         flex-wrap: wrap;
+        max-width: 150px;
     }
     .name,
     .progress {
         flex: 1;
         max-width: 40vw;
+    }
+    .name,
+    .sprint {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -53,9 +57,9 @@
 }
 
 .epics-table-options-wrapper {
+    bottom: 1rem;
     position: absolute;
     right: .5rem;
-    top: .5rem;
 }
 
 .epics-table-option-button {
@@ -78,6 +82,7 @@
     right: 0;
     top: 1.3rem;
     width: 250px;
+    z-index: 99;
     .fieldset {
         @include font-size(small);
         border-bottom: 1px solid $whitish;