From 4ab2e25df61d7b0f06949365fd741a6272f86344 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Wed, 17 Feb 2016 11:59:20 -0800
Subject: [PATCH] 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                        | 19 ++++----
 js/views/key_conflict_dialogue_view.js | 28 +++++++++---
 js/views/message_detail_view.js        | 61 ++++++++++----------------
 stylesheets/_conversation.scss         | 55 ++++++++++-------------
 stylesheets/manifest.css               | 53 ++++++++++------------
 5 files changed, 100 insertions(+), 116 deletions(-)

diff --git a/background.html b/background.html
index 35b858cf..a8568263 100644
--- a/background.html
+++ b/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>
diff --git a/js/views/key_conflict_dialogue_view.js b/js/views/key_conflict_dialogue_view.js
index f4044ffa..c0ebd4c9 100644
--- a/js/views/key_conflict_dialogue_view.js
+++ b/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 .resolve': 'resolve'
+            'click .conflict': 'showDialog',
+            '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'),
-                resolve: i18n('acceptNewKey'),
+                name         : this.contact.getTitle(),
+                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')
             };
         }
diff --git a/js/views/message_detail_view.js b/js/views/message_detail_view.js
index 17284dc7..7c31145b 100644
--- a/js/views/message_detail_view.js
+++ b/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,
-                verify   : i18n('verify'),
-                cancel   : i18n('cancel'),
-                newIdentity: i18n('newIdentity')
+                errors   : this.errors
             };
         }
     });
@@ -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 v = new ContactView({
+            var view = 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);
-            } else {
-                this.$('.contacts').append(v.el);
+                this.renderConflict(contact, conflict);
             }
         },
+        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) {
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index e52fa4c8..5f0f558c 100644
--- a/stylesheets/_conversation.scss
+++ b/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 {
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 47401e64..f9c9613e 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -649,24 +649,24 @@ input.search {
 
 .message-detail .container {
   height: calc(100% - (36px + 4px)); }
-.message-detail .hasConflict 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 .hasConflict button span,
-  .message-detail .hasRetry button span {
-    vertical-align: middle; }
-.message-detail .conflicts .contact-detail,
+.message-detail .key-conflict-dialogue,
 .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; }
-.message-detail .contact-detail {
+  padding: 0 36px;
   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; }