Show three dot icon next to message on hover

But only if it doesn't have an error.

Also: reformatted message template in legacy_templates.js to match what
is in background.html for easier diffing.

background.html

@@ -291,6 +291,11 @@
             <span class='status hide'></span>
             <span class='timer'></span>
           </div>
+          {{ #hoverIcon }}
+            <div class='hover-icon-container'>
+              <span class='dots-horizontal-icon'></span>
+            </div>
+          {{ /hoverIcon }}
       </div>
   </script>
   <script type='text/x-tmpl-mustache' id='hourglass'>

images/dots-horizontal.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z" /></svg>

js/views/message_view.js

@@ -468,6 +468,9 @@
     },
     render() {
       const contact = this.model.isIncoming() ? this.model.getContact() : null;
+      const errors = this.model.get('errors');
+      const hasErrors = errors && errors.length > 0;
+
       this.$el.html(Mustache.render(_.result(this, 'template', ''), {
         message: this.model.get('body'),
         timestamp: this.model.get('sent_at'),
@@ -475,6 +478,7 @@
         avatar: (contact && contact.getAvatar()),
         profileName: (contact && contact.getProfileName()),
         innerBubbleClasses: this.isImageWithoutCaption() ? '' : 'with-tail',
+        hoverIcon: !hasErrors,
       }, this.render_partials()));
       this.timeStampView.setElement(this.$('.timestamp'));
       this.timeStampView.update();

stylesheets/_conversation.scss

@@ -353,6 +353,25 @@ li.entry .error-icon-container {
 
   &:hover .error-message { display: inline-block; }
 }
+li.entry .hover-icon-container {
+  position: absolute;
+  top: 0;
+  left: calc(100% + 5px);
+  height: 100%;
+
+  visibility: hidden;
+
+  .dots-horizontal-icon {
+    display: block;
+    height: 100%;
+  }
+
+  cursor: pointer;
+}
+
+li.entry:hover .hover-icon-container {
+  visibility: visible;
+}
 
 .error-icon {
   display: inline-block;
@@ -362,6 +381,18 @@ li.entry .error-icon-container {
   @include color-svg('../images/warning.svg', red);
 }
 
+.dots-horizontal-icon {
+  display: inline-block;
+  width: $error-icon-size;
+  height: $error-icon-size;
+  position: relative;
+  @include color-svg('../images/dots-horizontal.svg', gray);
+
+  &:hover {
+    @include color-svg('../images/dots-horizontal.svg', black);
+  }
+}
+
 .group {
   li.entry .unregistered-user-error {
     display: none;
@@ -667,6 +698,10 @@ span.status {
       left: auto;
       right: calc(100% + 5px);
     }
+    .hover-icon-container {
+      left: auto;
+      right: calc(100% + 5px);
+    }
 
     .avatar, .bubble {
       float: right;

test/index.html

@@ -226,6 +226,11 @@
             <span class='status hide'></span>
             <span class='timer'></span>
           </div>
+          {{ #hoverIcon }}
+            <div class='hover-icon-container'>
+              <span class='dots-horizontal-icon'></span>
+            </div>
+          {{ /hoverIcon }}
       </div>
   </script>
   <script type='text/x-tmpl-mustache' id='hourglass'>

test/styleguide/legacy_templates.js

@@ -24,29 +24,34 @@ window.Whisper.View.Templates = {
     </span>
   `,
   message: `
-    {{> avatar }}
+      {{> avatar }}
-    <div class='bubble {{ avatar.color }}'>
+      <div class='bubble {{ avatar.color }}'>
-        <div class='sender' dir='auto'>
+          <div class='sender' dir='auto'>
-          {{ sender }}
+            {{ sender }}
-          {{ #profileName }}
+            {{ #profileName }}
-            <span class='profileName'>{{ profileName }} </span>
+              <span class='profileName'>{{ profileName }} </span>
-          {{ /profileName }}
+            {{ /profileName }}
-        </div>
+          </div>
-        <div class='tail-wrapper {{ innerBubbleClasses }}'>
+          <div class='tail-wrapper {{ innerBubbleClasses }}'>
-          <div class='inner-bubble'>
+            <div class='inner-bubble'>
-            <div class='quote-wrapper'></div>
+              <div class='quote-wrapper'></div>
-            <div class='attachments'></div>
+              <div class='attachments'></div>
-            <div class='content' dir='auto'>
+              <div class='content' dir='auto'>
-              {{ #message }}<div class='body'>{{ message }}</div>{{ /message }}
+                {{ #message }}<div class='body'>{{ message }}</div>{{ /message }}
+              </div>
             </div>
           </div>
-        </div>
+          <div class='meta'>
-        <div class='meta'>
+            <span class='timestamp' data-timestamp={{ timestamp }}></span>
-          <span class='timestamp' data-timestamp={{ timestamp }}></span>
+            <span class='status hide'></span>
-          <span class='status hide'></span>
+            <span class='timer'></span>
-          <span class='timer'></span>
+          </div>
-        </div>
+          {{ #hoverIcon }}
-    </div>
+            <div class='hover-icon-container'>
+              <span class='dots-horizontal-icon'></span>
+            </div>
+          {{ /hoverIcon }}
+      </div>
   `,
   hourglass: `
     <span class='hourglass'><span class='sand'></span></span>