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

Merge pull request #562 from taigaio/us/1934/minimize_backlog_chart 

Make burndown chart collapsible at the backlog panel
stable
David Barragán Merino 2015-07-07 16:59:16 +02:00
parent acbc43ba3d 66f4686847
commit 0376fecf02
8 changed files with 111 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -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.

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

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

3
app/locales/locale-en.json
View File

@ -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",

14
app/partials/backlog/backlog.jade
View File

@ -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="",

5
app/partials/includes/components/sprint-summary.jade
View File

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

4
app/partials/includes/components/summary.jade
View File

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

56
app/styles/components/summary.scss
View File

@ -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);
}

8
app/svg/graph.svg Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 287.81297 236.94013">
<g transform="translate(-2.9e2 -5.7e2)">
<path class="graph" d="m4.7e2 5.7e2c-4.4 0-7.9 3.3-7.9 7.3v2e2c0 4.1 3.5 7.3 7.9 7.3h45c4.4 0 7.9-3.3 7.9-7.3v-2e2c0-4.1-3.5-7.3-7.9-7.3h-45zm-72 70c-4.4 0-7.9 3.3-7.9 7.3v1.3e2c0 4.1 3.5 7.3 7.9 7.3h45c4.4 0 7.9-3.3 7.9-7.3v-1.3e2c0-4.1-3.5-7.3-7.9-7.3h-45zm-72 62c-4.4 0-7.9 3.3-7.9 7.3v67c0 4.1 3.5 7.3 7.9 7.3h45c4.4 0 7.9-3.3 7.9-7.3v-67c0-4.1-3.5-7.3-7.9-7.3h-45z" />
<rect class="white-line" transform="rotate(-30)" rx="0" ry="0" height="28" width="3.1e2" y="8e2" x="-1.3e2"/>
<rect class="color-line" ry="0" rx="0" transform="rotate(-30)" height="28" width="3.1e2" y="8.3e2" x="-1.3e2"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 943 B