Make burndown chart collapsible at the backlog panel

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.

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
 #############################################################################

app/locales/locale-en.json

@@ -919,7 +919,8 @@
             "OPEN_TASKS": "open<br />tasks",
             "CLOSED_TASKS": "closed<br />tasks",
             "IOCAINE_DOSES": "iocaine<br />doses",
-            "SHOW_STATISTICS_TITLE": "Show statistics"
+            "SHOW_STATISTICS_TITLE": "Show statistics",
+            "TOGGLE_BAKLOG_GRAPH": "Show/Hide burndown graph"
         },
         "SUMMARY": {
             "PROJECT_POINTS": "project<br />points",

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.backlog-summary(tg-toggle-burndown-visibility)
-            div.burndown(tg-burndown-backlog-graph)
+            include ../includes/components/summary
-                include ../includes/modules/burndown
+
+            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}}",
+                                            title="{{'BACKLOG.MOVE_US_TO_CURRENT_SPRINT' | translate}}",
-                                                      id="move-to-current-sprint")
+                                            id="move-to-current-sprint")
                     span.icon.icon-move
                     span.text(translate="BACKLOG.MOVE_US_TO_CURRENT_SPRINT")
                 a.trans-button(href="",

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")
+
+    a.icon.icon-stats.js-toggle-burndown-visibility-button(href="",
+                                      title="{{'BACKLOG.SPRINT_SUMMARY.TOGGLE_BAKLOG_GRAPH' | translate}}")
+

app/styles/components/summary.scss

@@ -17,7 +17,24 @@
         }
     }
     .icon {
-        @extend %large;
+        font-size: 1.4rem;
+        margin-right: .4rem;
+        &.icon-stats {
+            color: $gray;
+            float: right;
+            transition: color .3s linear;
+            &:hover {
+                color: $fresh-taiga;
+                transition: color .3s linear;
+            }
+            &.active {
+                color: $fresh-taiga;
+            }
+            &.active:hover {
+                color: $gray;
+                transition: color .3s linear;
+            }
+        }
     }
     .number {
         @extend %xlarge;
@@ -88,24 +105,4 @@
     .summary-stats-divider {
         margin-right: 2rem;
     }
-    .icon {
-        font-size: 1.4rem;
-        margin-right: .4rem;
-        &.icon-stats {
-            color: $gray;
-            float: right;
-            transition: color .3s linear;
-            &:hover {
-                color: $fresh-taiga;
-                transition: color .3s linear;
-            }
-            &.active {
-                color: $fresh-taiga;
-            }
-            &.active:hover {
-                color: $gray;
-                transition: color .3s linear;
-            }
-        }
-    }
 }