diff --git a/app/locales/taiga/locale-en.json b/app/locales/taiga/locale-en.json
index 986b4d68..0265e909 100644
--- a/app/locales/taiga/locale-en.json
+++ b/app/locales/taiga/locale-en.json
@@ -1817,5 +1817,19 @@
"ACTION_TITLE": "Search",
"RESULTS": "Search results"
}
+ },
+ "TIPS": {
+ "TIPS_TITLE": "Tip",
+ "TIP_PROJECTS_ORDER": "We suggest you place the projects you access the most closer to the top of the list.",
+ "TIP_VOTING": "One easy way to express interest in one item (user story, task or issue) is upvoting it.",
+ "TIP_ISSUES_TO_SPRINT": "You can attach issues to a particular sprint by using the pin icon in its detail view. ",
+ "TIP_DUE_DATE": "Some tasks need to be finished by a certain date, regardless of other considerations. You can activate the Due Date from its detail view.",
+ "TIP_IOCAIN": "If you feel a task is going to be (or is already) particularly tough for you, make it visible to others by activating the Iocaine status.",
+ "TIP_BLOCKED": "It is better to be explicit about a blocked task, feel free to mark it as blocked and add why.",
+ "TIP_PROMOTE": "Has an issue grown beyond its natural limits? Don't be shy and turn it into a user story from its detail view.",
+ "TIP_BULK": "Adding multiple tasks in one go is much easier with our \"bulk add\" option.",
+ "TIP_ZOOM": "Experiment with your sweet-spot KANBAN zoom level to get as much info of the cards as you want.",
+ "TIP_CUSTOM_FIELDS": "If you're an admin of the project, consider creating custom fields to expand the tasks' configuration.",
+ "TIP_SLIDE_ARROWS": "You can cycle over the results of a list, search or filter by clicking on the navigational arrows on the detail view of any one item."
}
}
diff --git a/app/modules/components/tips/tip.jade b/app/modules/components/tips/tip.jade
new file mode 100644
index 00000000..041c6283
--- /dev/null
+++ b/app/modules/components/tips/tip.jade
@@ -0,0 +1,15 @@
+div.tip(ng-class="tipColor")
+ p.title(translate="TIPS.TIPS_TITLE")
+
+ p(translate="{{ message }}")
+
+ div(ng-switch="contentType", translate-cloak="{{ message }}")
+ p(ng-switch-when="icon")
+ tg-svg(svg-icon="{{ icon }}")
+ span(ng-if="icon == 'icon-upvote'") 5
+
+ tg-board-zoom(ng-switch-when="range")
+
+ p.arrows(ng-switch-when="arrows")
+ tg-svg(svg-icon="icon-arrow-left")
+ tg-svg(svg-icon="icon-arrow-right")
diff --git a/app/modules/components/tips/tips.directive.coffee b/app/modules/components/tips/tips.directive.coffee
new file mode 100644
index 00000000..30d8da36
--- /dev/null
+++ b/app/modules/components/tips/tips.directive.coffee
@@ -0,0 +1,58 @@
+###
+# Copyright (C) 2014-2018 Taiga Agile LLC
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as
+# published by the Free Software Foundation, either version 3 of the
+# License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program. If not, see .
+#
+# File: components/tips/tips.directive.coffee
+###
+
+module = angular.module("taigaComponents")
+
+tipsDirective = (tgLoader, $translate) ->
+ tips = [
+ { contentType: "icon", icon: "icon-project", message: "PROJECTS_ORDER"}
+ { contentType: "icon", icon: "icon-upvote", message: "VOTING"}
+ { contentType: "icon", icon: "icon-attach", message: "ISSUES_TO_SPRINT"}
+ { contentType: "icon", icon: "icon-clock", message: "DUE_DATE"}
+ { contentType: "icon", icon: "icon-iocaine", message: "IOCAIN"}
+ { contentType: "icon", icon: "icon-blocked-project", message: "BLOCKED"}
+ { contentType: "icon", icon: "icon-promote", message: "PROMOTE"}
+ { contentType: "icon", icon: "icon-bulk", message: "BULK"}
+ { contentType: "range", message: "ZOOM"}
+ { message: "CUSTOM_FIELDS"}
+ { contentType: "arrows", message: "SLIDE_ARROWS"}
+ ]
+
+ randomInt = (size) ->
+ return Math.floor(Math.random() * size) + 1
+
+ link = (scope, el, attrs) ->
+ tgLoader.onStart () ->
+ loadTip()
+
+ loadTip = () ->
+ tip = tips[randomInt(tips.length - 1)]
+ scope.contentType = tip.contentType
+ scope.message = "TIPS.TIP_#{tip.message}"
+ scope.icon = tip.icon
+
+ scope.tipColor = "tip-color-#{randomInt(5)}"
+
+ return {
+ link: link,
+ scope: true,
+ templateUrl: "components/tips/tip.html",
+ }
+
+module.directive('tgTips', ['tgLoader', '$translate', tipsDirective])
\ No newline at end of file
diff --git a/app/modules/components/tips/tips.scss b/app/modules/components/tips/tips.scss
new file mode 100644
index 00000000..2bdb7f41
--- /dev/null
+++ b/app/modules/components/tips/tips.scss
@@ -0,0 +1,67 @@
+//Tips colors
+$tip-color-1: #ae4fb0;
+$tip-color-2: #4e88df;
+$tip-color-3: #6360d6;
+$tip-color-4: #47b3a6;
+$tip-color-5: #d76969;
+
+$tips-colors: $tip-color-1 $tip-color-2 $tip-color-3 $tip-color-4 $tip-color-5;
+
+@each $current-color in $tips-colors {
+ $i: index($tips-colors, $current-color);
+ .loader .tip-color-#{$i} {
+ p {
+ color: $current-color;
+ }
+ svg {
+ fill: $current-color;
+ stroke: $current-color;
+ }
+ }
+}
+
+.tip {
+ text-align: center;
+ width: auto;
+ .translate-cloak {
+ display: none;
+ }
+ p {
+ display: flex;
+ font-size: 1.1em;
+ justify-content: center;
+ margin-bottom: 1em;
+ max-width: 440px;
+ &.title {
+ color: $black;
+ font-size: 1em;
+ margin-bottom: 1.75em;
+ }
+ &.range {
+ width: 1px;
+ }
+ }
+ svg {
+ height: 32px;
+ margin: 0 .3em;
+ width: 32px;
+ &.icon-upvote {
+ height: 30px;
+ width: 24px;
+ }
+ }
+ .range-slider {
+ display: initial;
+ width: 100px;
+ }
+ .arrows svg {
+ height: 40px;
+ margin: 0;
+ &.icon-arrow-left {
+ margin-left: 7px;
+ }
+ &.icon-arrow-right {
+ margin-left: -7px;
+ }
+ }
+}
diff --git a/app/partials/includes/modules/loader.jade b/app/partials/includes/modules/loader.jade
index f818d738..0b7c32ef 100644
--- a/app/partials/includes/modules/loader.jade
+++ b/app/partials/includes/modules/loader.jade
@@ -1,4 +1,4 @@
.loader(tg-loader)
include ../components/loading-bar
div.container
- p(translate="COMMON.LOADING")
+ tg-tips()
diff --git a/app/svg/sprite.svg b/app/svg/sprite.svg
index bcfe2693..24f69d04 100644
--- a/app/svg/sprite.svg
+++ b/app/svg/sprite.svg
@@ -476,14 +476,14 @@
d="M106-.3a12.5 12.5 0 0 0-12.4 12.5v91H12.3A12.5 12.5 0 0 0-.2 115.5v272.2a12.5 12.5 0 0 0 12.5 12.5H294a12.5 12.5 0 0 0 12.4-12.5v-91h81.3a12.5 12.5 0 0 0 12.5-12.4v-272A12.5 12.5 0 0 0 387.7-.4H106zm12.6 25h256.6V272h-68.8V115.5A12.5 12.5 0 0 0 294 103H118.5V24.8zM24.8 128h68.8v156.4A12.5 12.5 0 0 0 106 297h175.4v78.3H24.8V128zm93.8 0h162.8v144H118.6V128z"/>
-
-
+
+
-
-
+
+