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

6 files changed, 373 insertions, 23 deletions

diff --git a/web-ui/app/index.html b/web-ui/app/index.html
index 4d6f3037..4b6a81a0 100644
--- a/web-ui/app/index.html
+++ b/web-ui/app/index.html
@@ -18,27 +18,33 @@
     <section id="left-pane" class="left-off-canvas-menu">
       <a class="left-off-canvas-logo side-nav-toggle" href="#">
       <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-           viewBox="30.4 316.8 555.2 155.2" enable-background="new 30.4 316.8 555.2 155.2" xml:space="preserve">
-        <g>
-          <path fill="#3E3B38" d="M30.4,355.5v77.8L98.9,472l68.5-38.7v-77.8l-68.5-38.7L30.4,355.5z M96,443.9l-39.9-22v-47.7L96,396.9
-            V443.9z M141.2,421.8l-39.4,22v-47l39.4-23C141.2,373.8,141.2,421.8,141.2,421.8z M141.2,367.5l-42.4,25.2l-42.8-25.2l42.8-23
-            L141.2,367.5z"/>
-          <path fill="#3E3B38" d="M214.9,363.1h-21.8v64.6h14.7v-24h7.1c12.7,0,22-7.3,22-20.8C237,369.7,227.4,363.1,214.9,363.1z M212,392
-            h-4.2v-17.1h4.2c5.9,0,11.3,2,11.3,8.6S217.9,392,212,392z"/>
-          <rect x="241.9" y="363.1" fill="#3E3B38" width="14.7" height="64.6"/>
-          <polygon fill="#3E3B38" points="320.7,363.1 302.3,363.1 290.3,380.7 278.3,363.1 261,363.1 281.3,392.9 259.2,427.7 277.6,427.7
-            290.3,405.7 303.1,427.7 322.2,427.7 299.4,392.9   "/>
-          <polygon fill="#3E3B38" points="324.6,427.7 361.6,427.7 361.6,414.7 339.3,414.7 339.3,401.8 360.6,401.8 360.6,388.8
-            339.3,388.8 339.3,376 361.6,376 361.6,363.1 324.6,363.1   "/>
-          <path fill="#3E3B38" d="M416.6,363.1l-20.8,51.7h-14.4v-51.7h-14.7v64.6h24h13h2.9l4.9-13H436l4.9,13h15.9l-26.2-64.6H416.6z
-             M416.2,401.8l7.1-18.8h0.2l7.1,18.8H416.2z"/>
-          <polygon fill="#3E3B38" points="444.1,376 459.5,376 459.5,427.7 474.2,427.7 474.2,376 489.6,376 489.6,363.1 444.1,363.1   "/>
-          <polygon fill="#3E3B38" points="494.5,427.7 531.5,427.7 531.5,414.7 509.4,414.7 509.4,401.8 530.7,401.8 530.7,388.8
-            509.4,388.8 509.4,376 531.5,376 531.5,363.1 494.5,363.1   "/>
-          <path fill="#3E3b38" d="M553,363.1h-16.2v64.6H553c17.9,0,32.6-13.5,32.6-32.3C585.6,376.5,570.6,363.1,553,363.1z M553.5,414.5
-            h-2.2v-38.2h2.2c11,0,18.4,8.3,18.4,19.1C571.9,406.2,564.5,414.5,553.5,414.5z"/>
-        </g>
-      </svg>
+   viewBox="30.4 627.3 612 171.1" enable-background="new 30.4 627.3 612 171.1" xml:space="preserve">
+<g>
+  <path fill="#3E3B38" id="pix-logo" d="M30.4,669.9v85.8l75.5,42.7l75.5-42.7v-85.8l-75.5-42.7L30.4,669.9z M102.7,767.4l-44-24.3v-52.6l44,25
+    V767.4z M152.5,743l-43.4,24.3v-51.8l43.4-25.4V743z M152.5,683.1l-46.7,27.8l-47.2-27.8l47.2-25.4L152.5,683.1z"/>
+  <path fill="#3E3B38" d="M233.8,678.3h-24v71.2h16.2v-26.5h7.8c14,0,24.3-8,24.3-22.9C258.1,685.6,247.6,678.3,233.8,678.3z
+     M230.6,710.2h-4.6v-18.8h4.6c6.5,0,12.5,2.2,12.5,9.5C243,708.1,237.1,710.2,230.6,710.2z"/>
+  <rect x="263.5" y="678.3" fill="#3E3B38" width="16.2" height="71.2"/>
+  <polygon fill="#3E3B38" points="350.4,678.3 330.1,678.3 316.9,697.7 303.7,678.3 284.6,678.3 307,711.1 282.6,749.5 302.9,749.5 
+    316.9,725.3 331,749.5 352.1,749.5 326.9,711.1   "/>
+  <polygon fill="#3E3B38" points="354.7,749.5 395.5,749.5 395.5,735.2 370.9,735.2 370.9,721 394.4,721 394.4,706.6 370.9,706.6 
+    370.9,692.5 395.5,692.5 395.5,678.3 354.7,678.3   "/>
+  <path fill="#3E3B38" d="M456.1,678.3l-22.9,57h-15.9v-57h-16.2v71.2h26.5h14.3h3.2l5.4-14.3h27l5.4,14.3h17.5l-28.9-71.2H456.1z
+     M455.7,721l7.8-20.7h0.2l7.8,20.7H455.7z"/>
+  <polygon fill="#3E3B38" points="486.4,692.5 503.4,692.5 503.4,749.5 519.6,749.5 519.6,692.5 536.6,692.5 536.6,678.3 
+    486.4,678.3   "/>
+  <polygon fill="#3E3B38" points="542,749.5 582.8,749.5 582.8,735.2 558.4,735.2 558.4,721 581.9,721 581.9,706.6 558.4,706.6 
+    558.4,692.5 582.8,692.5 582.8,678.3 542,678.3   "/>
+  <path fill="#3E3B38" d="M606.5,678.3h-17.9v71.2h17.9c19.7,0,35.9-14.9,35.9-35.6C642.4,693.1,625.9,678.3,606.5,678.3z M607,735
+    h-2.4v-42.1h2.4c12.1,0,20.3,9.1,20.3,21.1C627.3,725.8,619.1,735,607,735z"/>
+    </g>
+    <polygon id="clock1" class="logo-part-animation-off" fill="#3E3B38" points="105.8,657.8 105.8,628 105.8,627.3 181.4,669.9 152.5,683.1 "/>
+    <polygon id="clock2" class="logo-part-animation-off" fill="#3E3B38" points="152.5,683.1 181.4,669.9 181.4,755.7 152.5,743 "/>
+    <polygon id="clock3" class="logo-part-animation-off" fill="#3E3B38" points="105.9,798.3 105.9,769 152.5,743 181.4,755.7 "/>
+    <polygon id="clock4" class="logo-part-animation-off" fill="#3E3B38" points="58.7,743.1 105.9,769 105.9,798.3 30.4,755.7 "/>
+    <polygon id="clock5" class="logo-part-animation-off" fill="#3E3B38" points="30.4,669.9 58.6,683.1 58.7,743.1 30.4,755.7 "/>
+    <polygon id="clock6" class="logo-part-animation-off" fill="#3E3B38" points="105.8,628 105.8,657.8 58.6,683.1 30.4,669.9 105.8,627.3 "/>
+    </svg>
       </a>
       <a class="side-nav-toggle side-nav-toggle-icon" href="#">
         <i class="toggle fa fa-navicon"></i>
