From 30957341e45589b717d274952142ad47c71758be Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@signal.org>
Date: Mon, 16 Apr 2018 18:46:36 -0700
Subject: [PATCH] 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                     |  5 +++
 images/dots-horizontal.svg          |  1 +
 js/views/message_view.js            |  4 +++
 stylesheets/_conversation.scss      | 35 +++++++++++++++++++++
 test/index.html                     |  5 +++
 test/styleguide/legacy_templates.js | 47 ++++++++++++++++-------------
 6 files changed, 76 insertions(+), 21 deletions(-)
 create mode 100644 images/dots-horizontal.svg

diff --git a/background.html b/background.html
index 29ff71e2c..418cb8665 100644
--- a/background.html
+++ b/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'>
diff --git a/images/dots-horizontal.svg b/images/dots-horizontal.svg
new file mode 100644
index 000000000..35e5a0ab6
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/js/views/message_view.js b/js/views/message_view.js
index 760d7cfe7..824da362f 100644
--- a/js/views/message_view.js
+++ b/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();
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 16a4dfd5b..d534832d5 100644
--- a/stylesheets/_conversation.scss
+++ b/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;
diff --git a/test/index.html b/test/index.html
index 270782504..22f049276 100644
--- a/test/index.html
+++ b/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'>
diff --git a/test/styleguide/legacy_templates.js b/test/styleguide/legacy_templates.js
index 63e3c0e00..97a5bb6e3 100644
--- a/test/styleguide/legacy_templates.js
+++ b/test/styleguide/legacy_templates.js
@@ -24,29 +24,34 @@ window.Whisper.View.Templates = {
     </span>
   `,
   message: `
-    {{> avatar }}
-    <div class='bubble {{ avatar.color }}'>
-        <div class='sender' dir='auto'>
-          {{ sender }}
-          {{ #profileName }}
-            <span class='profileName'>{{ profileName }} </span>
-          {{ /profileName }}
-        </div>
-        <div class='tail-wrapper {{ innerBubbleClasses }}'>
-          <div class='inner-bubble'>
-            <div class='quote-wrapper'></div>
-            <div class='attachments'></div>
-            <div class='content' dir='auto'>
-              {{ #message }}<div class='body'>{{ message }}</div>{{ /message }}
+      {{> avatar }}
+      <div class='bubble {{ avatar.color }}'>
+          <div class='sender' dir='auto'>
+            {{ sender }}
+            {{ #profileName }}
+              <span class='profileName'>{{ profileName }} </span>
+            {{ /profileName }}
+          </div>
+          <div class='tail-wrapper {{ innerBubbleClasses }}'>
+            <div class='inner-bubble'>
+              <div class='quote-wrapper'></div>
+              <div class='attachments'></div>
+              <div class='content' dir='auto'>
+                {{ #message }}<div class='body'>{{ message }}</div>{{ /message }}
+              </div>
             </div>
           </div>
-        </div>
-        <div class='meta'>
-          <span class='timestamp' data-timestamp={{ timestamp }}></span>
-          <span class='status hide'></span>
-          <span class='timer'></span>
-        </div>
-    </div>
+          <div class='meta'>
+            <span class='timestamp' data-timestamp={{ timestamp }}></span>
+            <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>
   `,
   hourglass: `
     <span class='hourglass'><span class='sand'></span></span>