taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added Sprints transitions

stable
Xavier Julián 2014-07-03 10:26:37 +02:00
parent b186886848
commit be7e4c11dc
3 changed files with 67 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/coffee/modules/backlog/main.coffee
View File

@ -375,6 +375,7 @@ BacklogSprintDirective = ($repo) ->
sprint = $scope.$eval($attrs.tgBacklogSprint)
if $scope.$first
$el.addClass("sprint-current")
$el.find(".sprint-table").addClass('open')
else if sprint.closed
$el.addClass("sprint-closed")
@ -387,8 +388,10 @@ BacklogSprintDirective = ($repo) ->
$el.find(".current-progress").css("width", "#{progressPercentage}%")
# Event Handlers
$el.on "click", ".sprint-name > a", (event) ->
$el.find(".sprint-table").toggle()
$el.on "click", ".sprint-name > .icon-arrow-up", (event) ->
target = $(event.currentTarget)
target.toggleClass('active')
$el.find(".sprint-table").toggleClass('open')
#########################
## Drag & Drop Link

1
app/partials/views/modules/sprints.jade
View File

@ -15,6 +15,7 @@ section.sprints
div.sprint-name
a.icon.icon-arrow-up(href="", title="compact Sprint")
span {{ sprint.name }}
a.icon.icon-edit(href="", title="Edit Sprint")
div.sprint-summary
div.sprint-date(tg-date-range="sprint.estimated_start,sprint.estimated_finish")
ul

92
app/styles/modules/sprints.scss
View File

@ -23,12 +23,42 @@
}
.sprint {
margin-bottom: 2rem;
position: relative;
&:hover {
.icon-edit {
@include transition (opacity .2s ease-in);
opacity: 1;
}
}
.icon {
display: inline-block;
}
.icon-arrow-up {
@include transform(rotate(180deg));
vertical-align: baseline;
&:hover,
&.active {
@include transform(rotate(0));
@include transition (all .2s ease-in);
}
&.active {
&:hover {
@include transition (all .2s ease-in);
@include transform(rotate(180deg));
}
}
}
.icon-edit {
@include transition (opacity .2s ease-in);
color: $gray-light;
opacity: 0;
position: absolute;
right: 0;
top: 0;
vertical-align: baseline;
&:hover {
@include transform(rotate(180deg));
@include transition (all .2s ease-in);
@include transition (color .2s ease-in);
color: $green-taiga;
}
}
.number {
@ -81,28 +111,10 @@
}
}
.sprint-table {
align-content: stretch;
align-items: center;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
@for $i from 1 through 8 {
.width-#{$i} {
flex-basis: 50px;
flex-grow: $i;
flex-shrink: 0;
}
}
@include slide(1000px, overflow-y);
.row {
align-content: stretch;
align-items: stretch;
@include table-flex();
border-bottom: 1px solid $gray-light;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
padding: .5em 0;
text-align: left;
width: 100%;
@ -116,17 +128,19 @@
}
}
.column-us {
@include table-flex-child(3, 0, 0);
@extend %small;
padding: 0 4px;
}
.column-points {
@include table-flex-child(1, 0, 0);
padding: 0 4px;
text-align: right;
}
.us-name {
@include ellipsis(250px);
display: block;
}
.column-points {
padding: 0 4px;
text-align: right;
}
}
.button-gray {
display: block;
@ -153,28 +167,42 @@
// If Sprint is open but date is old
.sprint-old-open {
.sprint-name {
.icon {
.icon-arrow-up {
@include transform(rotate(180deg));
&:hover {
&:hover,
&.active {
@include transform(rotate(0));
@include transition (all .2s ease-in);
}
&.active {
&:hover {
@include transform(rotate(180deg));
@include transition (all .2s ease-in);
}
}
}
}
.sprint-table {
display: none;
@include slide(1000px, overflow-y);
}
}
// If sprint is closed and date is old
.sprint-closed {
.sprint-name {
.icon {
.icon-arrow-up {
@include transform(rotate(180deg));
&:hover {
&:hover,
&.active {
@include transform(rotate(0));
@include transition (all .2s ease-in);
}
&.active {
&:hover {
@include transform(rotate(180deg));
@include transition (all .2s ease-in);
}
}
}
}
.number,
@ -187,7 +215,7 @@
}
}
.sprint-table {
display: none;
@include slide(1000px, overflow-y);
}
.button-gray {
background: lighten($grayer, 40%);