Customize graph

stable
Xavier Julián 2015-10-07 09:31:50 +02:00 committed by Alejandro Alonso
parent 11dc3b2421
commit 0de2d7388f
5 changed files with 62 additions and 8 deletions

View File

@ -882,6 +882,10 @@
"PAGE_TITLE": "Backlog - {{projectName}}",
"PAGE_DESCRIPTION": "The backlog panel, with user stories and sprints of the project {{projectName}}: {{projectDescription}}",
"SECTION_NAME": "Backlog",
"CUSTOMIZE_GRAPH": "Customize your backlog graph",
"CUSTOMIZE_GRAPH_TEXT": "To have a nice graph that helps you follow the evolution of the project you have to set up the points and sprints through the",
"CUSTOMIZE_GRAPH_ADMIN": "Admin",
"CUSTOMIZE_GRAPH_TITLE": "Set up the points and sprints through the Admin",
"MOVE_US_TO_CURRENT_SPRINT": "Move to Current Sprint",
"SHOW_FILTERS": "Show filters",
"SHOW_TAGS": "Show tags",

View File

@ -11,9 +11,14 @@ div.wrapper(tg-backlog, ng-controller="BacklogController as ctrl",
div.backlog-summary(tg-toggle-burndown-visibility)
include ../includes/components/summary
div(ng-if="showGraphPlaceholder") TODO PLACEHOLDER
div.empty-burndown(ng-if="showGraphPlaceholder")
div.graph-icon
include ../../svg/graph.svg
div.empty-text
p.title(translate="BACKLOG.CUSTOMIZE_GRAPH")
p {{'BACKLOG.CUSTOMIZE_GRAPH_TEXT' | translate}} #[a(href="", title="{{'BACKLOG.CUSTOMIZE_GRAPH_TITLE' | translate}}") {{'BACKLOG.CUSTOMIZE_GRAPH_ADMIN' | translate}}]
div.graphics-container.burndown-container.js-burndown-graph
div.graphics-container.js-burndown-graph
div.burndown(tg-burndown-backlog-graph)
include ../includes/modules/burndown

View File

@ -150,6 +150,44 @@ $summary-background: $grayer;
}
}
.empty-burndown {
@extend %light;
align-content: center;
align-items: center;
background: rgba($primary-dark, .15);
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 1rem;
padding: 2rem 6rem;
svg {
flex-basis: 5rem;
flex-shrink: 0;
margin-right: 1rem;
width: 5rem;
}
p {
margin: 0;
}
.empty-text {
flex: 1;
}
.title {
@extend %light;
@extend %large;
color: $primary-dark;
margin: 0;
text-transform: uppercase;
}
path {
fill: $primary-dark;
}
a {
@extend %bold;
animation: blink 2s infinite;
}
}
.graphics-container {
@include slide(300px, hidden, 0);
}

View File

@ -58,3 +58,12 @@
transform: translateY(0);
}
}
@keyframes blink {
85% {
opacity: 1;
}
100% {
opacity: .6;
}
}

View File

@ -1,8 +1,6 @@
<?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"/>
<svg viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<g transform="rotate(-90 510.712 712.45) scale(89.12866)">
<path d="M3 3h8v2H3zm0 4h10v2H3zm0 4h4v2H3z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 943 B

After

Width:  |  Height:  |  Size: 254 B