Show tips only after a long wait

stable
Daniel García 2018-11-22 18:37:33 +01:00 committed by Alex Hermida
parent 45c4beefc1
commit e621d93557
3 changed files with 25 additions and 11 deletions

View File

@ -1,9 +1,9 @@
div.tip(ng-class="tip.color") div.tip(ng-if="tipLoaded", ng-class="tip.color")
p.title(translate="TIPS.TIPS_TITLE") p.title(translate="TIPS.TIPS_TITLE")
p(translate="{{ tip.message }}") p(translate="{{ tip.message }}")
div(ng-switch="tip.contentType", translate-cloak="{{ tip.message }}") div(ng-switch="tip.contentType")
p(ng-switch-when="icon") p(ng-switch-when="icon")
tg-svg(svg-icon="{{ tip.icon }}") tg-svg(svg-icon="{{ tip.icon }}")
span(ng-if="tip.icon == 'icon-upvote'") 5 span(ng-if="tip.icon == 'icon-upvote'") 5
@ -13,3 +13,6 @@ div.tip(ng-class="tip.color")
p.arrows(ng-switch-when="arrows") p.arrows(ng-switch-when="arrows")
tg-svg(svg-icon="icon-arrow-left") tg-svg(svg-icon="icon-arrow-left")
tg-svg(svg-icon="icon-arrow-right") tg-svg(svg-icon="icon-arrow-right")
div.tip(ng-if="!tipLoaded")
p(translate="COMMON.LOADING")

View File

