Belong to epic component

stable
Xavier Julián 2016-08-08 12:29:04 +02:00 committed by David Barragán Merino
parent 0816e134bf
commit 1a42030e80
5 changed files with 71 additions and 33 deletions

View File

@ -0,0 +1,33 @@
###
# Copyright (C) 2014-2016 Taiga Agile LLC <taiga@taiga.io>
#
# This program is free software: you can redistribute it and/or modify
# it under the terms of the GNU Affero General Public License as
# published by the Free Software Foundation, either version 3 of the
# License, or (at your option) any later version.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
# GNU Affero General Public License for more details.
#
# You should have received a copy of the GNU Affero General Public License
# along with this program. If not, see <http://www.gnu.org/licenses/>.
#
# File: belong-to-epics.directive.coffee
###
module = angular.module('taigaEpics')
BelongToEpicsDirective = () ->
return {
templateUrl:"components/belong-to-epics/belong-to-epics.html",
scope: {
epics: '='
}
}
BelongToEpicsDirective.$inject = []
module.directive("tgBelongToEpics", BelongToEpicsDirective)

View File

@ -0,0 +1,4 @@
- var hash = "#";
.belong-to-epic-pill-wrapper(tg-repeat="epic in epics")
.belong-to-epic-pill(ng-style="{'background': epic.get('color')}")
.belong-to-epic-pill-data #{hash}{{epic.get('id')}} {{epic.get('subject')}}

View File

@ -0,0 +1,30 @@
.belong-to-epic-pill-wrapper {
display: inline-block;
position: relative;
&:hover {
.belong-to-epic-pill-data {
display: block;
}
}
}
.belong-to-epic-pill {
background-color: $grayer;
border-radius: 50%;
display: inline-block;
height: .75rem;
margin-left: .25rem;
position: relative;
width: .75rem;
}
.belong-to-epic-pill-data {
animation: dropdownFade .2s;
background: rgba($black, .9);
bottom: 1.25rem;
color: $white;
display: none;
left: -100px;
padding: .5rem 1rem;
position: absolute;
width: 200px;
z-index: 99;
}

View File

@ -14,9 +14,10 @@
tg-nav="project-userstories-detail:project=vm.project.slug,ref=vm.story.get('ref')"
ng-attr-title="{{::vm.story.get('subject')}}"
) #{hash}{{::vm.story.get('ref')}} {{::vm.story.get('subject')}}
.story-pill-wrapper(tg-repeat="pill in vm.story.get('epics')")
.story-pill(ng-style="{'background': pill.get('color')}")
.story-pill-data #{hash}{{pill.get('id')}} {{pill.get('subject')}}
tg-belong-to-epics(
ng-if="vm.story.get('epics')"
epics="vm.story.get('epics')"
)
.project(
ng-if="vm.column.project"
tg-nav="project:project=vm.story.getIn(['project_extra_info', 'slug'])"

View File

@ -25,36 +25,6 @@
.name {
flex-basis: 17.5vw;
}
.story-pill-wrapper {
display: inline-block;
position: relative;
&:hover {
.story-pill-data {
display: block;
}
}
}
.story-pill {
background-color: $grayer;
border-radius: 50%;
display: inline-block;
height: .75rem;
margin-left: .25rem;
position: relative;
width: .75rem;
}
.story-pill-data {
animation: dropdownFade .2s;
background: rgba($black, .9);
bottom: 1.25rem;
color: $white;
display: none;
left: -100px;
padding: .5rem 1rem;
position: absolute;
width: 200px;
z-index: 99;
}
.progress-bar,
.progress-status {
height: 1.5rem;