Merge pull request #47 from taigaio/redesign-for-taskboard-and-backlog-summaries
Redesign for taskboard and backlog summariesstable
David Barragán Merino
commit
be6b2c4ee0
|
|
@ -91,6 +91,8 @@ class BacklogController extends mixOf(taiga.Controller, taiga.PageMixin, taiga.F
|
|||
@scope.$on("sprintform:remove:success", @.loadUserstories)
|
||||
@scope.$on("usform:new:success", @.loadUserstories)
|
||||
@scope.$on("usform:edit:success", @.loadUserstories)
|
||||
@scope.$on("usform:new:success", @.loadProjectStats)
|
||||
@scope.$on("usform:bulk:success", @.loadProjectStats)
|
||||
@scope.$on("sprint:us:move", @.moveUs)
|
||||
@scope.$on("sprint:us:moved", @.loadSprints)
|
||||
@scope.$on("sprint:us:moved", @.loadProjectStats)
|
||||
|
|
@ -968,3 +970,52 @@ tgBacklogGraphDirective = ->
|
|||
|
||||
|
||||
module.directive("tgGmBacklogGraph", tgBacklogGraphDirective)
|
||||
|
||||
|
||||
#############################################################################
|
||||
## Backlog progress bar directive
|
||||
#############################################################################
|
||||
|
||||
TgBacklogProgressBarDirective = ->
|
||||
template = _.template("""
|
||||
<div class="defined-points" title="Excess of points"></div>
|
||||
<div class="project-points-progress" title="Pending Points" style="width: <%- projectPointsPercentaje %>%"></div>
|
||||
<div class="closed-points-progress" title="Closed points" style="width: <%- closedPointsPercentaje %>%"></div>
|
||||
""")
|
||||
|
||||
render = (el, projectPointsPercentaje, closedPointsPercentaje) ->
|
||||
el.html(template({
|
||||
projectPointsPercentaje: projectPointsPercentaje,
|
||||
closedPointsPercentaje:closedPointsPercentaje
|
||||
}))
|
||||
|
||||
adjustPercentaje = (percentage) ->
|
||||
adjusted = _.max([0 , percentage])
|
||||
adjusted = _.min([100, adjusted])
|
||||
return Math.round(adjusted)
|
||||
|
||||
link = ($scope, $el, $attrs) ->
|
||||
element = angular.element($el)
|
||||
|
||||
$scope.$watch $attrs.tgBacklogProgressBar, (stats) ->
|
||||
if stats?
|
||||
totalPoints = stats.total_points
|
||||
definedPoints = stats.defined_points
|
||||
closedPoints = stats.closed_points
|
||||
if definedPoints > totalPoints
|
||||
projectPointsPercentaje = totalPoints * 100 / definedPoints
|
||||
closedPointsPercentaje = closedPoints * 100 / definedPoints
|
||||
else
|
||||
projectPointsPercentaje = 100
|
||||
closedPointsPercentaje = closedPoints * 100 / totalPoints
|
||||
|
||||
projectPointsPercentaje = adjustPercentaje(projectPointsPercentaje - 3)
|
||||
closedPointsPercentaje = adjustPercentaje(closedPointsPercentaje - 3)
|
||||
render($el, projectPointsPercentaje, closedPointsPercentaje)
|
||||
|
||||
$scope.$on "$destroy", ->
|
||||
$el.off()
|
||||
|
||||
return {link: link}
|
||||
|
||||
module.directive("tgBacklogProgressBar", TgBacklogProgressBarDirective)
|
||||
|
|
|
|||
|
|
@ -117,6 +117,8 @@ class TaskboardController extends mixOf(taiga.Controller, taiga.PageMixin)
|
|||
@scope.stats.completedPercentage = Math.round(100 * stats.completedPointsSum / stats.totalPointsSum)
|
||||
else
|
||||
@scope.stats.completedPercentage = 0
|
||||
|
||||
@scope.stats.openTasks = stats.total_tasks - stats.completed_tasks
|
||||
return stats
|
||||
|
||||
refreshTagsColors: ->
|
||||
|
|
@ -211,7 +213,8 @@ TaskboardDirective = ($rootscope) ->
|
|||
$el.on "click", ".toggle-analytics-visibility", (event) ->
|
||||
event.preventDefault()
|
||||
target = angular.element(event.currentTarget)
|
||||
toggleText(target, ["Hide statistics", "Show statistics"]) # TODO: i18n
|
||||
target.toggleClass('active');
|
||||
#toggleText(target, ["Hide statistics", "Show statistics"]) # TODO: i18n
|
||||
$rootscope.$broadcast("taskboard:graph:toggle-visibility")
|
||||
|
||||
tableBodyDom = $el.find(".taskboard-table-body")
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -37,12 +37,12 @@
|
|||
<glyph unicode="B" d="M453 425c-1 9-8 16-17 16l-360 0 0 0c-9 0-16-7-17-16l0 0 0-288 0 0c2-8 9-14 17-14l0 0 59 0 0-35c0-9 8-17 17-17 6 0 11 3 14 8l45 44 225 0c8 0 15 6 17 14l0 0 0 288z"/>
|
||||
<glyph unicode="C" d="M411 448l0 0 0 21c0 4-4 8-9 8l-168 0-133-132 0-302c0-4 4-8 9-8l292 0c5 0 9 4 9 8l0 13 0 0z m-259-362l0 241 91 0c5 0 9 4 9 9l0 90 108 0 0-340z"/>
|
||||
<glyph unicode="D" d="M155 59c-14 0-32 5-50 23-24 24-27 47-25 62 2 17 11 34 27 50l150 151c43 42 71 26 83 13 16-15 26-42-14-82l-138-139-27 27 138 139c22 21 17 26 14 28-1 2-7 8-29-13l-150-151c-7-7-15-17-16-28-1-9 4-19 14-30 13-13 23-12 26-11 9 1 19 7 30 18 13 12 167 166 178 178 15 15 24 29 28 42 5 20-1 38-20 57-19 19-51 40-98-8l-165-165c-8-7-20-7-27 0-8 8-8 20 0 27l165 165c51 51 106 54 152 8 36-36 36-71 30-94-6-20-18-39-38-59-11-12-166-166-178-178-17-17-34-26-51-29-3 0-6-1-9-1z"/>
|
||||
<glyph unicode="F" d="M402 165c0-5-2-10-5-13-4-4-8-6-13-6l-256 0c-5 0-9 2-13 6-3 3-5 8-5 13 0 5 2 9 5 12l128 128c4 4 8 6 13 6 5 0 9-2 13-6l128-128c3-3 5-7 5-12z"/>
|
||||
<glyph unicode="G" d="M402 311c0-5-2-9-5-13l-128-128c-4-4-8-5-13-5-5 0-9 1-13 5l-128 128c-3 4-5 8-5 13 0 5 2 9 5 13 4 3 8 5 13 5l256 0c5 0 9-2 13-5 3-4 5-8 5-13z"/>
|
||||
<glyph unicode="H" d="M128 384l64 0 0-64-64 0z m0-96l64 0 0-64-64 0z m0-96l64 0 0-64-64 0z m128 0l128 0 0-64-128 0z m224 320l-448 0c-18 0-32-14-32-32l0-448c0-18 14-32 32-32l448 0c18 0 32 14 32 32l0 448c0 18-14 32-32 32z m-32-448l-384 0 0 384 384 0z m-192 224l128 0 0-64-128 0z m0 96l128 0 0-64-128 0z"/>
|
||||
<glyph unicode="I" d="M184 20c0 0 0 54 0 54 0 0 144 0 144 0 0 0 0-54 0-54-24-14-48-21-73-20-23-1-47 6-71 20m141 84c0 0-138 0-138 0 0 25-6 49-19 72-12 23-25 43-40 58-14 15-26 34-37 57-11 23-16 47-14 71 3 41 19 77 48 106 30 29 73 44 130 44 58 0 102-15 131-44 29-29 45-65 49-106 1-20-2-39-9-57-6-18-15-35-26-50-11-14-22-29-33-43-12-14-21-31-30-49-8-19-12-38-12-59m-193 254c-2-1-2-4 0-10 1-5 1-9 1-10-1-1 0-5 2-10 3-5 4-8 3-9 0-1 1-4 4-9 3-5 5-9 6-10 1-1 3-5 7-10 3-5 6-8 7-9 1-2 3-5 7-11 5-6 7-10 9-12 30-42 49-78 57-108 0 0 42 0 42 0 8 32 27 68 57 108 2 2 6 8 13 18 7 10 12 16 13 18 1 3 4 8 9 15 4 8 7 13 8 17 1 4 2 9 3 14 1 6 1 12 0 18-5 67-47 101-125 101-77 0-118-34-123-101"/>
|
||||
<glyph unicode="E" d="M480 224l-64 0c-18 0-32 14-32 32 0 18 14 32 32 32l64 0c18 0 32-14 32-32 0-18-14-32-32-32z m-88 122c-13-12-33-12-45 0-13 13-13 33 0 46l45 45c12 12 33 12 45 0 13-13 13-33 0-45z m-136-346c-18 0-32 14-32 32l0 64c0 18 14 32 32 32 18 0 32-14 32-32l0-64c0-18-14-32-32-32z m0 384c-18 0-32 14-32 32l0 64c0 18 14 32 32 32 18 0 32-14 32-32l0-64c0-18-14-32-32-32z m-136-309c-12-13-32-13-45 0-12 12-12 33 0 45l45 45c13 13 33 13 46 0 12-12 12-32 0-45z m0 271l-45 46c-12 12-12 32 0 45 13 12 33 12 45 0l46-45c12-13 12-33 0-46-13-12-33-12-46 0z m8-90c0-18-14-32-32-32l-64 0c-18 0-32 14-32 32 0 18 14 32 32 32l64 0c18 0 32-14 32-32z m264-91l45-45c13-12 13-33 0-45-12-13-33-13-45 0l-45 45c-13 13-13 33 0 45 12 13 32 13 45 0z"/>
|
||||
<glyph unicode="E" d="M402 165c0-5-2-10-5-13-4-4-8-6-13-6l-256 0c-5 0-9 2-13 6-3 3-5 8-5 13 0 5 2 9 5 12l128 128c4 4 8 6 13 6 5 0 9-2 13-6l128-128c3-3 5-7 5-12z"/>
|
||||
<glyph unicode="F" d="M402 311c0-5-2-9-5-13l-128-128c-4-4-8-5-13-5-5 0-9 1-13 5l-128 128c-3 4-5 8-5 13 0 5 2 9 5 13 4 3 8 5 13 5l256 0c5 0 9-2 13-5 3-4 5-8 5-13z"/>
|
||||
<glyph unicode="G" d="M128 384l64 0 0-64-64 0z m0-96l64 0 0-64-64 0z m0-96l64 0 0-64-64 0z m128 0l128 0 0-64-128 0z m224 320l-448 0c-18 0-32-14-32-32l0-448c0-18 14-32 32-32l448 0c18 0 32 14 32 32l0 448c0 18-14 32-32 32z m-32-448l-384 0 0 384 384 0z m-192 224l128 0 0-64-128 0z m0 96l128 0 0-64-128 0z"/>
|
||||
<glyph unicode="H" d="M184 20c0 0 0 54 0 54 0 0 144 0 144 0 0 0 0-54 0-54-24-14-48-21-73-20-23-1-47 6-71 20m141 84c0 0-138 0-138 0 0 25-6 49-19 72-12 23-25 43-40 58-14 15-26 34-37 57-11 23-16 47-14 71 3 41 19 77 48 106 30 29 73 44 130 44 58 0 102-15 131-44 29-29 45-65 49-106 1-20-2-39-9-57-6-18-15-35-26-50-11-14-22-29-33-43-12-14-21-31-30-49-8-19-12-38-12-59m-193 254c-2-1-2-4 0-10 1-5 1-9 1-10-1-1 0-5 2-10 3-5 4-8 3-9 0-1 1-4 4-9 3-5 5-9 6-10 1-1 3-5 7-10 3-5 6-8 7-9 1-2 3-5 7-11 5-6 7-10 9-12 30-42 49-78 57-108 0 0 42 0 42 0 8 32 27 68 57 108 2 2 6 8 13 18 7 10 12 16 13 18 1 3 4 8 9 15 4 8 7 13 8 17 1 4 2 9 3 14 1 6 1 12 0 18-5 67-47 101-125 101-77 0-118-34-123-101"/>
|
||||
<glyph unicode="I" d="M480 224l-64 0c-18 0-32 14-32 32 0 18 14 32 32 32l64 0c18 0 32-14 32-32 0-18-14-32-32-32z m-88 122c-13-12-33-12-45 0-13 13-13 33 0 46l45 45c12 12 33 12 45 0 13-13 13-33 0-45z m-136-346c-18 0-32 14-32 32l0 64c0 18 14 32 32 32 18 0 32-14 32-32l0-64c0-18-14-32-32-32z m0 384c-18 0-32 14-32 32l0 64c0 18 14 32 32 32 18 0 32-14 32-32l0-64c0-18-14-32-32-32z m-136-309c-12-13-32-13-45 0-12 12-12 33 0 45l45 45c13 13 33 13 46 0 12-12 12-32 0-45z m0 271l-45 46c-12 12-12 32 0 45 13 12 33 12 45 0l46-45c12-13 12-33 0-46-13-12-33-12-46 0z m8-90c0-18-14-32-32-32l-64 0c-18 0-32 14-32 32 0 18 14 32 32 32l64 0c18 0 32-14 32-32z m264-91l45-45c13-12 13-33 0-45-12-13-33-13-45 0l-45 45c-13 13-13 33 0 45 12 13 32 13 45 0z"/>
|
||||
<glyph unicode="J" d="M184 54l24 145c1 3 0 5-2 7 0 0 0 0 0 0-2 2-5 3-7 3l-145-25c-3 0-5-2-6-5-1-3 0-7 2-9l28-28-76-76c-3-3-3-8 0-11l53-53c3-3 8-3 11 0l76 76 28-28c3-2 6-3 9-2 3 1 5 3 5 6z m144 404l-24-145c-1-3 0-5 2-7 0 0 0 0 0 0 2-2 5-3 7-3l145 25c3 0 5 2 6 5 1 3 0 7-2 9l-28 28 76 76c3 3 3 8 0 11l-53 53c-3 3-8 3-11 0l-76-76-28 28c-3 2-6 3-9 2-3-1-5-3-5-6z m130-274l-145 24c-3 1-5 0-7-2 0 0 0 0 0 0-2-2-3-5-3-7l25-145c0-3 2-5 5-6 3-1 7 0 9 2l28 28 76-76c3-3 8-3 11 0l53 53c3 3 3 8 0 11l-76 76 28 28c2 3 3 6 2 9-1 3-3 5-6 5z m-404 144l145-24c3-1 5 0 7 2 0 0 0 0 0 0 2 2 3 5 3 7l-25 145c0 3-2 5-5 6-3 1-6 0-9-2l-28-28-76 76c-3 3-8 3-11 0l-53-53c-3-3-3-8 0-11l76-76-28-28c-2-3-3-6-2-9 1-3 3-5 6-5z"/>
|
||||
<glyph unicode="K" d="M24 154l-24-144c0-3 1-6 2-8 0 0 0 0 0 0 2-1 5-2 8-2l144 25c3 0 6 2 6 5 1 3 1 6-2 8l-28 29 76 75c3 4 3 9 0 12l-52 52c-3 4-9 4-12 0l-76-75-28 28c-2 2-5 3-8 2-3-1-5-4-6-7z m464 204l24 144c0 3-1 6-2 8 0 0 0 0 0 0-2 1-5 2-8 2l-144-25c-3 0-6-2-6-5-1-3-1-6 2-8l28-29-76-75c-3-4-3-9 0-12l52-52c3-4 9-4 12 0l76 75 28-28c2-2 5-3 8-2 3 1 5 4 6 7z m-130-334l144-24c3 0 6 1 8 2 0 0 0 0 0 0 1 2 2 5 2 8l-25 144c0 3-2 6-5 6-3 1-6 1-8-2l-29-28-75 76c-4 3-9 3-12 0l-52-52c-4-3-4-9 0-12l75-76-28-28c-2-2-3-5-2-8 1-3 4-5 7-6z m-204 464l-144 24c-3 0-6-1-8-2 0 0 0 0 0 0-1-2-2-5-2-8l25-144c0-3 2-6 5-6 3-1 6-1 8 2l29 28 75-76c4-3 9-3 12 0l52 52c4 3 4 9 0 12l-75 76 28 28c2 2 3 5 2 8-1 3-4 5-7 6z"/>
|
||||
<glyph unicode="L" d="M442 333c19-47 31-91 34-132 3-41-4-65-20-72-10-4-20-4-31 2-12 5-23 12-34 20-11 9-27 16-50 21-23 5-49 7-77 4-9-1-16-4-21-10-5-5-6-11-3-19 7-19 15-37 23-55 2-3 6-7 13-11 7-4 11-8 12-10 5-12 1-20-11-24-17-7-35-14-53-20-10-4-19 3-27 21-11 26-21 49-30 68-2 4-8 7-17 8-10 2-18 7-24 16-10-3-17-6-19-7-12-4-25-2-38 6-14 8-23 19-28 31-5 11-6 24-2 40 3 16 11 27 22 32 43 17 79 36 109 55 29 19 51 37 63 53 13 16 23 31 30 47 8 15 12 28 13 40 1 11 4 21 8 30 4 9 10 15 18 18 17 7 39-5 67-35 28-31 52-70 73-117m-15-154c3 2 5 8 5 20 1 11-1 28-5 50-5 22-12 44-21 65-10 23-21 44-35 63-13 20-24 34-34 43-9 10-16 13-18 12-3-1-5-8-5-21-1-13 1-31 5-54 4-23 11-46 20-68 10-23 21-43 35-61 14-18 25-31 35-39 9-8 16-11 18-10"/>
|
||||
<glyph unicode="L" d="M435 486c8 0 14-2 19-7 4-5 7-11 7-18 0 0 0-435 0-435 0 0-103 0-103 0 0 0 0 435 0 435 0 17 7 25 21 25 0 0 56 0 56 0m-153-153c7 0 13-3 18-8 5-5 7-11 7-18 0 0 0-281 0-281 0 0-102 0-102 0 0 0 0 281 0 281 0 17 7 26 20 26 0 0 57 0 57 0m-154-154c8 0 14-2 18-7 5-6 8-12 8-18 0 0 0-128 0-128 0 0-103 0-103 0 0 0 0 128 0 128 0 17 7 25 21 25 0 0 56 0 56 0"/>
|
||||
</font></defs></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
Binary file not shown.
Binary file not shown.
|
|
@ -35,4 +35,4 @@ div.summary.large-summary
|
|||
span.icon.icon-iocaine
|
||||
span.number 10
|
||||
span.description iocanie<br />doses
|
||||
a.button.button-green.toggle-analytics-visibility(href="", title="Show statistics") Show statistics
|
||||
a.icon.icon-stats.toggle-analytics-visibility(href="", title="Show statistics")
|
||||
|
|
|
|||
|
|
@ -11,17 +11,11 @@ div.summary.large-summary
|
|||
li
|
||||
span.number(ng-bind="stats.completedPointsSum|default:'--'")
|
||||
span.description completed<br />points
|
||||
li
|
||||
span.number(ng-bind="stats.remainingPointsSum|default:'--'")
|
||||
span.description remaining<br />points
|
||||
|
||||
ul
|
||||
li
|
||||
span.icon.icon-bulk
|
||||
span.number(ng-bind="stats.total_tasks|default:'--'")
|
||||
span.description created<br />tasks
|
||||
li
|
||||
span.number(ng-bind="stats.remainingTasks|default:'--'")
|
||||
span.number(ng-bind="stats.openTasks|default:'--'")
|
||||
span.description open<br />tasks
|
||||
li
|
||||
span.number(ng-bind="stats.completed_tasks|default:'--'")
|
||||
|
|
@ -33,4 +27,4 @@ div.summary.large-summary
|
|||
span.number(ng-bind="stats.iocaine_doses|default:'--'")
|
||||
span.description iocaine<br />doses
|
||||
|
||||
a.button.button-green.toggle-analytics-visibility(href="", title="Show statistics") Show statistics
|
||||
a.icon.icon-stats.toggle-analytics-visibility(href="", title="Show statistics")
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
div.summary
|
||||
div.summary-progress-bar(tg-progress-bar="stats.completedPercentage")
|
||||
div.current-progress(style="width: {{stats.completedPercentage}}")
|
||||
div.summary-progress-bar(tg-backlog-progress-bar="stats")
|
||||
|
||||
div.data
|
||||
span.number(tg-bind-html="stats.completedPercentage + '%'")
|
||||
ul
|
||||
|
|
@ -10,9 +10,9 @@ div.summary
|
|||
li
|
||||
span.number(tg-bind-html="stats.defined_points") --
|
||||
span.description defined<br />points
|
||||
li
|
||||
span.number(tg-bind-html="stats.assigned_points") --
|
||||
span.description assigned<br />points
|
||||
li
|
||||
span.number(tg-bind-html="stats.closed_points") --
|
||||
span.description closed<br />points
|
||||
li
|
||||
span.number(tg-bind-html="stats.speed | number:0") --
|
||||
span.description points /<br />sprint
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
.data {
|
||||
float: left;
|
||||
margin-right: 1.5em;
|
||||
margin-right: 1em;
|
||||
margin-top: 4px;
|
||||
.number {
|
||||
color: $fresh-taiga;
|
||||
|
|
@ -53,11 +53,26 @@
|
|||
margin-right: 10px;
|
||||
padding: 3px;
|
||||
position: relative;
|
||||
width: 20%;
|
||||
width: 15%;
|
||||
.current-progress {
|
||||
background: $fresh-taiga;
|
||||
height: 24px;
|
||||
width: calc(30% - 4px);
|
||||
}
|
||||
.defined-points {
|
||||
background: $red-light;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
width: calc(100% - 6px);
|
||||
}
|
||||
.project-points-progress {
|
||||
background: $white;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
}
|
||||
.closed-points-progress {
|
||||
background: $fresh-taiga;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -67,7 +82,7 @@
|
|||
border-right: 1px solid $whitish;
|
||||
margin-right: 1rem;
|
||||
vertical-align: top;
|
||||
&:last-child {
|
||||
&:last-of-type {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -75,8 +90,22 @@
|
|||
.icon {
|
||||
@extend %xlarge;
|
||||
margin-right: .4rem;
|
||||
}
|
||||
.button {
|
||||
color: $white;
|
||||
&.icon-stats {
|
||||
@include transition(color .3s linear);
|
||||
color: $gray;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
&:hover {
|
||||
@include transition(color .3s linear);
|
||||
color: $fresh-taiga;
|
||||
}
|
||||
&.active {
|
||||
color: $fresh-taiga;
|
||||
&:hover {
|
||||
@include transition(color .3s linear);
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -232,19 +232,19 @@ a:visited {
|
|||
content: 'D';
|
||||
}
|
||||
.icon-caret-up:before {
|
||||
content: 'F';
|
||||
content: 'E';
|
||||
}
|
||||
.icon-caret-down:before {
|
||||
content: 'G';
|
||||
content: 'F';
|
||||
}
|
||||
.icon-bulk:before {
|
||||
content: 'H';
|
||||
content: 'G';
|
||||
}
|
||||
.icon-idea:before {
|
||||
content: 'I';
|
||||
content: 'H';
|
||||
}
|
||||
.icon-spinner:before {
|
||||
content: 'E';
|
||||
content: 'I';
|
||||
}
|
||||
.icon-minimize:before {
|
||||
content: 'J';
|
||||
|
|
@ -252,6 +252,7 @@ a:visited {
|
|||
.icon-maximize:before {
|
||||
content: 'K';
|
||||
}
|
||||
.icon-megaphone:before {
|
||||
.icon-stats:before {
|
||||
content: 'L';
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue