Add clock svg style

_locales/en/messages.json

@@ -346,5 +346,19 @@
     "unblockToSend": {
       "message": "Unblock this contact to send a message.",
       "description": "Brief message shown when trying to message a blocked number"
+    },
+    "changedTheTimer": {
+      "message": "$name$ set the timer to $time$.",
+      "description": "Message displayed when someone changes the message expiration timer in a conversation.",
+      "placeholders": {
+        "name": {
+          "content": "$1",
+          "example": "Bob"
+        },
+        "time": {
+          "content": "$2",
+          "example": "10m"
+        }
+      }
     }
 }

background.html

@@ -164,6 +164,9 @@
   <script type='text/x-tmpl-mustache' id='hourglass'>
       <span class='hourglass'><span class='sand'></span></span>
   </script>
+  <script type='text/x-tmpl-mustache' id='expirationTimerUpdate'>
+    <span class='content'>{{ content }}</span>
+  </script>
   <script type='text/x-tmpl-mustache' id='new-group-update'>
       <div class='conversation-header'>
         <button class='back'></button>

images/clock.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M30 2H18v4h12V2zm-8 26h4V16h-4v12zm16.05-13.23l2.85-2.85c-.86-1.03-1.8-1.97-2.83-2.83l-2.85 2.85C32.15 9.48 28.24 8 23.99 8 14.04 8 6 16.06 6 26s8.04 18 17.99 18S42 35.94 42 26c0-4.25-1.48-8.15-3.95-11.23zM24 40c-7.73 0-14-6.27-14-14s6.27-14 14-14 14 6.27 14 14-6.27 14-14 14z"/></svg>

js/models/conversations.js

@@ -166,6 +166,21 @@
         }.bind(this));
     },
 
+    addExpirationTimerUpdate: function(source, time) {
+        var now = Date.now();
+        var message = this.messageCollection.add({
+            conversationId : this.id,
+            type           : 'expirationTimerUpdate',
+            sent_at        : now,
+            received_at    : now,
+            timerUpdate    : {
+              expireTimer    : time,
+              source         : source
+            }
+        });
+        message.save();
+    },
+
     isSearchable: function() {
         return !this.get('left') || !!this.get('lastMessage');
     },

js/models/messages.js

@@ -126,6 +126,15 @@
             }
             return c;
         },
+        getModelForExpirationTimerUpdate: function() {
+            var id = this.get('timerUpdate').source;
+            var c = ConversationController.get(id);
+            if (!c) {
+                c = ConversationController.create({ id: id, type: 'private' });
+                c.fetch();
+            }
+            return c;
+        },
         isOutgoing: function() {
             return this.get('type') === 'outgoing';
         },

js/views/message_list_view.js

@@ -43,21 +43,24 @@
             this.$el.scrollTop(this.el.scrollHeight - this.bottomOffset);
         },
         addOne: function(model) {
-            if (this.itemView) {
+            var view;
-                var view = new this.itemView({model: model}).render();
+            if (model.get('type') === 'expirationTimerUpdate') {
+                view = new Whisper.ExpirationTimerUpdateView({model: model}).render();
+            } else {
+                view = new this.itemView({model: model}).render();
                 this.listenTo(view, 'beforeChangeHeight', this.measureScrollPosition);
                 this.listenTo(view, 'afterChangeHeight', this.scrollToBottomIfNeeded);
-                if (this.collection.indexOf(model) === this.collection.length - 1) {
+            }
-                    // add to the bottom.
+            if (this.collection.indexOf(model) === this.collection.length - 1) {
-                    this.$el.append(view.el);
+                // add to the bottom.
-                    this.$el.scrollTop(this.el.scrollHeight); // TODO: Avoid scrolling if user has manually scrolled up?
+                this.$el.append(view.el);
-                    this.measureScrollPosition();
+                this.$el.scrollTop(this.el.scrollHeight); // TODO: Avoid scrolling if user has manually scrolled up?
-                } else {
+                this.measureScrollPosition();
-                    // add to the top.
+            } else {
-                    this.measureScrollPosition();
+                // add to the top.
-                    this.$el.prepend(view.el);
+                this.measureScrollPosition();
-                    this.scrollToBottomIfNeeded();
+                this.$el.prepend(view.el);
-                }
+                this.scrollToBottomIfNeeded();
             }
         },
     });

js/views/message_view.js

@@ -43,6 +43,23 @@
         }
     });
 
+    Whisper.ExpirationTimerUpdateView = Whisper.View.extend({
+        tagName:   'li',
+        className: 'expirationTimerUpdate advisory',
+        templateName: 'expirationTimerUpdate',
+        initialize: function() {
+            this.conversation = this.model.getModelForExpirationTimerUpdate();
+            this.listenTo(this.conversation, 'change', this.render);
+        },
+        render_attributes: function() {
+            return {
+              content: i18n('changedTheTimer',
+                            this.conversation.getTitle(),
+                            this.model.get('timerUpdate').time)
+            };
+        }
+    });
+
     Whisper.MessageView = Whisper.View.extend({
         tagName:   'li',
         templateName: 'message',

stylesheets/_conversation.scss

@@ -185,6 +185,16 @@
   .error-icon {
     cursor: pointer;
   }
+
+  .advisory {
+    text-align: center;
+    .content {
+      display: inline-block;
+      padding: 5px 10px;
+      background: #fff5c4;
+      border-radius: $border-radius;
+    }
+  }
 }
 li.entry .error-icon-container {
   position: absolute;

stylesheets/_global.scss

@@ -120,6 +120,9 @@ button.back {
   }
 }
 
+.clock {
+  @include header-icon-black('/images/clock.svg');
+}
 .inactive .menu .hamburger {
   @include header-icon-black('/images/menu.svg');
 }

stylesheets/_themes.scss

@@ -224,5 +224,11 @@ $ios-border-color: rgba(0,0,0,0.1);
       }
     }
   }
+  .clock {
+    @include header-icon-white('/images/clock.svg');
+  }
+  .inactive .clock {
+    @include header-icon-black('/images/clock.svg');
+  }
 }
 

stylesheets/manifest.css

@@ -117,6 +117,15 @@ button.back {
     vertical-align: middle;
     display: table-cell; }
 
+.clock {
+  -webkit-mask: url("/images/clock.svg") no-repeat center;
+  -webkit-mask-size: 100%;
+  background-color: rgba(0, 0, 0, 0.5); }
+  .clock:focus, .clock:hover {
+    -webkit-mask: url("/images/clock.svg") no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: black; }
+
 .inactive .menu .hamburger {
   -webkit-mask: url("/images/menu.svg") no-repeat center;
   -webkit-mask-size: 100%;
@@ -1036,6 +1045,13 @@ input.search {
 
 .message-list .error-icon {
   cursor: pointer; }
+.message-list .advisory {
+  text-align: center; }
+  .message-list .advisory .content {
+    display: inline-block;
+    padding: 5px 10px;
+    background: #fff5c4;
+    border-radius: 5px; }
 
 li.entry .error-icon-container {
   position: absolute;