From e809a0cf8b066af29148bf796080263c37b5bce1 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Fri, 23 Sep 2016 16:50:03 -0700
Subject: [PATCH] Breakout timer rendering into its own view

Make width and height constant.
---
 background.html                |   5 +-
 js/views/message_view.js       |  26 ++++---
 stylesheets/_conversation.scss |   6 +-
 stylesheets/_hourglass.scss    |  11 ++-
 stylesheets/_themes.scss       |   9 +++
 stylesheets/manifest.css       | 121 ++++++++++++++++++++++-----------
 6 files changed, 118 insertions(+), 60 deletions(-)

diff --git a/background.html b/background.html
index 6574bd46..8f2681bf 100644
--- a/background.html
+++ b/background.html
@@ -157,10 +157,13 @@
           <div class='meta'>
             <span class='timestamp' data-timestamp={{ timestamp }}></span>
             <span class='status hide'></span>
-            <span class='timer hourglass'><span class='sand'></span></span>
+            <span class='timer'></span>
           </div>
       </div>
   </script>
+  <script type='text/x-tmpl-mustache' id='hourglass'>
+      <span class='hourglass'><span class='sand'></span></span>
+  </script>
   <script type='text/x-tmpl-mustache' id='new-group-update'>
       <div class='conversation-header'>
         <button class='back'></button>
diff --git a/js/views/message_view.js b/js/views/message_view.js
index 11d53184..d35daa23 100644
--- a/js/views/message_view.js
+++ b/js/views/message_view.js
@@ -25,6 +25,23 @@
             resend: i18n('resend')
         }
     });
