diff --git a/app/locales/locale-en.json b/app/locales/locale-en.json index b6239fb9..088340a5 100644 --- a/app/locales/locale-en.json +++ b/app/locales/locale-en.json @@ -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", diff --git a/app/partials/backlog/backlog.jade b/app/partials/backlog/backlog.jade index 11ebca9b..9b2122a8 100644 --- a/app/partials/backlog/backlog.jade +++ b/app/partials/backlog/backlog.jade @@ -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 diff --git a/app/styles/components/summary.scss b/app/styles/components/summary.scss index 2d435a17..dcbdb50e 100644 --- a/app/styles/components/summary.scss +++ b/app/styles/components/summary.scss @@ -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); } diff --git a/app/styles/core/animation.scss b/app/styles/core/animation.scss index 1a2fc285..50bc216c 100644 --- a/app/styles/core/animation.scss +++ b/app/styles/core/animation.scss @@ -58,3 +58,12 @@ transform: translateY(0); } } + +@keyframes blink { + 85% { + opacity: 1; + } + 100% { + opacity: .6; + } +} diff --git a/app/svg/graph.svg b/app/svg/graph.svg index 4563bf70..b4a28d94 100644 --- a/app/svg/graph.svg +++ b/app/svg/graph.svg @@ -1,8 +1,6 @@ - - - - - - + + + +