Merge branch 'loading-logo'

* loading-logo:
  Adding spin logo to search event. Issue #238
  Adding js unit tests + small refactoring. // pairing with @tuliocasagrande Issue #238
  The logo will spin when the user opens a mail or draft. Issue #238
  Adding logo loading event to Saving Draft; + Adding timeout to 0.6 secs before stopping the spinning; + Removing unnecessary defaultAttr.
  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.
  Adding sass function to lighten the logo color for the spinner
  Adding new svg and dummy animation

Conflicts:
	web-ui/app/scss/_alerts.scss
	web-ui/app/scss/_mixins.scss

1 files changed, 93 insertions, 0 deletions

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..1700e77d
--- /dev/null
+++ b/web-ui/test/spec/page/pix_logo.spec.js
@@ -0,0 +1,93 @@
+describeComponent('page/pix_logo', function () {
+  'use strict';
+
+  describe('pix logo', function () {
+    it('should spin when loading another mail box', function () {
+      this.setupComponent('<polygon id="clock1" class="logo-part-animation-off"></polygon>');
+      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('<polygon id="clock1" class="logo-part-animation-on"></polygon>');
+      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('<polygon id="clock1" class="logo-part-animation-off"></polygon>');
+      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('<polygon id="clock1" class="logo-part-animation-on"></polygon>');
+      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('<polygon id="clock1" class="logo-part-animation-off"></polygon>');
+      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('<polygon id="clock1" class="logo-part-animation-off"></polygon>');
+      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('<polygon id="clock1" class="logo-part-animation-on"></polygon>');
+      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);
+    });
+
+    it('should spin when doing a search', function () {
+      this.setupComponent('<polygon id="clock1" class="logo-part-animation-off"></polygon>');
+      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);
+    });
+  });
+});
+