From a8de59132163718fcb1fba47b5e396dcac7355b6 Mon Sep 17 00:00:00 2001 From: Gabriel Albo Date: Tue, 1 Mar 2016 15:17:54 -0300 Subject: Adding new svg and dummy animation Issue #238 --- web-ui/app/index.html | 48 +++++++++++++++++++++++++------------------- web-ui/app/scss/_alerts.scss | 2 ++ web-ui/app/scss/_mixins.scss | 31 ++++++++++++++++++++++++++++ 3 files changed, 60 insertions(+), 21 deletions(-) (limited to 'web-ui') diff --git a/web-ui/app/index.html b/web-ui/app/index.html index 2d35662c..d297b28c 100644 --- a/web-ui/app/index.html +++ b/web-ui/app/index.html @@ -19,27 +19,33 @@
diff --git a/web-ui/app/scss/_alerts.scss b/web-ui/app/scss/_alerts.scss index cfb31cbe..8d7396fc 100644 --- a/web-ui/app/scss/_alerts.scss +++ b/web-ui/app/scss/_alerts.scss @@ -21,3 +21,5 @@ } } } + +@include logo; diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss index a623366d..c4cc234b 100644 --- a/web-ui/app/scss/_mixins.scss +++ b/web-ui/app/scss/_mixins.scss @@ -308,4 +308,35 @@ } } +@mixin logo { + @keyframes hideshow { + 0% { fill: #2ba6cb; } + 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; + } + + &: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 From da63a4c8e563a330c54ee73dcc0bc3d8c8b46fc3 Mon Sep 17 00:00:00 2001 From: Gabriel Albo Date: Tue, 1 Mar 2016 19:08:24 -0300 Subject: Adding sass function to lighten the logo color for the spinner Issue #238 --- web-ui/app/scss/_mixins.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'web-ui') diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss index c4cc234b..4360b886 100644 --- a/web-ui/app/scss/_mixins.scss +++ b/web-ui/app/scss/_mixins.scss @@ -310,7 +310,7 @@ @mixin logo { @keyframes hideshow { - 0% { fill: #2ba6cb; } + 0% { fill: lighten($logo_color, 30); } 25% { opacity: 1; } 100% { opacity: 0; } } -- cgit v1.2.3 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 From e96e9aa73af9dde6dab2a12da0a9635d6d7a3d8e Mon Sep 17 00:00:00 2001 From: Gislene Pereira Date: Mon, 14 Mar 2016 16:05:06 -0300 Subject: Adding logo loading event to Saving Draft; + Adding timeout to 0.6 secs before stopping the spinning; + Removing unnecessary defaultAttr. Issue #238 --- web-ui/app/js/page/pix_logo.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'web-ui') diff --git a/web-ui/app/js/page/pix_logo.js b/web-ui/app/js/page/pix_logo.js index c03fe4ec..c5c709d6 100644 --- a/web-ui/app/js/page/pix_logo.js +++ b/web-ui/app/js/page/pix_logo.js @@ -26,21 +26,21 @@ define( 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'); + $('.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'); + setTimeout(function(){ + $('.logo-part-animation-on').attr('class', 'logo-part-animation-off'); + }, 600); }; this.after('initialize', function () { this.on(document, events.ui.tag.select, this.spinLogo); this.on(document, events.mails.available, this.stopSpinningLogo); + this.on(document, events.mail.saveDraft, this.spinLogo); + this.on(document, events.mail.draftSaved, this.stopSpinningLogo); }); } } -- cgit v1.2.3 From fc36290f708125a168e31b3b1e5b7282e6fd1059 Mon Sep 17 00:00:00 2001 From: Gislene Pereira Date: Mon, 14 Mar 2016 17:16:09 -0300 Subject: The logo will spin when the user opens a mail or draft. Issue #238 --- web-ui/app/js/page/pix_logo.js | 3 +++ 1 file changed, 3 insertions(+) (limited to 'web-ui') diff --git a/web-ui/app/js/page/pix_logo.js b/web-ui/app/js/page/pix_logo.js index c5c709d6..70a8b3ab 100644 --- a/web-ui/app/js/page/pix_logo.js +++ b/web-ui/app/js/page/pix_logo.js @@ -41,6 +41,9 @@ define( this.on(document, events.mails.available, this.stopSpinningLogo); this.on(document, events.mail.saveDraft, this.spinLogo); this.on(document, events.mail.draftSaved, this.stopSpinningLogo); + this.on(document, events.ui.mail.open, this.spinLogo); + this.on(document, events.dispatchers.rightPane.openDraft, this.spinLogo); + this.on(document, events.mail.want, this.stopSpinningLogo); }); } } -- cgit v1.2.3 From 28be7a424207a6e156adcb1746a6401f9bcabd85 Mon Sep 17 00:00:00 2001 From: Gislene Pereira Date: Tue, 15 Mar 2016 17:17:15 -0300 Subject: Adding js unit tests + small refactoring. // pairing with @tuliocasagrande Issue #238 --- web-ui/app/js/page/default.js | 2 +- web-ui/app/js/page/pix_logo.js | 29 ++++++++---- web-ui/test/spec/page/pix_logo.spec.js | 84 ++++++++++++++++++++++++++++++++++ 3 files changed, 105 insertions(+), 10 deletions(-) create mode 100644 web-ui/test/spec/page/pix_logo.spec.js (limited to 'web-ui') diff --git a/web-ui/app/js/page/default.js b/web-ui/app/js/page/default.js index e119672f..965fb577 100644 --- a/web-ui/app/js/page/default.js +++ b/web-ui/app/js/page/default.js @@ -134,7 +134,7 @@ define( unreadCountTitle.attachTo(document); - pixLogo.attachTo('#pix-logo'); + pixLogo.attachTo(document); $.ajaxSetup({headers: {'X-XSRF-TOKEN': browser.getCookie('XSRF-TOKEN')}}); } diff --git a/web-ui/app/js/page/pix_logo.js b/web-ui/app/js/page/pix_logo.js index 70a8b3ab..58024a53 100644 --- a/web-ui/app/js/page/pix_logo.js +++ b/web-ui/app/js/page/pix_logo.js @@ -26,24 +26,35 @@ define( return defineComponent(pixLogo); function pixLogo() { - this.spinLogo = function (ev, data) { + this.turnAnimationOn = function () { $('.logo-part-animation-off').attr('class', 'logo-part-animation-on'); }; - this.stopSpinningLogo = function (ev, data) { + this.turnAnimationOff = function () { setTimeout(function(){ $('.logo-part-animation-on').attr('class', 'logo-part-animation-off'); }, 600); }; + this.triggerSpinLogo = function (ev, data) { + this.trigger(document, events.ui.page.spinLogo); + }; + + this.triggerStopSpinningLogo = function(ev, data) { + this.trigger(document, events.ui.page.stopSpinningLogo); + }; + this.after('initialize', function () { - this.on(document, events.ui.tag.select, this.spinLogo); - this.on(document, events.mails.available, this.stopSpinningLogo); - this.on(document, events.mail.saveDraft, this.spinLogo); - this.on(document, events.mail.draftSaved, this.stopSpinningLogo); - this.on(document, events.ui.mail.open, this.spinLogo); - this.on(document, events.dispatchers.rightPane.openDraft, this.spinLogo); - this.on(document, events.mail.want, this.stopSpinningLogo); + this.on(document, events.ui.page.spinLogo, this.turnAnimationOn); + this.on(document, events.ui.page.stopSpinningLogo, this.turnAnimationOff); + + this.on(document, events.ui.tag.select, this.triggerSpinLogo); + this.on(document, events.mails.available, this.triggerStopSpinningLogo); + this.on(document, events.mail.saveDraft, this.triggerSpinLogo); + this.on(document, events.mail.draftSaved, this.triggerStopSpinningLogo); + this.on(document, events.ui.mail.open, this.triggerSpinLogo); + this.on(document, events.dispatchers.rightPane.openDraft, this.triggerSpinLogo); + this.on(document, events.mail.want, this.triggerStopSpinningLogo); }); } } diff --git a/web-ui/test/spec/page/pix_logo.spec.js b/web-ui/test/spec/page/pix_logo.spec.js new file mode 100644 index 00000000..73171c91 --- /dev/null +++ b/web-ui/test/spec/page/pix_logo.spec.js @@ -0,0 +1,84 @@ +describeComponent('page/pix_logo', function () { + 'use strict'; + + describe('pix logo', function () { + it('should spin when loading another mail box', function () { + this.setupComponent(''); + var eventSpy = spyOnEvent(document, Pixelated.events.ui.page.spinLogo); + $(document).trigger(Pixelated.events.ui.tag.select); + + expect(eventSpy).toHaveBeenTriggeredOn(document); + expect(this.component.$node.hasClass('logo-part-animation-on')).toBe(true); + }); + + it('should stop spinning after mail box is loaded', function (done) { + this.setupComponent(''); + var eventSpy = spyOnEvent(document, Pixelated.events.ui.page.stopSpinningLogo); + $(document).trigger(Pixelated.events.mails.available); + + var component = this.component; + + setTimeout(function() { + expect(eventSpy).toHaveBeenTriggeredOn(document); + expect(component.$node.hasClass('logo-part-animation-off')).toBe(true); + done(); + }, 600); + }); + + it('should spin when saving draft', function () { + this.setupComponent(''); + var eventSpy = spyOnEvent(document, Pixelated.events.ui.page.spinLogo); + $(document).trigger(Pixelated.events.mail.saveDraft); + + expect(eventSpy).toHaveBeenTriggeredOn(document); + expect(this.component.$node.hasClass('logo-part-animation-on')).toBe(true); + }); + + it('should stop spinning after draft is saved', function (done) { + this.setupComponent(''); + var eventSpy = spyOnEvent(document, Pixelated.events.ui.page.stopSpinningLogo); + $(document).trigger(Pixelated.events.mail.draftSaved); + + var component = this.component; + + setTimeout(function() { + expect(eventSpy).toHaveBeenTriggeredOn(document); + expect(component.$node.hasClass('logo-part-animation-off')).toBe(true); + done(); + }, 600); + }); + + it('should spin when opening a mail message', function () { + this.setupComponent(''); + var eventSpy = spyOnEvent(document, Pixelated.events.ui.page.spinLogo); + $(document).trigger(Pixelated.events.ui.mail.open); + + expect(eventSpy).toHaveBeenTriggeredOn(document); + expect(this.component.$node.hasClass('logo-part-animation-on')).toBe(true); + }); + + it('should spin when opening a draft', function () { + this.setupComponent(''); + var eventSpy = spyOnEvent(document, Pixelated.events.ui.page.spinLogo); + $(document).trigger(Pixelated.events.dispatchers.rightPane.openDraft); + + expect(eventSpy).toHaveBeenTriggeredOn(document); + expect(this.component.$node.hasClass('logo-part-animation-on')).toBe(true); + }); + + it('should stop spinning after mail message is loaded', function (done) { + this.setupComponent(''); + var eventSpy = spyOnEvent(document, Pixelated.events.ui.page.stopSpinningLogo); + $(document).trigger(Pixelated.events.mail.want); + + var component = this.component; + + setTimeout(function() { + expect(eventSpy).toHaveBeenTriggeredOn(document); + expect(component.$node.hasClass('logo-part-animation-off')).toBe(true); + done(); + }, 600); + }); + }); +}); + -- cgit v1.2.3 From f81570d45898bf2c9ec9a67a8e5229e125e7b635 Mon Sep 17 00:00:00 2001 From: Gislene Pereira Date: Wed, 16 Mar 2016 12:53:54 -0300 Subject: Adding spin logo to search event. Issue #238 --- web-ui/app/js/page/pix_logo.js | 1 + web-ui/test/spec/page/pix_logo.spec.js | 9 +++++++++ 2 files changed, 10 insertions(+) (limited to 'web-ui') diff --git a/web-ui/app/js/page/pix_logo.js b/web-ui/app/js/page/pix_logo.js index 58024a53..ad17f3be 100644 --- a/web-ui/app/js/page/pix_logo.js +++ b/web-ui/app/js/page/pix_logo.js @@ -54,6 +54,7 @@ define( this.on(document, events.mail.draftSaved, this.triggerStopSpinningLogo); this.on(document, events.ui.mail.open, this.triggerSpinLogo); this.on(document, events.dispatchers.rightPane.openDraft, this.triggerSpinLogo); + this.on(document, events.search.perform, this.triggerSpinLogo); this.on(document, events.mail.want, this.triggerStopSpinningLogo); }); } diff --git a/web-ui/test/spec/page/pix_logo.spec.js b/web-ui/test/spec/page/pix_logo.spec.js index 73171c91..1700e77d 100644 --- a/web-ui/test/spec/page/pix_logo.spec.js +++ b/web-ui/test/spec/page/pix_logo.spec.js @@ -79,6 +79,15 @@ describeComponent('page/pix_logo', function () { done(); }, 600); }); + + it('should spin when doing a search', function () { + this.setupComponent(''); + var eventSpy = spyOnEvent(document, Pixelated.events.ui.page.spinLogo); + $(document).trigger(Pixelated.events.search.perform); + + expect(eventSpy).toHaveBeenTriggeredOn(document); + expect(this.component.$node.hasClass('logo-part-animation-on')).toBe(true); + }); }); }); -- cgit v1.2.3