diff --git a/app/modules/epics/dashboard/epic-row/epic-row.controller.coffee b/app/modules/epics/dashboard/epic-row/epic-row.controller.coffee index b943cc53..640be052 100644 --- a/app/modules/epics/dashboard/epic-row/epic-row.controller.coffee +++ b/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: () -> diff --git a/app/modules/epics/dashboard/epic-row/epic-row.jade b/app/modules/epics/dashboard/epic-row/epic-row.jade index e3bfffdd..20ccb2e1 100644 --- a/app/modules/epics/dashboard/epic-row/epic-row.jade +++ b/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( diff --git a/app/modules/epics/dashboard/epic-row/epic-row.scss b/app/modules/epics/dashboard/epic-row/epic-row.scss index 1998624c..2e5076cd 100644 --- a/app/modules/epics/dashboard/epic-row/epic-row.scss +++ b/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; + } + } + } }