From ad66da9fb59acb1ec7d932126c993761e5a68bac Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Sun, 14 Feb 2016 16:46:28 -0800
Subject: [PATCH] Move identity conflicts to top of message detail

Also restyle them as with network errors

// FREEBIE
---
 _locales/en/messages.json       |  3 +++
 background.html                 |  9 ++++++++-
 js/views/message_detail_view.js | 13 +++++++++++--
 stylesheets/_conversation.scss  |  5 +----
 stylesheets/manifest.css        |  6 ++++--
 5 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 03e78311..8eb677a3 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -17,6 +17,9 @@
     "verify": {
       "message": "Verify"
     },
+    "newIdentity": {
+      "message": "New Identity"
+    },
     "outgoingKeyConflict": {
       "message": "This contact's identity key has changed. Click to process and display."
     },
diff --git a/background.html b/background.html
index 629e1d56..b134a1a0 100644
--- a/background.html
+++ b/background.html
@@ -173,10 +173,17 @@
     <div class='container'>
       {{ #hasRetry }}
         <div class='hasRetry clearfix'>
-          <div class='retryMessage'>{{ failedToSend }}</div>
+          <h3 class='retryMessage'>{{ failedToSend }}</h3>
           <button class='retry'>{{ resend }}</button>
         </div>
       {{ /hasRetry }}
+      {{ #hasConflict }}
+        <div class='hasConflict clearfix'>
+          <h3>{{ hasConflict }}</h3>
+          <div class='conflicts'>
+          </div>
+        </div>
+      {{ /hasConflict }}
       <div class='message-container'></div>
       <div class='info'>
         <table>
diff --git a/js/views/message_detail_view.js b/js/views/message_detail_view.js
index 6cf8355c..58a492a8 100644
--- a/js/views/message_detail_view.js
+++ b/js/views/message_detail_view.js
@@ -101,7 +101,11 @@
                 conflict: conflict,
                 errors: this.errors[contact.id]
             }).render();
-            this.$('.contacts').append(v.el);
+            if (conflict) {
+                this.$('.conflicts').append(v.el);
+            } else {
+                this.$('.contacts').append(v.el);
+            }
         },
         render: function() {
             this.errors = _.groupBy(this.model.get('errors'), 'number');
@@ -110,6 +114,10 @@
                         e.name === 'OutgoingMessageError' ||
                         e.name === 'SendMessageNetworkError');
             });
+            var hasConflict = false;
+            if (this.model.hasKeyConflicts()) {
+                hasConflict = i18n('newIdentity');
+            }
             this.$el.html(Mustache.render(_.result(this, 'template', ''), {
                 sent_at     : moment(this.model.get('sent_at')).toString(),
                 received_at : this.model.isIncoming() ? moment(this.model.get('received_at')).toString() : null,
@@ -121,7 +129,8 @@
                 resend      : i18n('resend'),
                 failedToSend: i18n('failedToSend'),
                 errorLabel  : i18n('error'),
-                hasRetry    : hasRetry
+                hasRetry    : hasRetry,
+                hasConflict : hasConflict
             }));
             this.view.$el.prependTo(this.$('.message-container'));
 
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 8d6264ac..225b9ade 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -94,16 +94,13 @@
     height: calc(100% - (#{$header-height} + 4px));
   }
 
+  .hasConflict,
   .hasRetry {
     background: #F3F3A7;
     padding: 10px 20px;
     margin: 0 5px;
     border-radius: 5px;
 
-    .retryMessage {
-      font-weight: bold;
-    }
-
     button {
       margin: 5px;
       background: $blue;
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 16ad8909..c90c4514 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -649,13 +649,13 @@ input.search {
 
 .message-detail .container {
   height: calc(100% - (36px + 4px)); }
+.message-detail .hasConflict,
 .message-detail .hasRetry {
   background: #F3F3A7;
   padding: 10px 20px;
   margin: 0 5px;
   border-radius: 5px; }
-  .message-detail .hasRetry .retryMessage {
-    font-weight: bold; }
+  .message-detail .hasConflict button,
   .message-detail .hasRetry button {
     margin: 5px;
     background: #2090ea;
@@ -665,8 +665,10 @@ input.search {
     color: white;
     padding: 0.5em;
     font-weight: bold; }
+    .message-detail .hasConflict button span,
     .message-detail .hasRetry button span {
       vertical-align: middle; }
+    .message-detail .hasConflict button:before,
     .message-detail .hasRetry button:before {
       content: '';
       display: inline-block;