diff --git a/app/modules/components/belong-to-epics/belong-to-epics.jade b/app/modules/components/belong-to-epics/belong-to-epics-pill.jade similarity index 67% rename from app/modules/components/belong-to-epics/belong-to-epics.jade rename to app/modules/components/belong-to-epics/belong-to-epics-pill.jade index 0bcdb61a..61670efa 100644 --- a/app/modules/components/belong-to-epics/belong-to-epics.jade +++ b/app/modules/components/belong-to-epics/belong-to-epics-pill.jade @@ -1,5 +1,5 @@ - var hash = "#"; -.belong-to-epic-pill-wrapper(tg-repeat="epic in epics") +.belong-to-epic-pill-wrapper(tg-repeat="epic in epics track by epic.get('id')") .belong-to-epic-pill( ng-style="{'background': epic.get('color')}" title="#{hash}{{epic.get('id')}} {{epic.get('subject')}}" diff --git a/app/modules/components/belong-to-epics/belong-to-epics-text.jade b/app/modules/components/belong-to-epics/belong-to-epics-text.jade new file mode 100644 index 00000000..f8b935d0 --- /dev/null +++ b/app/modules/components/belong-to-epics/belong-to-epics-text.jade @@ -0,0 +1,10 @@ +- var hash = "#"; +span.belong-to-epic-text-wrapper(tg-repeat="epic in epics track by epic.get('id')") + .belong-to-epic-pill( + ng-style="{'background': epic.get('color')}" + title="#{hash}{{epic.get('id')}} {{epic.get('subject')}}" + ) + a.belong-to-epic-text( + href="" + tg-nav="project-epics-detail:project=vm.project.get('slug')" + ) #{hash}{{epic.get('id')}} {{epic.get('subject')}} diff --git a/app/modules/components/belong-to-epics/belong-to-epics.directive.coffee b/app/modules/components/belong-to-epics/belong-to-epics.directive.coffee index ea4485ed..455adc1d 100644 --- a/app/modules/components/belong-to-epics/belong-to-epics.directive.coffee +++ b/app/modules/components/belong-to-epics/belong-to-epics.directive.coffee @@ -22,15 +22,21 @@ module = angular.module('taigaEpics') BelongToEpicsDirective = () -> link = (scope, el, attrs) -> - if !scope.epics.isIterable + if scope.epics && !scope.epics.isIterable scope.epics = Immutable.fromJS(scope.epics) + if scope.project && !scope.project.isIterable + scope.project = Immutable.fromJS(scope.project) + + scope.getTemplateUrl = () -> + return "components/belong-to-epics/belong-to-epics-" + attrs.format + ".html" + return { link: link, - templateUrl:"components/belong-to-epics/belong-to-epics.html", scope: { epics: '=' - } + }, + template : '' } BelongToEpicsDirective.$inject = [] diff --git a/app/modules/components/belong-to-epics/belong-to-epics.scss b/app/modules/components/belong-to-epics/belong-to-epics.scss index e2cbde9c..fd487f3c 100644 --- a/app/modules/components/belong-to-epics/belong-to-epics.scss +++ b/app/modules/components/belong-to-epics/belong-to-epics.scss @@ -7,6 +7,7 @@ } } } + .belong-to-epic-pill { background-color: $grayer; border-radius: 50%; @@ -15,3 +16,11 @@ position: relative; width: .7rem; } + +.belong-to-epic-text-wrapper { + margin-right: 1rem; +} + +.belong-to-epic-text { + margin-left: .25rem; +} diff --git a/app/modules/components/card/card-templates/card-title.jade b/app/modules/components/card/card-templates/card-title.jade index 76783ecf..94df8825 100644 --- a/app/modules/components/card/card-templates/card-title.jade +++ b/app/modules/components/card/card-templates/card-title.jade @@ -8,6 +8,7 @@ h2.card-title span(ng-if="vm.visible('ref')") {{::"#" + vm.item.getIn(['model', 'ref'])}} span.e2e-title(ng-if="vm.visible('subject')") {{vm.item.getIn(['model', 'subject'])}} tg-belong-to-epics( + format="pill" ng-if="vm.item.getIn(['model', 'epics'])" epics="vm.item.getIn(['model', 'epics'])" ) diff --git a/app/modules/epics/dashboard/story-row/story-row.jade b/app/modules/epics/dashboard/story-row/story-row.jade index 4010abde..d421ca0c 100644 --- a/app/modules/epics/dashboard/story-row/story-row.jade +++ b/app/modules/epics/dashboard/story-row/story-row.jade @@ -15,6 +15,7 @@ ng-attr-title="{{::vm.story.get('subject')}}" ) #{hash}{{::vm.story.get('ref')}} {{::vm.story.get('subject')}} tg-belong-to-epics( + format="pill" ng-if="vm.story.get('epics')" epics="vm.story.get('epics')" ) diff --git a/app/partials/includes/components/backlog-row.jade b/app/partials/includes/components/backlog-row.jade index a569ad99..4a3a6143 100644 --- a/app/partials/includes/components/backlog-row.jade +++ b/app/partials/includes/components/backlog-row.jade @@ -27,6 +27,7 @@ span(tg-bo-ref="us.ref") span(ng-bind="us.subject") tg-belong-to-epics( + format="pill" ng-if="us.epics" epics="us.epics" ) diff --git a/app/partials/includes/modules/sprint.jade b/app/partials/includes/modules/sprint.jade index 373ff370..f85bc3d6 100644 --- a/app/partials/includes/modules/sprint.jade +++ b/app/partials/includes/modules/sprint.jade @@ -20,6 +20,7 @@ div.sprint-table(tg-bind-scope, ng-class="{'sprint-empty-wrapper': !sprint.user_ span(tg-bo-ref="us.ref") span(tg-bo-bind="us.subject") tg-belong-to-epics( + format="pill" ng-if="us.epics" epics="us.epics" ) diff --git a/app/partials/includes/modules/taskboard-table.jade b/app/partials/includes/modules/taskboard-table.jade index 91950ac1..1b7bad37 100644 --- a/app/partials/includes/modules/taskboard-table.jade +++ b/app/partials/includes/modules/taskboard-table.jade @@ -55,6 +55,7 @@ div.taskboard-table( span.us-ref(tg-bo-ref="us.ref") span(ng-bind="us.subject") tg-belong-to-epics( + format="pill" ng-if="us.epics" epics="us.epics" ) diff --git a/app/partials/us/us-detail.jade b/app/partials/us/us-detail.jade index 8baf2bec..eb3a0b5f 100644 --- a/app/partials/us/us-detail.jade +++ b/app/partials/us/us-detail.jade @@ -29,10 +29,22 @@ div.wrapper( div.us-title(ng-class="{blocked: us.is_blocked}") h2.us-title-text span.us-number(tg-bo-ref="us.ref") - span.us-name(tg-editable-subject, ng-model="us", required-perm="modify_us") + span.us-name( + tg-editable-subject + ng-model="us" + required-perm="modify_us" + ) + + p.belong-to-epics-wrapper(ng-if="us.epics") + span This User Story belongs to + tg-belong-to-epics( + ng-if="us.epics" + epics="us.epics" + format="text" + project="project" + ) - p.us-related-task(ng-if="us.origin_issue") - | {{ 'US.PROMOTED'|translate }} + p.us-related-task(ng-if="us.origin_issue") {{ 'US.PROMOTED'|translate }} a( href="" tg-check-permission="view_us" diff --git a/app/styles/layout/ticket-detail.scss b/app/styles/layout/ticket-detail.scss index 7021eca6..5daa3f6a 100644 --- a/app/styles/layout/ticket-detail.scss +++ b/app/styles/layout/ticket-detail.scss @@ -142,6 +142,14 @@ margin-right: 5rem; } } + .belong-to-epics-wrapper { + @include font-size(small); + color: $gray-light; + margin-top: .5rem; + a:hover { + color: $primary; + } + } .loading-spinner { @include loading-spinner; max-height: 1.5rem;