From bfa9686b400ba09f8eec59046bc907baf7c229a6 Mon Sep 17 00:00:00 2001 From: Gislene Pereira Date: Thu, 10 Mar 2016 14:57:12 -0300 Subject: Creating events to spin and stop spinning the logo. Logo will spin when user selects another tag on the left bar and stops when the list of mails is rendered. Issue #238 --- web-ui/app/index.html | 14 ++++++------ web-ui/app/js/page/default.js | 4 ++++ web-ui/app/js/page/events.js | 6 +++-- web-ui/app/js/page/pix_logo.js | 47 ++++++++++++++++++++++++++++++++++++++ web-ui/app/scss/_mixins.scss | 52 +++++++++++++++++++++++------------------- 5 files changed, 90 insertions(+), 33 deletions(-) create mode 100644 web-ui/app/js/page/pix_logo.js (limited to 'web-ui') diff --git a/web-ui/app/index.html b/web-ui/app/index.html index d297b28c..c8a1abb5 100644 --- a/web-ui/app/index.html +++ b/web-ui/app/index.html @@ -21,7 +21,7 @@ - @@ -39,12 +39,12 @@ - - - - - - + + + + + + diff --git a/web-ui/app/js/page/default.js b/web-ui/app/js/page/default.js index 19b28354..e119672f 100644 --- a/web-ui/app/js/page/default.js +++ b/web-ui/app/js/page/default.js @@ -51,6 +51,7 @@ define( 'mail_view/data/feedback_sender', 'page/version', 'page/unread_count_title', + 'page/pix_logo', 'helpers/browser' ], @@ -90,6 +91,7 @@ define( feedbackSender, version, unreadCountTitle, + pixLogo, browser) { 'use strict'; @@ -132,6 +134,8 @@ define( unreadCountTitle.attachTo(document); + pixLogo.attachTo('#pix-logo'); + $.ajaxSetup({headers: {'X-XSRF-TOKEN': browser.getCookie('XSRF-TOKEN')}}); } diff --git a/web-ui/app/js/page/events.js b/web-ui/app/js/page/events.js index 1ec27c46..1f48173d 100644 --- a/web-ui/app/js/page/events.js +++ b/web-ui/app/js/page/events.js @@ -34,7 +34,7 @@ define(function () { }, tag: { selected: 'ui:tagSelected', - select: 'ui:tagSelect' + select: 'ui:tagSelect', }, tags: { loaded: 'ui:tagsLoaded' @@ -69,7 +69,9 @@ define(function () { page: { previous: 'ui:page:previous', next: 'ui:page:next', - changed: 'ui:page:changed' + changed: 'ui:page:changed', + spinLogo: 'ui:page:spinLogo', + stopSpinningLogo: 'ui:page:stopSpinningLogo' }, composeBox: { newMessage: 'ui:composeBox:newMessage', diff --git a/web-ui/app/js/page/pix_logo.js b/web-ui/app/js/page/pix_logo.js new file mode 100644 index 00000000..c03fe4ec --- /dev/null +++ b/web-ui/app/js/page/pix_logo.js @@ -0,0 +1,47 @@ +/* + * Copyright (c) 2014 ThoughtWorks, Inc. + * + * Pixelated 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. + * + * Pixelated 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 Pixelated. If not, see . + */ +define( + [ + 'flight/lib/component', + 'page/events' + ], + + function(defineComponent, events) { + 'use strict'; + + return defineComponent(pixLogo); + + function pixLogo() { + this.defaultAttrs({ + 'pixLogo': '#pix-logo' + }); + + this.spinLogo = function (ev, data) { + this.$node.parents().eq(1).find('.logo-part-animation-off').attr('class', 'logo-part-animation-on'); + }; + + this.stopSpinningLogo = function (ev, data) { + this.$node.parents().eq(1).find('.logo-part-animation-on').attr('class', 'logo-part-animation-off'); + }; + + this.after('initialize', function () { + this.on(document, events.ui.tag.select, this.spinLogo); + this.on(document, events.mails.available, this.stopSpinningLogo); + }); + } + } +); diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss index 4360b886..6d0bb1a3 100644 --- a/web-ui/app/scss/_mixins.scss +++ b/web-ui/app/scss/_mixins.scss @@ -310,33 +310,37 @@ @mixin logo { @keyframes hideshow { - 0% { fill: lighten($logo_color, 30); } - 25% { opacity: 1; } - 100% { opacity: 0; } -} - -.logo-part { - animation: hideshow 0.6s ease infinite; - opacity: 1; - - &:nth-child(2) { - opacity: 0; - animation-delay: 0.1s; - } + 0% { fill: lighten($logo_color, 30); } + 25% { opacity: 1; } + 100% { opacity: 0; } + } - &:nth-child(3) { - animation-delay: 0.2s; - } - &:nth-child(4) { - animation-delay: 0.3s; - } - &:nth-child(5) { - animation-delay: 0.4s; + .logo-part-animation-off { + animation: none; } - &:nth-child(6) { - animation-delay: 0.5s; + + .logo-part-animation-on { + animation: hideshow 0.6s ease infinite; + opacity: 1; + + &:nth-child(2) { + opacity: 0; + animation-delay: 0.1s; + } + + &:nth-child(3) { + animation-delay: 0.2s; + } + &:nth-child(4) { + animation-delay: 0.3s; + } + &:nth-child(5) { + animation-delay: 0.4s; + } + &:nth-child(6) { + animation-delay: 0.5s; + } } } -} @include tt-hint; -- cgit v1.2.3