@ -17,6 +17,8 @@
# File: components/tips/tips.directive.coffee # File: components/tips/tips.directive.coffee
### ###
timeout = @.taiga.timeout
module = angular.module("taigaComponents") module = angular.module("taigaComponents")
tipsDirective = (tgLoader, $translate) -> tipsDirective = (tgLoader, $translate) ->
@ -38,10 +40,19 @@ tipsDirective = (tgLoader, $translate) ->
return Math.floor(Math.random() * size) + 1 return Math.floor(Math.random() * size) + 1
link = (scope, el, attrs) -> link = (scope, el, attrs) ->
scope.tipLoaded = false
waitingTimeout = null
tgLoader.onStart () -> tgLoader.onStart () ->
loadTip() waitingTimeout = timeout 1000, ->
loadTip()
tgLoader.onEnd () ->
clearTimeout(waitingTimeout)
scope.tipLoaded = false
loadTip = () -> loadTip = () ->
scope.tipLoaded = true
tip = tips[randomInt(tips.length - 1)] tip = tips[randomInt(tips.length - 1)]
scope.tip = { scope.tip = {
contentType: tip.contentType contentType: tip.contentType

View File

@ -462,15 +462,15 @@
<path <path
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"/> 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"/>
</symbol> </symbol>
<symbol id="icon-attach" viewBox="0 0 21 20" fill="none"> <symbol id="icon-attach" viewBox="0 0 21 20">
<path d="M17.7672 6.98451C17.8732 7.02661 17.9509 7.11965 17.974 7.23136C17.9971 7.34341 17.9625 7.45953 17.882 7.54034L12.4693 12.9534L7.52218 17.9005C7.45801 17.9647 7.37142 18 7.28212 18C7.25938 18 7.23629 17.9976 7.21354 17.9929C7.10149 17.9698 7.00879 17.8924 6.96669 17.7861C5.87573 15.047 6.7762 12.317 7.07093 11.5599L2.75159 6.48266C2.28404 6.52069 1.0705 6.53258 0.12827 5.7849C0.0525516 5.7248 0.00603411 5.63482 0.000601404 5.53839C-0.00517085 5.44128 0.0308208 5.34689 0.0994087 5.27864L5.27881 0.0992359C5.34672 0.0309875 5.44146 -0.00194827 5.53721 8.89983e-05C5.6333 0.0055217 5.7226 0.0513602 5.78338 0.126399C5.82073 0.172577 6.65736 1.23331 6.4808 2.78435L11.5329 7.0823C12.2758 6.75871 14.856 5.82463 17.7672 6.98451Z" transform="translate(1.5 1.48999)" stroke="white" stroke-width="1.1"/> <path d="M17.7672 6.98451C17.8732 7.02661 17.9509 7.11965 17.974 7.23136C17.9971 7.34341 17.9625 7.45953 17.882 7.54034L12.4693 12.9534L7.52218 17.9005C7.45801 17.9647 7.37142 18 7.28212 18C7.25938 18 7.23629 17.9976 7.21354 17.9929C7.10149 17.9698 7.00879 17.8924 6.96669 17.7861C5.87573 15.047 6.7762 12.317 7.07093 11.5599L2.75159 6.48266C2.28404 6.52069 1.0705 6.53258 0.12827 5.7849C0.0525516 5.7248 0.00603411 5.63482 0.000601404 5.53839C-0.00517085 5.44128 0.0308208 5.34689 0.0994087 5.27864L5.27881 0.0992359C5.34672 0.0309875 5.44146 -0.00194827 5.53721 8.89983e-05C5.6333 0.0055217 5.7226 0.0513602 5.78338 0.126399C5.82073 0.172577 6.65736 1.23331 6.4808 2.78435L11.5329 7.0823C12.2758 6.75871 14.856 5.82463 17.7672 6.98451Z" transform="translate(1.5 1.48999)" stroke-width="1.1"/>
<path d="M0 0V6.63158" transform="translate(14.228 14.2179) rotate(-45)" stroke="white" stroke-width="1.1" stroke-linecap="round"/> <path d="M0 0V6.63158" transform="translate(14.228 14.2179) rotate(-45)" stroke-width="1.1" stroke-linecap="round"/>
</symbol> </symbol>
<symbol id="icon-detach" viewBox="0 0 21 20" fill="none"> <symbol id="icon-detach" viewBox="0 0 21 20">
<path d="M6.13308 11.2098L6.99441 12.2223C6.62356 13.3025 5.95632 15.9041 7.00539 18.5387L7.51687 18.3361L7.00588 18.5396C7.11672 18.8184 7.35964 19.0207 7.65115 19.0813C7.71072 19.0937 7.77151 19.1001 7.8323 19.1001C8.06643 19.1001 8.29324 19.0075 8.4612 18.8394L18.8211 8.47921C19.0327 8.26656 19.1231 7.96285 19.0628 7.67037C19.0025 7.37826 18.7993 7.13448 18.5208 7.02352C15.7425 5.91671 13.2537 6.59298 12.1853 6.9974L11.1912 6.15157L10.4109 6.93197L11.9881 8.27364L12.3025 8.13656C12.9673 7.84701 15.2266 7.02999 17.812 7.9327L7.91555 17.8294C7.08254 15.3938 7.86282 13.0052 8.13357 12.3094L8.25271 12.0035L6.91335 10.4294L6.13308 11.2098Z" transform="translate(1 0.25)" fill="white"/> <path d="M6.13308 11.2098L6.99441 12.2223C6.62356 13.3025 5.95632 15.9041 7.00539 18.5387L7.51687 18.3361L7.00588 18.5396C7.11672 18.8184 7.35964 19.0207 7.65115 19.0813C7.71072 19.0937 7.77151 19.1001 7.8323 19.1001C8.06643 19.1001 8.29324 19.0075 8.4612 18.8394L18.8211 8.47921C19.0327 8.26656 19.1231 7.96285 19.0628 7.67037C19.0025 7.37826 18.7993 7.13448 18.5208 7.02352C15.7425 5.91671 13.2537 6.59298 12.1853 6.9974L11.1912 6.15157L10.4109 6.93197L11.9881 8.27364L12.3025 8.13656C12.9673 7.84701 15.2266 7.02999 17.812 7.9327L7.91555 17.8294C7.08254 15.3938 7.86282 13.0052 8.13357 12.3094L8.25271 12.0035L6.91335 10.4294L6.13308 11.2098Z" transform="translate(1 0.25)"/>
<path d="M8.11843 4.98165L6.4512 3.56332L6.4844 3.27218C6.55984 2.61007 6.41921 2.0516 6.25393 1.65084C6.17947 1.4703 6.10085 1.3243 6.03738 1.21859L1.21389 6.04208C1.95583 6.51632 2.85769 6.51693 3.2571 6.48446L3.53787 6.46163L4.96316 8.13705L4.18288 8.91732L3.05837 7.59542C2.4258 7.60873 1.27956 7.51412 0.336449 6.76571C0.137719 6.608 0.0161365 6.37277 0.0014881 6.1202C-0.0131603 5.86666 0.0808338 5.61898 0.261498 5.43881L5.43948 0.260828C5.62722 0.072351 5.8738 -0.00455333 6.0989 0.000207414L6.10867 0.000451555L6.11843 0.000939836C6.20779 0.00606679 6.29495 0.0244994 6.37698 0.0548949C6.5259 0.110071 6.65896 0.204553 6.76101 0.33053C6.82644 0.411218 7.67312 1.48995 7.6011 3.09738L8.8987 4.20138L8.11843 4.98165Z" transform="translate(1 0.25)" fill="white"/> <path d="M8.11843 4.98165L6.4512 3.56332L6.4844 3.27218C6.55984 2.61007 6.41921 2.0516 6.25393 1.65084C6.17947 1.4703 6.10085 1.3243 6.03738 1.21859L1.21389 6.04208C1.95583 6.51632 2.85769 6.51693 3.2571 6.48446L3.53787 6.46163L4.96316 8.13705L4.18288 8.91732L3.05837 7.59542C2.4258 7.60873 1.27956 7.51412 0.336449 6.76571C0.137719 6.608 0.0161365 6.37277 0.0014881 6.1202C-0.0131603 5.86666 0.0808338 5.61898 0.261498 5.43881L5.43948 0.260828C5.62722 0.072351 5.8738 -0.00455333 6.0989 0.000207414L6.10867 0.000451555L6.11843 0.000939836C6.20779 0.00606679 6.29495 0.0244994 6.37698 0.0548949C6.5259 0.110071 6.65896 0.204553 6.76101 0.33053C6.82644 0.411218 7.67312 1.48995 7.6011 3.09738L8.8987 4.20138L8.11843 4.98165Z" transform="translate(1 0.25)"/>
<path d="M0 0V6.63158" transform="translate(14.2783 13.528) rotate(-45)" stroke="white" stroke-width="1.1" stroke-linecap="round"/> <path d="M0 0V6.63158" transform="translate(14.2783 13.528) rotate(-45)" stroke-width="1.1" stroke-linecap="round"/>
<line y1="-0.5" x2="21" y2="-0.5" transform="translate(15.5 0.5) rotate(135)" stroke="white"/> <line y1="-0.5" x2="21" y2="-0.5" transform="translate(15.5 0.5) rotate(135)"/>
</symbol> </symbol>
</defs> </defs>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 79 KiB

After

Width:  |  Height:  |  Size: 79 KiB