+    var TimerView = Whisper.View.extend({
+        templateName: 'hourglass',
+        className: 'timer',
+        initialize: function() {
+            if (this.model.isExpiring()) {
+                this.render();
+                var totalTime = this.model.get('expireTimer') * 1000;
+                var remainingTime = this.model.msTilExpire();
+                var elapsed = (totalTime - remainingTime) / totalTime;
+                this.$('.sand')
+                    .css('animation-duration', remainingTime*0.001 + 's')
+                    .css('transform', 'translateY(' + elapsed*100 + '%)');
+                this.$el.show();
+            }
+            return this;
+        }
+    });
 
     Whisper.MessageView = Whisper.View.extend({
         tagName:   'li',
@@ -134,14 +151,7 @@
             }
         },
         renderExpiring: function() {
-            if (this.model.isExpiring()) {
-                var totalTime = this.model.get('expireTimer') * 1000;
-                var remainingTime = this.model.msTilExpire();
-                this.$('.hourglass .sand')
-                    .css('animation-duration', remainingTime*0.001 + 's')
-                    .css('transform', 'translateY(' + 100*(1 - (remainingTime / totalTime)) + '%)');
-                this.$el.addClass('expiring');
-            }
+            new TimerView({ model: this.model, el: this.$('.timer') });
         },
         render: function() {
             var contact = this.model.isIncoming() ? this.model.getContact() : null;
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 946bf318..f39e3589 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -395,10 +395,8 @@ li.entry .error-icon-container {
     animation: shake 0.2s linear 3;
   }
 
-  .timer { display: none; }
-  .expiring .timer {
-    display: inline-block;
-    @include hourglass(13px, 11px, #999);
+  .timer {
+    display: none;
   }
 
   .control {
diff --git a/stylesheets/_hourglass.scss b/stylesheets/_hourglass.scss
index 07569b31..d2e7ec4e 100644
--- a/stylesheets/_hourglass.scss
+++ b/stylesheets/_hourglass.scss
@@ -1,13 +1,12 @@
-@mixin hourglass($width, $height, $color) {
+@mixin hourglass($color) {
   display: inline-block;
   position: relative;
-  vertical-align: text-bottom;
   @include color-svg('/images/hourglass_full.svg', transparent);
   background-size: 100%;
 
   &, .sand, &:before, &:after {
-    width: $width;
-    height: $height;
+    width: 13px;
+    height: 11px;
   }
   .sand, &:before, &:after {
     content: '';
@@ -25,8 +24,6 @@
     @include color-svg('/images/hourglass_empty.svg', $color);
   }
   @keyframes moveDown {
-    to   {
-      transform: translateY(100%);
-    }
+    to { transform: translateY(100%); }
   }
 }
diff --git a/stylesheets/_themes.scss b/stylesheets/_themes.scss
index 67e04fba..2a731523 100644
--- a/stylesheets/_themes.scss
+++ b/stylesheets/_themes.scss
@@ -170,6 +170,9 @@ $ios-border-color: rgba(0,0,0,0.1);
     }
     margin-bottom: 1px;
   }
+  .hourglass {
+    @include hourglass(#999);
+  }
 }
 
 .android {
@@ -204,6 +207,12 @@ $ios-border-color: rgba(0,0,0,0.1);
   .outgoing .bubble {
     background-color: $grey_l;
   }
+  .outgoing .hourglass {
+    @include hourglass(#999);
+  }
+  .incoming .hourglass {
+    @include hourglass(#fff);
+  }
 
   .incoming .bubble {
     .sender, .content, .body, .meta, a {
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 60e236e8..4ea049b6 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -1224,45 +1224,6 @@ li.entry .error-icon-container {
   .message-container .timer,
   .message-list .timer {
     display: none; }
-  .message-container .expiring .timer,
-  .message-list .expiring .timer {
-    display: inline-block;
-    display: inline-block;
-    position: relative;
-    vertical-align: text-bottom;
-    -webkit-mask: url("/images/hourglass_full.svg") no-repeat center;
-    -webkit-mask-size: 100%;
-    background-color: transparent;
-    background-size: 100%; }
-    .message-container .expiring .timer, .message-container .expiring .timer .sand, .message-container .expiring .timer:before, .message-container .expiring .timer:after,
-    .message-list .expiring .timer,
-    .message-list .expiring .timer .sand,
-    .message-list .expiring .timer:before,
-    .message-list .expiring .timer:after {
-      width: 13px;
-      height: 11px; }
-    .message-container .expiring .timer .sand, .message-container .expiring .timer:before, .message-container .expiring .timer:after,
-    .message-list .expiring .timer .sand,
-    .message-list .expiring .timer:before,
-    .message-list .expiring .timer:after {
-      content: '';
-      display: inline-block;
-      position: absolute;
-      top: 0;
-      left: 0; }
-    .message-container .expiring .timer .sand,
-    .message-list .expiring .timer .sand {
-      background: #999;
-      animation: moveDown linear;
-      animation-fill-mode: forwards; }
-    .message-container .expiring .timer:after,
-    .message-list .expiring .timer:after {
-      -webkit-mask: url("/images/hourglass_empty.svg") no-repeat center;
-      -webkit-mask-size: 100%;
-      background-color: #999; }
-@keyframes moveDown {
-  to {
-    transform: translateY(100%); } }
   .message-container .control .bubble .content,
   .message-list .control .bubble .content {
     font-style: italic; }
@@ -1530,7 +1491,33 @@ li.entry .error-icon-container {
   margin-bottom: 1px; }
   .ios .attachment a {
     border-radius: 15px; }
-
+.ios .hourglass {
+  display: inline-block;
+  position: relative;
+  -webkit-mask: url("/images/hourglass_full.svg") no-repeat center;
+  -webkit-mask-size: 100%;
+  background-color: transparent;
+  background-size: 100%; }
+  .ios .hourglass, .ios .hourglass .sand, .ios .hourglass:before, .ios .hourglass:after {
+    width: 13px;
+    height: 11px; }
+  .ios .hourglass .sand, .ios .hourglass:before, .ios .hourglass:after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+  .ios .hourglass .sand {
+    background: #999;
+    animation: moveDown linear;
+    animation-fill-mode: forwards; }
+  .ios .hourglass:after {
+    -webkit-mask: url("/images/hourglass_empty.svg") no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: #999; }
+@keyframes moveDown {
+  to {
+    transform: translateY(100%); } }
 .android #header {
   background-color: #2090ea;
   color: white;
@@ -1584,6 +1571,60 @@ li.entry .error-icon-container {
   box-shadow: 0 3px 3px -4px black; }
 .android .outgoing .bubble {
   background-color: #f3f3f3; }
+.android .outgoing .hourglass {
+  display: inline-block;
+  position: relative;
+  -webkit-mask: url("/images/hourglass_full.svg") no-repeat center;
+  -webkit-mask-size: 100%;
+  background-color: transparent;
+  background-size: 100%; }
+  .android .outgoing .hourglass, .android .outgoing .hourglass .sand, .android .outgoing .hourglass:before, .android .outgoing .hourglass:after {
+    width: 13px;
+    height: 11px; }
+  .android .outgoing .hourglass .sand, .android .outgoing .hourglass:before, .android .outgoing .hourglass:after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+  .android .outgoing .hourglass .sand {
+    background: #999;
+    animation: moveDown linear;
+    animation-fill-mode: forwards; }
+  .android .outgoing .hourglass:after {
+    -webkit-mask: url("/images/hourglass_empty.svg") no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: #999; }
+@keyframes moveDown {
+  to {
+    transform: translateY(100%); } }
+.android .incoming .hourglass {
+  display: inline-block;
+  position: relative;
+  -webkit-mask: url("/images/hourglass_full.svg") no-repeat center;
+  -webkit-mask-size: 100%;
+  background-color: transparent;
+  background-size: 100%; }
+  .android .incoming .hourglass, .android .incoming .hourglass .sand, .android .incoming .hourglass:before, .android .incoming .hourglass:after {
+    width: 13px;
+    height: 11px; }
+  .android .incoming .hourglass .sand, .android .incoming .hourglass:before, .android .incoming .hourglass:after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+  .android .incoming .hourglass .sand {
+    background: #fff;
+    animation: moveDown linear;
+    animation-fill-mode: forwards; }
+  .android .incoming .hourglass:after {
+    -webkit-mask: url("/images/hourglass_empty.svg") no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: #fff; }
+@keyframes moveDown {
+  to {
+    transform: translateY(100%); } }
 .android .incoming .bubble .sender, .android .incoming .bubble .content, .android .incoming .bubble .body, .android .incoming .bubble .meta, .android .incoming .bubble a {
   color: white; }
   .android .incoming .bubble .sender::selection, .android .incoming .bubble .content::selection, .android .incoming .bubble .body::selection, .android .incoming .bubble .meta::selection, .android .incoming .bubble a::selection {