Restyle error icons, move them outside the bubble

background.html

@@ -304,16 +304,29 @@
   <script type='text/x-tmpl-mustache' id='generic-error'>
     <p>{{ message }}</p>
   </script>
+  <script type='text/x-tmpl-mustache' id='error-icon'>
+    <span class='error-icon'>
+    </span>
+    {{ #message }}
+      <span class='error-message'>{{message}}</span>
+    {{ /message }}
+  </script>
   <script type='text/x-tmpl-mustache' id='contact-detail'>
       <div class='clearfix'>
-        {{ #errors }}
-            <span class='error-icon'>
-              <span class='error-message'>{{message}}</span>
-            </span>
-        {{ /errors }}
         {{> avatar }}
-        <span class='name'>{{ name }}
-        </span>
+        <div class='contact-details'>
+          {{ #errors }}
+              <div class='error-icon-container'>
+                <span class='error-icon'></span>
+              </div>
+          {{ /errors }}
+          <span class='name'>{{ name }}</span>
+          {{ #errors }}
+            {{ #message }}
+              <p class='error-message'>{{message}}</p>
+            {{ /message }}
+          {{ /errors }}
+        </div>
       </div>
   </script>
   <script type='text/x-tmpl-mustache' id='link_to_support'>
@@ -324,11 +337,13 @@
   <script type='text/x-tmpl-mustache' id='key-conflict-dialogue'>
     <h3 class='header'>{{ newIdentity }}</h3>
     <div class='content clearfix'>
-      {{> avatar }}
-      <span class='name'>{{ name }}</span>
-      <button class='resolve'>{{ resolve }}</button>
-      <a href='#' class='hideKeys hide'> {{ hideKeys }} </a>
-      <a href='#' class='showKeys'> {{ showKeys }} </a>
+      <div class='clearfix'>
+        {{> avatar }}
+        <span class='name'>{{ name }}</span>
+        <button class='resolve'>{{ resolve }}</button>
+        <a href='#' class='hideKeys hide'> {{ hideKeys }} </a>
+        <a href='#' class='showKeys'> {{ showKeys }} </a>
+      </div>
       <div class='keys hide'>
         <p>
           {{ message }}

images/warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M2 42h44L24 4 2 42zm24-6h-4v-4h4v4zm0-8h-4v-8h4v8z"/></svg>

js/views/message_view.js

@@ -7,6 +7,13 @@
 
     var URL_REGEX = /(^|[\s\n]|<br\/?>)((?:https?|ftp):\/\/[\-A-Z0-9\u00A0-\uD7FF\uE000-\uFDCF\uFDF0-\uFFFD+\u0026\u2019@#\/%?=()~_|!:,.;]*[\-A-Z0-9+\u0026@#\/%=~()_|])/gi;
 
+    var ErrorIconView = Whisper.View.extend({
+        templateName: 'error-icon',
+        className: 'error-icon-container',
+        render_attributes: function() {
+            return { message: this.model && this.model.message };
+        }
+    });
     var NetworkErrorView = Whisper.View.extend({
         tagName: 'span',
         className: 'hasRetry',
@@ -33,6 +40,7 @@
         },
         events: {
             'click .retry': 'retryMessage',
+            'click .error-icon': 'select',
             'click .timestamp': 'select',
             'click .status': 'select',
             'click .error': 'select'
@@ -78,12 +86,13 @@
         renderErrors: function() {
             var errors = this.model.get('errors');
             if (_.size(errors) > 0) {
-                this.$el.addClass('error');
                 if (this.model.isIncoming()) {
                     this.$('.content').text(this.model.getDescription()).addClass('error-message');
                 }
+                var view = new ErrorIconView({ model: errors[0] });
+                view.render().$el.appendTo(this.$('.bubble'));
             } else {
-                this.$el.removeClass('error');
+                this.$('.error-icon-container').remove();
             }
             if (this.model.hasNetworkError()) {
                 this.$('.meta').prepend(new NetworkErrorView().render().el);

stylesheets/_conversation.scss

@@ -152,50 +152,23 @@
   .contacts .contact-detail {
     padding: 0 36px;
     margin-bottom: 5px;
-  }
 
-  h3 {
-    font-size: 1em;
-    padding: 5px;
-  }
-
-  .error-icon {
-    display: inline-block;
-    width: 18px;
-    height: 18px;
-    background: url('/images/error_red.png') no-repeat center center;
-    vertical-align: middle;
-    position: relative;
-    margin: 9px;
-    float: right;
+    .error-icon-container {
+      float: right;
+    }
 
     .error-message {
-      display: none;
-      position: absolute;
-      background: black;
-      color: white;
-      border-radius: $border-radius;
-      padding: 0.5em;
-      font-weight: normal;
-      bottom: calc(100% + 16px);
-      left: 50%;
-      margin-left: -130px;
-      width: 180px;
-      z-index: 10;
-
-      &:before {
-        left: -10px;
-        display: block;
-        content: '';
-        position: absolute;
-        bottom: -23px;
-        left: calc(50% - 6px + 40px);
-        border: 6px solid transparent;
-        border-top: 18px solid #000000;
-      }
+      margin: 6px 0 0;
+      font-size: small;
+      font-weight: bold;
+      color: red;
     }
 
-    &:hover .error-message { display: block; }
+  }
+
+  h3 {
+    font-size: 1em;
+    padding: 5px;
   }
 
   button.conflict {
@@ -208,6 +181,55 @@
     border: solid 1px #ccc;
   }
 }
+li.entry .error-icon-container {
+  position: absolute;
+  top: 0;
+  left: calc(100% + 5px);
+  height: 100%;
+
+  .error-icon {
+    cursor: pointer;
+    display: block;
+    height: 100%;
+  }
+
+  .error-message {
+    display: none;
+    position: absolute;
+    background: black;
+    color: white;
+    border-radius: $border-radius;
+    padding: 0.5em;
+    font-weight: normal;
+    bottom: calc(50% + 18px);
+    left: -84px;
+    width: 180px;
+    z-index: 10;
+
+    &:before {
+      display: block;
+      content: '';
+      position: absolute;
+      bottom: -16px;
+      left: 50%;
+      border: 6px solid transparent;
+      border-top: 10px solid #000000;
+    }
+  }
+
+  &:hover .error-message { display: inline-block; }
+}
+
+.error-icon {
+  display: inline-block;
+  width: $error-icon-size;
+  height: $error-icon-size;
+  position: relative;
+  @include color-svg('/images/warning.svg', red);
+
+}
+
+
 .group-update {
   font-size: smaller;
 }
@@ -261,7 +283,7 @@
     max-width: 30em;
 
     @media(max-width: $big-avatar-min-width - 1px) {
-      max-width: calc(100% - 45px); // avatar size + padding
+      max-width: calc(100% - 45px - #{$error-icon-size}); // avatar size + padding + error-icon size
     }
 
     .content {
@@ -282,6 +304,7 @@
     font-size: smaller;
     margin-top: 3px;
     float: right;
+    text-align: right;
     line-height: 18px;
 
     .hasRetry + .timestamp {
@@ -374,6 +397,10 @@
   }
 
   .outgoing {
+    .error-icon-container {
+      left: auto;
+      right: calc(100% + 5px);
+    }
 
     .avatar, .bubble {
       float: right;
@@ -431,7 +458,7 @@
     opacity: 0.8;
   }
 
-  .bubble .error-message {
+  .bubble .content.error-message {
     font-style: italic;
   }
 

stylesheets/_global.scss

@@ -303,19 +303,18 @@ $avatar-size: 44px;
   &:last-child::after {
     display: none;
   }
+}
+.contact-details {
+  $left-margin: 8px;
 
-  .contact-details {
-    $left-margin: 8px;
-
-    vertical-align: middle;
-    display: inline-block;
-    margin: 0 0 0 $left-margin;
-    width: calc(100% - #{$avatar-size} - #{$left-margin});
+  vertical-align: middle;
+  display: inline-block;
+  margin: 0 0 0 $left-margin;
+  width: calc(100% - #{$avatar-size} - #{$left-margin} - 4px);
 
-    p {
-      overflow-x: hidden;
-      text-overflow: ellipsis;
-    }
+  p {
+    overflow-x: hidden;
+    text-overflow: ellipsis;
   }
 
   .name {
@@ -333,6 +332,7 @@ $avatar-size: 44px;
   }
 }
 
+
 .recipients-input {
   position: relative;
 

stylesheets/_variables.scss

@@ -42,3 +42,4 @@ $big-avatar-min-width: 900px;
 
 $border-radius: 5px;
 
+$error-icon-size: 24px;

stylesheets/manifest.css

@@ -274,22 +274,23 @@ img.emoji {
     margin-top: 0; }
   .contact:last-child::after {
     display: none; }
-  .contact .contact-details {
-    vertical-align: middle;
-    display: inline-block;
-    margin: 0 0 0 8px;
-    width: calc(100% - 44px - 8px); }
-    .contact .contact-details p {
-      overflow-x: hidden;
-      text-overflow: ellipsis; }
-  .contact .name {
+
+.contact-details {
+  vertical-align: middle;
+  display: inline-block;
+  margin: 0 0 0 8px;
+  width: calc(100% - 44px - 8px - 4px); }
+  .contact-details p {
+    overflow-x: hidden;
+    text-overflow: ellipsis; }
+  .contact-details .name {
     display: block;
     margin: 0;
     font-size: 1em;
     font-weight: 400;
     text-overflow: ellipsis;
     overflow-x: hidden; }
-  .contact .number {
+  .contact-details .number {
     color: #616161;
     font-size: small; }
 
@@ -807,19 +808,34 @@ input.search {
 .message-detail .contacts .contact-detail {
   padding: 0 36px;
   margin-bottom: 5px; }
+  .message-detail .contacts .contact-detail .error-icon-container {
+    float: right; }
+  .message-detail .contacts .contact-detail .error-message {
+    margin: 6px 0 0;
+    font-size: small;
+    font-weight: bold;
+    color: red; }
 .message-detail h3 {
   font-size: 1em;
   padding: 5px; }
-.message-detail .error-icon {
-  display: inline-block;
-  width: 18px;
-  height: 18px;
-  background: url("/images/error_red.png") no-repeat center center;
-  vertical-align: middle;
-  position: relative;
-  margin: 9px;
-  float: right; }
-  .message-detail .error-icon .error-message {
+.message-detail button.conflict {
+  float: right;
+  background: #d00; }
+.message-detail button.cancel {
+  float: right;
+  color: #454545;
+  border: solid 1px #ccc; }
+
+li.entry .error-icon-container {
+  position: absolute;
+  top: 0;
+  left: calc(100% + 5px);
+  height: 100%; }
+  li.entry .error-icon-container .error-icon {
+    cursor: pointer;
+    display: block;
+    height: 100%; }
+  li.entry .error-icon-container .error-message {
     display: none;
     position: absolute;
     background: black;
@@ -827,29 +843,29 @@ input.search {
     border-radius: 5px;
     padding: 0.5em;
     font-weight: normal;
-    bottom: calc(100% + 16px);
-    left: 50%;
-    margin-left: -130px;
+    bottom: calc(50% + 18px);
+    left: -84px;
     width: 180px;
     z-index: 10; }
-    .message-detail .error-icon .error-message:before {
-      left: -10px;
+    li.entry .error-icon-container .error-message:before {
       display: block;
       content: '';
       position: absolute;
-      bottom: -23px;
-      left: calc(50% - 6px + 40px);
+      bottom: -16px;
+      left: 50%;
       border: 6px solid transparent;
-      border-top: 18px solid #000000; }
-  .message-detail .error-icon:hover .error-message {
-    display: block; }
-.message-detail button.conflict {
-  float: right;
-  background: #d00; }
-.message-detail button.cancel {
-  float: right;
-  color: #454545;
-  border: solid 1px #ccc; }
+      border-top: 10px solid #000000; }
+  li.entry .error-icon-container:hover .error-message {
+    display: inline-block; }
+
+.error-icon {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  position: relative;
+  -webkit-mask: url("/images/warning.svg") no-repeat center;
+  -webkit-mask-size: 100%;
+  background-color: red; }
 
 .group-update {
   font-size: smaller; }
@@ -899,7 +915,7 @@ input.search {
     @media (max-width: 899px) {
       .message-container .bubble,
       .message-list .bubble {
-        max-width: calc(100% - 45px); } }
+        max-width: calc(100% - 45px - 24px); } }
     .message-container .bubble .content,
     .message-list .bubble .content {
       -webkit-user-select: text;
@@ -915,6 +931,7 @@ input.search {
     font-size: smaller;
     margin-top: 3px;
     float: right;
+    text-align: right;
     line-height: 18px; }
     .message-container .meta .hasRetry + .timestamp:before,
     .message-list .meta .hasRetry + .timestamp:before {
@@ -999,6 +1016,10 @@ input.search {
     .message-list .incoming .bubble .attachments a,
     .message-list .incoming .bubble .content a {
       color: #f3f3f3; }
+  .message-container .outgoing .error-icon-container,
+  .message-list .outgoing .error-icon-container {
+    left: auto;
+    right: calc(100% + 5px); }
   .message-container .outgoing .avatar, .message-container .outgoing .bubble,
   .message-list .outgoing .avatar,
   .message-list .outgoing .bubble {
@@ -1041,8 +1062,8 @@ input.search {
     font: small;
     font-style: italic;
     opacity: 0.8; }
-  .message-container .bubble .error-message,
-  .message-list .bubble .error-message {
+  .message-container .bubble .content.error-message,
+  .message-list .bubble .content.error-message {
     font-style: italic; }
   .message-container .key-conflict,
   .message-list .key-conflict {