Refactor Contact and Conflict views

Untangle these two views into their component parts, consolidating all
the key conflict logic in the key conflict view. Contact view now simply
renders basic contact info and miscellaneous errors but not conflicts or
message errors.

// FREEBIE

background.html

@@ -276,9 +276,6 @@
   </script>
   <script type='text/x-tmpl-mustache' id='contact-detail'>
       <div class='clearfix'>
-        {{ #conflict }}
-          <h3>{{ newIdentity }}</h3>
-        {{ /conflict }}
         {{ #errors }}
             <span class='error-icon'>
               <span class='error-message'>{{message}}</span>
@@ -286,19 +283,23 @@
         {{ /errors }}
         {{> avatar }}
         <span class='name'>{{ name }}
-        {{ #conflict }}
-            <button class='conflict'><span>{{ verify }}</span></button>
-            <button class='cancel hide'><span>{{ cancel }}</span></button>
-        {{ /conflict }}
         </span>
       </div>
   </script>
   <script type='text/x-tmpl-mustache' id='key-conflict-dialogue'>
-    <div class='content'>
+    <div class='clearfix'>
+      <h3>{{ newIdentity }}</h3>
+      {{> avatar }}
+      <span class='name'>{{ name }}
+      <button class='conflict'><span>{{ verify }}</span></button>
+      <button class='cancel hide'><span>{{ cancel }}</span></button>
+      </span>
+    </div>
+    <div class='content hide'>
       <p> {{ message }} </p>
       <p> {{{ verifyContact }}} </p>
+      <p><button class='resolve'>{{ resolve }}</button></p>
     </div>
-    <button class='resolve'>{{ resolve }}</button>
   </script>
   <script type='text/x-tmpl-mustache' id='window-controls'>
     <button class='minimize'>&minus;</button>

js/views/key_conflict_dialogue_view.js

@@ -7,14 +7,18 @@
     window.Whisper = window.Whisper || {};
 
     Whisper.KeyConflictDialogueView = Whisper.View.extend({
-        className: 'key-conflict-dialogue clearfix',
         templateName: 'key-conflict-dialogue',
+        className: 'key-conflict-dialogue clearfix',
         initialize: function(options) {
+            this.contact = options.contact;
+            this.conflict = options.conflict;
             this.conversation = options.conversation;
         },
         events: {
-            'click .verify': 'triggerVerify',
+            'click .conflict': 'showDialog',
-            'click .resolve': 'resolve'
+            'click .cancel'  : 'cancel',
+            'click .verify'  : 'triggerVerify',
+            'click .resolve' : 'resolve'
         },
         triggerVerify: function() {
             this.trigger('verify', {identityKey: this.model.identityKey});
@@ -24,10 +28,24 @@
             this.remove();
             this.conversation.resolveConflicts(this.model);
         },
+        showDialog: function() {
+            this.$('.conflict').hide();
+            this.$('.cancel, .content').show();
+        },
+        cancel: function() {
+            this.$('.cancel, .content').hide();
+            this.$('.conflict').show();
+        },
         render_attributes: function() {
             return {
-                message: i18n('identityChanged'),
+                name         : this.contact.getTitle(),
-                resolve: i18n('acceptNewKey'),
+                avatar       : this.contact.getAvatar(),
+                conflict     : this.conflict,
+                verify       : i18n('verify'),
+                cancel       : i18n('cancel'),
+                newIdentity  : i18n('newIdentity'),
+                message      : i18n('identityChanged'),
+                resolve      : i18n('acceptNewKey'),
                 verifyContact: i18n('verifyContact')
             };
         }

js/views/message_detail_view.js

@@ -18,29 +18,11 @@
             });
 
         },
-        events: {
-            'click .conflict': 'triggerConflict',
-            'click .cancel'  : 'cancel'
-        },
-        triggerConflict: function() {
-            this.$el.trigger('conflict', {conflict: this.conflict, el: this.el});
-            this.$('.cancel').show();
-            this.$('.conflict').hide();
-        },
-        cancel: function() {
-            this.$('.key-conflict-dialogue').remove();
-            this.$('.cancel').hide();
-            this.$('.conflict').show();
-        },
         render_attributes: function() {
             return {
                 name     : this.model.getTitle(),
                 avatar   : this.model.getAvatar(),
-                conflict : this.conflict,
+                errors   : this.errors
-                errors   : this.errors,
-                verify   : i18n('verify'),
-                cancel   : i18n('cancel'),
-                newIdentity: i18n('newIdentity')
             };
         }
     });
@@ -57,7 +39,6 @@
         },
         events: {
             'click .back': 'goBack',
-            'conflict': 'conflictDialogue',
             'click .retry': 'retryMessage',
         },
         goBack: function() {
@@ -84,19 +65,6 @@
                 return this.conversation.contactCollection.models;
             }
         },
-        conflictDialogue: function(e, data) {
-            var view = new Whisper.KeyConflictDialogueView({
-                model: data.conflict,
-                conversation: this.conversation
-            });
-            view.render().$el.appendTo(data.el);
-            this.listenTo(view, 'verify', function(data) {
-                this.verify(data.identityKey);
-            });
-            this.listenTo(view, 'resolve', function() {
-                this.render();
-            });
-        },
         retryMessage: function() {
             var retrys = _.filter(this.model.get('errors'), function(e) {
                 return (e.name === 'MessageError' ||
@@ -108,18 +76,33 @@
             }.bind(this));
         },
         renderContact: function(contact) {
-            var conflict = this.model.getKeyConflict(contact.id);
+            var view = new ContactView({
-            var v = new ContactView({
                 model: contact,
-                conflict: conflict,
                 errors: this.errors[contact.id]
             }).render();
+            this.$('.contacts').append(view.el);
+
+            var conflict = this.model.getKeyConflict(contact.id);
             if (conflict) {
-                this.$('.conflicts').append(v.el);
+                this.renderConflict(contact, conflict);
-            } else {
-                this.$('.contacts').append(v.el);
             }
         },
+        renderConflict: function(contact, conflict) {
+            var view = new Whisper.KeyConflictDialogueView({
+                model: conflict,
+                contact: contact,
+                conversation: this.conversation
+            }).render();
+            this.$('.conflicts').append(view.el);
+            this.listenTo(view, 'verify', function(data) {
+                this.verify(conflict.identityKey);
+            });
+            /*
+            this.listenTo(view, 'resolve', function() {
+                this.render();
+            });
+            */
+        },
         render: function() {
             this.errors = _.groupBy(this.model.get('errors'), 'number');
             var hasRetry = _.find(this.model.get('errors'), function(e) {

stylesheets/_conversation.scss

@@ -94,8 +94,13 @@
     height: calc(100% - (#{$header-height} + 4px));
   }
 
-  .hasConflict,
+  .key-conflict-dialogue,
   .hasRetry {
+    background: #F3F3A7;
+    border-radius: 5px;
+    padding: 1em;
+    margin: 1em;
+
     button {
       outline: none;
       border: none;
@@ -110,13 +115,7 @@
       }
     }
   }
-  .conflicts .contact-detail,
+
-  .hasRetry {
-    background: #F3F3A7;
-    border-radius: 5px;
-    padding: 1em;
-    margin: 1em;
-  }
   .hasRetry {
     padding: 10px 20px;
     button {
@@ -135,6 +134,21 @@
     }
   }
 
+  .key-conflict-dialogue {
+    .content p {
+      max-width: 40em;
+      margin: 1em  auto;
+    }
+    .verify {
+      color: $blue;
+      text-decoration: underline;
+      cursor: pointer;
+    }
+    .resolve {
+      background: $blue;
+    }
+  }
+
   .message-container {
     background: white;
     padding: 1em 0;
@@ -176,34 +190,9 @@
     }
   }
 
-  .conflicts .contact-detail {
-    background: #F3F3A7;
-    padding: 1em;
-    border-radius: 10px;
-  }
   .contacts .contact-detail {
     padding: 0 36px;
-  }
-  .contact-detail {
     margin-bottom: 5px;
-
-    .key-conflict-dialogue {
-      .content {
-        max-width: 40em;
-        margin: 0 auto;
-      }
-      .verify {
-        color: $blue;
-        text-decoration: underline;
-        cursor: pointer;
-      }
-
-      button {
-        float: right;
-        background: $blue;
-        margin: 0 0 10px 10px;
-      }
-    }
   }
 
   h3 {

stylesheets/manifest.css

@@ -649,24 +649,24 @@ input.search {
 
 .message-detail .container {
   height: calc(100% - (36px + 4px)); }
-.message-detail .hasConflict button,
+.message-detail .key-conflict-dialogue,
-.message-detail .hasRetry button {
-  outline: none;
-  border: none;
-  border-radius: 5px;
-  color: white;
-  padding: 0.5em 1em;
-  font-weight: bold;
-  line-height: 18px; }
-  .message-detail .hasConflict button span,
-  .message-detail .hasRetry button span {
-    vertical-align: middle; }
-.message-detail .conflicts .contact-detail,
 .message-detail .hasRetry {
   background: #F3F3A7;
   border-radius: 5px;
   padding: 1em;
   margin: 1em; }
+  .message-detail .key-conflict-dialogue button,
+  .message-detail .hasRetry button {
+    outline: none;
+    border: none;
+    border-radius: 5px;
+    color: white;
+    padding: 0.5em 1em;
+    font-weight: bold;
+    line-height: 18px; }
+    .message-detail .key-conflict-dialogue button span,
+    .message-detail .hasRetry button span {
+      vertical-align: middle; }
 .message-detail .hasRetry {
   padding: 10px 20px; }
   .message-detail .hasRetry button {
@@ -680,6 +680,15 @@ input.search {
       height: 18px;
       background: url("/images/refresh.png") no-repeat center center;
       background-size: 100%; }
+.message-detail .key-conflict-dialogue .content p {
+  max-width: 40em;
+  margin: 1em  auto; }
+.message-detail .key-conflict-dialogue .verify {
+  color: #2090ea;
+  text-decoration: underline;
+  cursor: pointer; }
+.message-detail .key-conflict-dialogue .resolve {
+  background: #2090ea; }
 .message-detail .message-container {
   background: white;
   padding: 1em 0; }
@@ -707,25 +716,9 @@ input.search {
       height: 18px;
       background: url("/images/refresh.png") no-repeat center center;
       background-size: 100%; }
-.message-detail .conflicts .contact-detail {
-  background: #F3F3A7;
-  padding: 1em;
-  border-radius: 10px; }
 .message-detail .contacts .contact-detail {
-  padding: 0 36px; }
+  padding: 0 36px;
-.message-detail .contact-detail {
   margin-bottom: 5px; }
-  .message-detail .contact-detail .key-conflict-dialogue .content {
-    max-width: 40em;
-    margin: 0 auto; }
-  .message-detail .contact-detail .key-conflict-dialogue .verify {
-    color: #2090ea;
-    text-decoration: underline;
-    cursor: pointer; }
-  .message-detail .contact-detail .key-conflict-dialogue button {
-    float: right;
-    background: #2090ea;
-    margin: 0 0 10px 10px; }
 .message-detail h3 {
   font-size: 1em;
   padding: 5px; }