diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1f1b6e58..159fcbae 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
### Features
- Ability to create single-line or multi-line custom fields. (thanks to [@artlepool](https://github.com/artlepool))
- Add custom videoconference system.
+- Make burndown chart collapsible at the backlog panel.
### Misc
- Improve performance: Show cropped images in timelines.
diff --git a/app/coffee/modules/backlog/main.coffee b/app/coffee/modules/backlog/main.coffee
index 3dac4387..86fe61b5 100644
--- a/app/coffee/modules/backlog/main.coffee
+++ b/app/coffee/modules/backlog/main.coffee
@@ -28,6 +28,7 @@ bindOnce = @.taiga.bindOnce
groupBy = @.taiga.groupBy
timeout = @.taiga.timeout
bindMethods = @.taiga.bindMethods
+generateHash = @.taiga.generateHash
module = angular.module("taigaBacklog")
@@ -644,7 +645,7 @@ BacklogDirective = ($repo, $rootscope, $translate) ->
_.map elements, (elm) ->
input = $(elm).find("input:checkbox")
- input.prop('checked', true);
+ input.prop('checked', true)
checkSelected(input)
target = angular.element(event.currentTarget)
@@ -724,7 +725,6 @@ BacklogDirective = ($repo, $rootscope, $translate) ->
$el.find(".backlog-table-body").disableSelection()
filters = $ctrl.getUrlFilters()
-
if filters.statuses ||
filters.tags ||
filters.q
@@ -903,6 +903,39 @@ UsPointsDirective = ($tgEstimationsService, $repo, $tgTemplate) ->
module.directive("tgBacklogUsPoints", ["$tgEstimationsService", "$tgRepo", "$tgTemplate", UsPointsDirective])
+#############################################################################
+## Burndown graph directive
+#############################################################################
+ToggleBurndownVisibility = ($storage) ->
+ link = ($scope, $el, $attrs) ->
+ hash = generateHash(["is-burndown-grpahs-collapsed"])
+ toggleGraph = ->
+ if $scope.isBurndownGraphCollapsed
+ $(".js-toggle-burndown-visibility-button").removeClass("active")
+ $(".js-burndown-graph").removeClass("open")
+ else
+ $(".js-toggle-burndown-visibility-button").addClass("active")
+ $(".js-burndown-graph").addClass("open")
+
+ $scope.isBurndownGraphCollapsed = $storage.get(hash) or false
+ toggleGraph()
+
+ $el.on "click", ".js-toggle-burndown-visibility-button", ->
+ $scope.isBurndownGraphCollapsed = !$scope.isBurndownGraphCollapsed
+ $storage.set(hash, $scope.isBurndownGraphCollapsed)
+ toggleGraph()
+
+ $scope.$on "$destroy", ->
+ $el.off()
+
+ return {
+ scope: {}
+ link: link
+ }
+
+module.directive("tgToggleBurndownVisibility", ["$tgStorage", ToggleBurndownVisibility])
+
+
#############################################################################
## Burndown graph directive
#############################################################################
diff --git a/app/locales/locale-en.json b/app/locales/locale-en.json
index e9a008c2..2a06e9de 100644
--- a/app/locales/locale-en.json
+++ b/app/locales/locale-en.json
@@ -919,7 +919,8 @@
"OPEN_TASKS": "open
tasks",
"CLOSED_TASKS": "closed
tasks",
"IOCAINE_DOSES": "iocaine
doses",
- "SHOW_STATISTICS_TITLE": "Show statistics"
+ "SHOW_STATISTICS_TITLE": "Show statistics",
+ "TOGGLE_BAKLOG_GRAPH": "Show/Hide burndown graph"
},
"SUMMARY": {
"PROJECT_POINTS": "project
points",
diff --git a/app/partials/backlog/backlog.jade b/app/partials/backlog/backlog.jade
index 8741c465..a4862387 100644
--- a/app/partials/backlog/backlog.jade
+++ b/app/partials/backlog/backlog.jade
@@ -7,17 +7,19 @@ div.wrapper(tg-backlog, ng-controller="BacklogController as ctrl",
include ../includes/modules/backlog-filters
section.main.backlog
include ../includes/components/mainTitle
- include ../includes/components/summary
- div.graphics-container.burndown-container
- div.burndown(tg-burndown-backlog-graph)
- include ../includes/modules/burndown
+ div.backlog-summary(tg-toggle-burndown-visibility)
+ include ../includes/components/summary
+
+ div.graphics-container.burndown-container.js-burndown-graph
+ div.burndown(tg-burndown-backlog-graph)
+ include ../includes/modules/burndown
div.backlog-menu
div.backlog-table-options
a.trans-button.move-to-current-sprint(href="",
- title="{{'BACKLOG.MOVE_US_TO_CURRENT_SPRINT' | translate}}",
- id="move-to-current-sprint")
+ title="{{'BACKLOG.MOVE_US_TO_CURRENT_SPRINT' | translate}}",
+ id="move-to-current-sprint")
span.icon.icon-move
span.text(translate="BACKLOG.MOVE_US_TO_CURRENT_SPRINT")
a.trans-button(href="",
diff --git a/app/partials/includes/components/sprint-summary.jade b/app/partials/includes/components/sprint-summary.jade
index caa16ba2..5fbe8e4e 100644
--- a/app/partials/includes/components/sprint-summary.jade
+++ b/app/partials/includes/components/sprint-summary.jade
@@ -24,5 +24,6 @@ div.summary.large-summary
span.icon.icon-iocaine
span.number(ng-bind="stats.iocaine_doses|default:'--'")
span.description(translate="BACKLOG.SPRINT_SUMMARY.IOCAINE_DOSES")
-
- a.icon.icon-stats.toggle-analytics-visibility(href="", title="{{'BACKLOG.SPRINT_SUMMARY.SHOW_STATISTICS_TITLE' | translate}}")
+
+ div.stats.toggle-analytics-visibility(title="{{'BACKLOG.SPRINT_SUMMARY.SHOW_STATISTICS_TITLE' | translate}}")
+ include ../../../svg/graph.svg
diff --git a/app/partials/includes/components/summary.jade b/app/partials/includes/components/summary.jade
index 1b29810d..0b8ac558 100644
--- a/app/partials/includes/components/summary.jade
+++ b/app/partials/includes/components/summary.jade
@@ -16,3 +16,7 @@ div.summary
div.summary-stats
span.number(ng-bind="stats.speed | number:0") --
span.description(translate="BACKLOG.SUMMARY.POINTS_PER_SPRINT")
+
+
+ div.stats.js-toggle-burndown-visibility-button(title="{{'BACKLOG.SPRINT_SUMMARY.TOGGLE_BAKLOG_GRAPH' | translate}}")
+ include ../../../svg/graph.svg
diff --git a/app/styles/components/summary.scss b/app/styles/components/summary.scss
index ded4538b..8137273b 100644
--- a/app/styles/components/summary.scss
+++ b/app/styles/components/summary.scss
@@ -1,6 +1,8 @@
+$summary-background: $grayer;
+
.summary {
align-content: center;
- background: $grayer;
+ background: $summary-background;
color: $white;
display: flex;
flex-wrap: wrap;
@@ -16,9 +18,6 @@
color: $fresh-taiga;
}
}
- .icon {
- @extend %large;
- }
.number {
@extend %xlarge;
@extend %bold;
@@ -31,6 +30,47 @@
@extend %light;
line-height: 1;
}
+ .stats {
+ cursor: pointer;
+ height: 2rem;
+ margin-left: auto;
+ width: 2rem;
+ path {
+ opacity: 1;
+ }
+ &:hover {
+ .graph,
+ .color-line {
+ fill: $fresh-taiga;
+ transition: fill .2s;
+ }
+ }
+ &.active {
+ .white-line,
+ .color-line {
+ display: none;
+ }
+ .graph {
+ fill: $green-taiga;
+ }
+ }
+ svg {
+ height: 100%;
+ width: 100%;
+ }
+ .graph,
+ .color-line {
+ fill: darken($gray-light, 20%);
+ transition: fill .2s;
+ }
+ .white-line {
+ fill: $summary-background;
+ }
+ .white-line,
+ .color-line {
+ display: block;
+ }
+ }
}
.summary-progress-bar {
@@ -92,7 +132,7 @@
font-size: 1.4rem;
margin-right: .4rem;
&.icon-stats {
- color: $gray;
+ color: $green-taiga;
float: right;
transition: color .3s linear;
&:hover {
@@ -103,9 +143,13 @@
color: $fresh-taiga;
}
&.active:hover {
- color: $gray;
+ color: $green-taiga;
transition: color .3s linear;
}
}
}
}
+
+.graphics-container {
+ @include slide(300px, hidden, 0);
+}
diff --git a/app/svg/graph.svg b/app/svg/graph.svg
new file mode 100644
index 00000000..4563bf70
--- /dev/null
+++ b/app/svg/graph.svg
@@ -0,0 +1,8 @@
+
+