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, 183 insertions, 0 deletions

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;