From 97c3d5fce3ee5c905d5479a7e0a908f85357ba83 Mon Sep 17 00:00:00 2001
From: cPhost <priyank3219@gmail.com>
Date: Thu, 7 Dec 2017 09:47:23 -0500
Subject: [PATCH] user profiles: add tooltip for too long email.

---
 static/js/popovers.js                         |  9 ++++
 static/styles/zulip.css                       | 46 +++++++++++++++++++
 .../user_info_popover_content.handlebars      |  7 ++-
 3 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/static/js/popovers.js b/static/js/popovers.js
index ac3c4df871..f82ce8f15c 100644
--- a/static/js/popovers.js
+++ b/static/js/popovers.js
@@ -477,6 +477,15 @@ exports.register_click_handlers = function () {
         current_user_sidebar_user_id = user_id;
         current_user_sidebar_popover = target.data('popover');
 
+        $('.my_email').hover(function () {
+            var tooltip_holder = $(this).find('div');
+
+            if (this.offsetWidth < this.scrollWidth) {
+                tooltip_holder.addClass('display-tooltip');
+            } else {
+                tooltip_holder.removeClass('display-tooltip');
+            }
+        });
     });
 
     $('body').on('click', '.respond_button', function (e) {
diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index 40721e210f..2498d4aba4 100644
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@@ -2649,3 +2649,49 @@ button.topic_edit_cancel {
     -webkit-user-select: none;
     -ms-user-select: none;
 }
+
+.my_email {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.my_email .tooltip_holder {
+    display: none;
+    position: absolute;
+    left: 50%;
+}
+
+.display-tooltip {
+    display: block !important;
+}
+
+.email_tooltip {
+    visibility: hidden;
+    opacity: 0;
+    position: relative;
+    padding: 5px 8px;
+    left: -50%;
+    top: 10px;
+    border-radius: 6px;
+    background-color: #4c4c4c;
+    color: #fff;
+    transition: visibility 0.2s ease-out, opacity 0.2s linear;
+}
+
+.email_tooltip::after {
+    content: "";
+    position: absolute;
+    top: -47%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 7px;
+    border-style: solid;
+    border-color: transparent;
+    border-bottom: #4c4c4c solid 7px;
+}
+
+.my_email:hover .email_tooltip {
+    visibility: visible;
+    opacity: 1;
+}
diff --git a/static/templates/user_info_popover_content.handlebars b/static/templates/user_info_popover_content.handlebars
index f3b649cc6c..0d9b0aaa30 100644
--- a/static/templates/user_info_popover_content.handlebars
+++ b/static/templates/user_info_popover_content.handlebars
@@ -13,7 +13,12 @@
         </li>
 
         {{#if is_active }}
-        <li class='my_email'>{{user_email}}</li>
+        <li class='my_email'>
+            {{ user_email }}
+            <div class="tooltip_holder">
+                <span class="email_tooltip">{{ user_email }}</span>
+            </div>
+        </li>
         {{else}}
         <li class='my_email half-opacity italic'>{{#tr this}}(This user has been deactivated){{/tr}}</li>
         {{/if}}