From 98db0de3515a3958df0e5048f48d4fb310a04d87 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Garc=C3=ADa?= Date: Wed, 14 Nov 2018 13:17:02 +0100 Subject: [PATCH] Tips --- app/locales/taiga/locale-en.json | 14 ++++ app/modules/components/tips/tip.jade | 15 +++++ .../components/tips/tips.directive.coffee | 58 ++++++++++++++++ app/modules/components/tips/tips.scss | 67 +++++++++++++++++++ app/partials/includes/modules/loader.jade | 2 +- app/svg/sprite.svg | 8 +-- 6 files changed, 159 insertions(+), 5 deletions(-) create mode 100644 app/modules/components/tips/tip.jade create mode 100644 app/modules/components/tips/tips.directive.coffee create mode 100644 app/modules/components/tips/tips.scss 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"/> - - + + - - + +