diff --git a/web-ui/app/js/page/default.js b/web-ui/app/js/page/default.js
index 19b28354..965fb577 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(document);
+
       $.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 ad15e76e..68a6aad1 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..ad17f3be
--- /dev/null
+++ b/web-ui/app/js/page/pix_logo.js
@@ -0,0 +1,62 @@
+/*
+ * 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 <http://www.gnu.org/licenses/>.
+ */
+define(
+  [
+    'flight/lib/component',
+    'page/events'
+  ],
+
+  function(defineComponent, events) {
+    'use strict';
+
+    return defineComponent(pixLogo);
+
+    function pixLogo() {
+      this.turnAnimationOn = function () {
+        $('.logo-part-animation-off').attr('class', 'logo-part-animation-on');
+      };
+
+      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.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.search.perform, this.triggerSpinLogo);
+        this.on(document, events.mail.want, this.triggerStopSpinningLogo);
+      });
+    }
+  }
+);
diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss
index 4e7b1fbb..13f90685 100644
--- a/web-ui/app/scss/_mixins.scss
+++ b/web-ui/app/scss/_mixins.scss
@@ -162,3 +162,186 @@
   }
 }
 
+@mixin recipients {
+
+  .recipients-area {
+    -webkit-appearance: none;
+    background-color: white;
+    font-family: inherit;
+    display: flex;
+    flex-wrap: wrap;
+    font-size: 0.898em;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    position: relative;
+
+    .compose-column-label {
+      width: 5%;
+      display: inline-block;
+    }
+
+    .compose-column-recipients {
+      width: 95%;
+      display: inline-block;
+    }
+
+    .recipients-label {
+      width: 100%;
+      height: 100%;
+    }
+
+    .recipients-navigation-handler {
+      z-index: -1;
+      position: absolute;
+      top: -200px;
+    }
+
+    .twitter-typeahead {
+      flex: 1 1 50px;
+    }
+
+    .invalid-format {
+      border-bottom: 1px dotted $error;
+    }
+
+    input[type=text] {
+      vertical-align: top;
+      height: 35px;
+      margin-left: 1px;
+      font-size: 0.9em;
+      width: 100%;
+    }
+
+    .fixed-recipient {
+      display: inline-block;
+      margin-right: -3px;
+      flex: none;
+      position: relative;
+
+      .recipient-value {
+        &.selected {
+          border: 1px solid $medium_dark_grey;
+        }
+        &:before {
+          font-family: FontAwesome;
+          padding-right: 4px;
+
+        }
+        &.encrypted {
+          border-bottom-color: $will_be_encrypted;
+
+          &:before {
+            color: $will_be_encrypted;
+            content: "\f023 ";
+          }
+        }
+        &.not-encrypted {
+          border-bottom-color: $wont_be_encrypted;
+
+          &:before {
+            color: $wont_be_encrypted;
+            content: "\f13e ";
+          }
+        }
+
+        &.deleting span {
+          text-decoration: line-through;
+        }
+        & span {
+            margin: 0px;
+            padding: 0px;
+            cursor: pointer;
+        }
+        margin: 3px;
+        padding: 5px;
+        background-color: $background_light_grey;
+        border: 1px solid $border_light_grey;
+        border-radius: 2px;
+      }
+
+      .recipient-del {
+        position: relative;
+        color: $recipients_font_color;
+        &:hover, &:focus {
+          color: $recipients_font_color;
+        }
+        &:before {
+          margin-left: 0.4em;
+          font-weight: bold;
+          content: "x";
+        }
+        &.deleteTooltip:hover:after {
+          position: absolute;
+          content: "Click to remove";
+          font-size: 0.5rem;
+          @include tooltip(25px, 0px);
+        }
+      }
+    }
+  input.recipients-input:focus {
+    background-color: $dark_white !important;
+    border-color: $medium_light_grey;
+    outline: none;
+    width: 270px;
+  }
+}
+
+  .collapse {
+    display:block;
+    position: absolute;
+    right: 10px;
+    padding-right: 15px;
+    padding-left: 15px;
+    font-family: 'FontAwesome';
+    font-weight: bolder;
+    font-size: larger;
+    cursor: pointer;
+  }
+
+  .collapse + input, .collapse + input + * {
+    display:none;
+  }
+
+  .collapse + input:checked + * {
+    display:block;
+  }
+}
+
+@mixin logo {
+  @keyframes hideshow {
+    0% { fill: lighten($logo_color, 30); }
+    25% { opacity: 1; }
+    100% { opacity: 0; }
+  } 
+
+  .logo-part-animation-off {
+      animation: none;
+  }
+
+  .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;
+@include logo;
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);
+    });
+  });
+});
+