Add clock svg style

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 = new this.itemView({model: model}).render();
+            var view;
+            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.
-                    this.$el.append(view.el);
-                    this.$el.scrollTop(this.el.scrollHeight); // TODO: Avoid scrolling if user has manually scrolled up?
-                    this.measureScrollPosition();
-                } else {
-                    // add to the top.
-                    this.measureScrollPosition();
-                    this.$el.prepend(view.el);
-                    this.scrollToBottomIfNeeded();
-                }
+            }
+            if (this.collection.indexOf(model) === this.collection.length - 1) {
+                // add to the bottom.
+                this.$el.append(view.el);
+                this.$el.scrollTop(this.el.scrollHeight); // TODO: Avoid scrolling if user has manually scrolled up?
+                this.measureScrollPosition();
+            } else {
+                // add to the top.
+                this.measureScrollPosition();
+                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',