From 7b124d597b509cc6ee051b2cff8532d00ea469ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= Date: Fri, 22 Jul 2016 08:37:37 +0200 Subject: [PATCH] Hide columns --- .../epic-row/epic-row.controller.coffee | 6 +++ .../epic-row/epic-row.directive.coffee | 4 +- .../epics/dashboard/epic-row/epic-row.jade | 40 ++++++++++++++----- .../epics/dashboard/epic-row/epic-row.scss | 20 ++++++++++ .../dashboard/epics-table/epics-table.jade | 2 + .../dashboard/epics-table/epics-table.scss | 7 +++- 6 files changed, 66 insertions(+), 13 deletions(-) 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 09ebcfd0..b943cc53 100644 --- a/app/modules/epics/dashboard/epic-row/epic-row.controller.coffee +++ b/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) diff --git a/app/modules/epics/dashboard/epic-row/epic-row.directive.coffee b/app/modules/epics/dashboard/epic-row/epic-row.directive.coffee index cb80d678..3332f917 100644 --- a/app/modules/epics/dashboard/epic-row/epic-row.directive.coffee +++ b/app/modules/epics/dashboard/epic-row/epic-row.directive.coffee @@ -27,7 +27,9 @@ EpicRowDirective = () -> controllerAs: "vm", bindToController: true, scope: { - epic: '=' + project: '=', + epic: '=', + column: '=' } } diff --git a/app/modules/epics/dashboard/epic-row/epic-row.jade b/app/modules/epics/dashboard/epic-row/epic-row.jade index f14f6592..e3bfffdd 100644 --- a/app/modules/epics/dashboard/epic-row/epic-row.jade +++ b/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" + ) diff --git a/app/modules/epics/dashboard/epic-row/epic-row.scss b/app/modules/epics/dashboard/epic-row/epic-row.scss index 2d3f294b..1998624c 100644 --- a/app/modules/epics/dashboard/epic-row/epic-row.scss +++ b/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; diff --git a/app/modules/epics/dashboard/epics-table/epics-table.jade b/app/modules/epics/dashboard/epics-table/epics-table.jade index 6bfe6eba..2f64a270 100644 --- a/app/modules/epics/dashboard/epics-table/epics-table.jade +++ b/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" ) diff --git a/app/modules/epics/dashboard/epics-table/epics-table.scss b/app/modules/epics/dashboard/epics-table/epics-table.scss index 69b94f75..8aff604d 100644 --- a/app/modules/epics/dashboard/epics-table/epics-table.scss +++ b/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;