From 7310afd1b4b859c0a061bc3034e19a0e4538eeef Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Fri, 18 Mar 2016 17:59:54 -0700
Subject: [PATCH] Replace message list loading spinner with bar

// FREEBIE
---
 background.html                |  6 ++++-
 js/views/conversation_view.js  |  4 +--
 stylesheets/_conversation.scss | 14 +++-------
 stylesheets/manifest.css       | 36 ++++++++++++++++++++-----
 stylesheets/manifest.scss      |  1 +
 stylesheets/options.css        | 49 +++++++++++++++++++---------------
 stylesheets/options.scss       | 26 +-----------------
 stylesheets/progress.scss      | 33 +++++++++++++++++++++++
 8 files changed, 102 insertions(+), 67 deletions(-)
 create mode 100644 stylesheets/progress.scss

diff --git a/background.html b/background.html
index 3a71705a..05728d4f 100644
--- a/background.html
+++ b/background.html
@@ -75,7 +75,11 @@
           {{> avatar }}
       </div>
 
-      <div class='discussion-container'></div>
+      <div class='discussion-container'>
+          <div class='bar-container hide'>
+            <div class='bar active progress-bar-striped progress-bar'></div>
+          </div>
+      </div>
 
       <div class='bottom-bar' id='footer'>
           <form class='send'>
diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js
index 27b834c7..44d14309 100644
--- a/js/views/conversation_view.js
+++ b/js/views/conversation_view.js
@@ -105,10 +105,10 @@
         },
 
         fetchMessages: function() {
-            this.$('.message-list').addClass('loading');
+            this.$('.bar-container').show();
             return this.model.fetchContacts().then(function() {
                 return this.model.fetchMessages().then(function() {
-                    this.$('.message-list').removeClass('loading');
+                    this.$('.bar-container').hide();
                 }.bind(this));
             }.bind(this));
             // TODO catch?
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 16e62f96..36a47a83 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -28,6 +28,10 @@
       flex-grow: 1;
       position: relative;
 
+      .bar-container {
+        height: 5px;
+      }
+
       .message-list {
         position: absolute;
         top: 0;
@@ -36,16 +40,6 @@
         margin: 0;
         padding: 2em 8px 0;
         overflow-y: auto;
-
-        &:before {
-          display: block;
-          margin: -25px auto 10px;
-          content: " ";
-          height: $loading-height;
-          width: $loading-height;
-          border: solid 3px transparent;
-        }
-
       }
     }
   }
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index a21f843f..3a8982be 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -396,6 +396,33 @@ img.emoji {
 input[type=text]:active, input[type=text]:focus, input[type=search]:active, input[type=search]:focus, textarea:active, textarea:focus {
   outline: 1px solid #2090ea; }
 
+@keyframes progress-bar-stripes {
+  from {
+    background-position: 40px 0; }
+  to {
+    background-position: 0 0; } }
+.progress-bar-striped {
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent);
+  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent);
+  -webkit-background-size: 40px 40px;
+  background-size: 40px 40px; }
+
+.progress-bar-striped {
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent);
+  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent); }
+
+.progress-bar.active {
+  -webkit-animation: progress-bar-stripes 2s linear infinite;
+  -o-animation: progress-bar-stripes 2s linear infinite;
+  animation: progress-bar-stripes 2s linear infinite; }
+
+.bar-container {
+  background: #a2d2f4; }
+  .bar-container .progress-bar {
+    height: 100%; }
+
 .conversation-stack,
 .new-conversation, .inbox, .gutter {
   height: 100%; }
@@ -610,6 +637,8 @@ input.search {
     .conversation .panel .discussion-container {
       flex-grow: 1;
       position: relative; }
+      .conversation .panel .discussion-container .bar-container {
+        height: 5px; }
       .conversation .panel .discussion-container .message-list {
         position: absolute;
         top: 0;
@@ -618,13 +647,6 @@ input.search {
         margin: 0;
         padding: 2em 8px 0;
         overflow-y: auto; }
-        .conversation .panel .discussion-container .message-list:before {
-          display: block;
-          margin: -25px auto 10px;
-          content: " ";
-          height: 16px;
-          width: 16px;
-          border: solid 3px transparent; }
 
 .group-member-list,
 .new-group-update,
diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss
index 23f3a306..de4f61f8 100644
--- a/stylesheets/manifest.scss
+++ b/stylesheets/manifest.scss
@@ -5,6 +5,7 @@
 // Global Settings, Variables, and Mixins
   @import 'variables';
   @import 'global';
+  @import 'progress';
 
 // Build the main view
   @import 'index';
diff --git a/stylesheets/options.css b/stylesheets/options.css
index 4dbaac28..7a82ae2e 100644
--- a/stylesheets/options.css
+++ b/stylesheets/options.css
@@ -809,6 +809,33 @@
 .intl-tel-input .country-list .iti-flag, .intl-tel-input .country-list .country-name {
   margin-right: 6px; }
 
+@keyframes progress-bar-stripes {
+  from {
+    background-position: 40px 0; }
+  to {
+    background-position: 0 0; } }
+.progress-bar-striped {
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent);
+  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent);
+  -webkit-background-size: 40px 40px;
+  background-size: 40px 40px; }
+
+.progress-bar-striped {
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent);
+  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent); }
+
+.progress-bar.active {
+  -webkit-animation: progress-bar-stripes 2s linear infinite;
+  -o-animation: progress-bar-stripes 2s linear infinite;
+  animation: progress-bar-stripes 2s linear infinite; }
+
+.bar-container {
+  background: #a2d2f4; }
+  .bar-container .progress-bar {
+    height: 100%; }
+
 .iti-flag {
   background: url("/images/flags.png"); }
 
@@ -1047,28 +1074,6 @@ ul.country-list {
   float: right;
   margin-left: 10px; }
 
-@keyframes progress-bar-stripes {
-  from {
-    background-position: 40px 0; }
-  to {
-    background-position: 0 0; } }
-.progress-bar-striped {
-  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent);
-  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent);
-  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent);
-  -webkit-background-size: 40px 40px;
-  background-size: 40px 40px; }
-
-.progress-bar-striped {
-  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent);
-  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent);
-  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent); }
-
-.progress-bar.active {
-  -webkit-animation: progress-bar-stripes 2s linear infinite;
-  -o-animation: progress-bar-stripes 2s linear infinite;
-  animation: progress-bar-stripes 2s linear infinite; }
-
 .progress-dialog {
   text-align: center;
   padding: 1em;
diff --git a/stylesheets/options.scss b/stylesheets/options.scss
index 7161362a..1b9b90fd 100644
--- a/stylesheets/options.scss
+++ b/stylesheets/options.scss
@@ -1,5 +1,6 @@
 @import 'variables';
 @import 'intlTelInput';
+@import 'progress';
 .iti-flag {
   // override intlTelInput's flags image location
   background: url("/images/flags.png");
@@ -283,31 +284,6 @@ ul.country-list {
     margin-left: 10px;
   }
 }
-@keyframes progress-bar-stripes {
-  from {
-    background-position: 40px 0;
-  }
-  to {
-    background-position: 0 0;
-  }
-}
-.progress-bar-striped {
-  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
-  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
-  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
-  -webkit-background-size: 40px 40px;
-          background-size: 40px 40px;
-}
-.progress-bar-striped {
-  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
-  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
-  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
-}
-.progress-bar.active {
-  -webkit-animation: progress-bar-stripes 2s linear infinite;
-       -o-animation: progress-bar-stripes 2s linear infinite;
-          animation: progress-bar-stripes 2s linear infinite;
-}
 .progress-dialog {
   text-align: center;
   padding: 1em;
diff --git a/stylesheets/progress.scss b/stylesheets/progress.scss
new file mode 100644
index 00000000..5d3d9c9c
--- /dev/null
+++ b/stylesheets/progress.scss
@@ -0,0 +1,33 @@
+@keyframes progress-bar-stripes {
+  from {
+    background-position: 40px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+.progress-bar-striped {
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
+  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
+  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
+  -webkit-background-size: 40px 40px;
+          background-size: 40px 40px;
+}
+.progress-bar-striped {
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
+  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
+  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
+}
+.progress-bar.active {
+  -webkit-animation: progress-bar-stripes 2s linear infinite;
+       -o-animation: progress-bar-stripes 2s linear infinite;
+          animation: progress-bar-stripes 2s linear infinite;
+}
+
+.bar-container {
+  background: $blue_l;
+
+  .progress-bar {
+    height: 100%;
+  }
+}