diff --git a/app/coffee/modules/backlog/main.coffee b/app/coffee/modules/backlog/main.coffee index 59f305f6..0ffbca5b 100644 --- a/app/coffee/modules/backlog/main.coffee +++ b/app/coffee/modules/backlog/main.coffee @@ -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 @@ -571,7 +574,7 @@ UsPointsDirective = ($repo) -> values = _.filter(values, (num) -> num?) if values.length == 0 return "?" - + return _.reduce(values, (acc, num) -> acc + num) updatePoints(null) diff --git a/app/partials/views/modules/sprints.jade b/app/partials/views/modules/sprints.jade index d4a20601..ffed9991 100644 --- a/app/partials/views/modules/sprints.jade +++ b/app/partials/views/modules/sprints.jade @@ -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 diff --git a/app/styles/modules/sprints.scss b/app/styles/modules/sprints.scss index 83563bb7..7357107b 100644 --- a/app/styles/modules/sprints.scss +++ b/app/styles/modules/sprints.scss @@ -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%);