From 2bb632824e413f4ec78e16ed42af55263d74b381 Mon Sep 17 00:00:00 2001
From: Raghav Jajodia <jajodia.raghav@gmail.com>
Date: Sun, 26 Mar 2017 15:45:50 +0530
Subject: [PATCH] message_edit: Modify css for hover over 'Copy' button.

Replace background-image of copy button with an image
and change color on hover.
---
 static/images/clippy.svg                      | Bin 519 -> 531 bytes
 static/images/clippy_hover.svg                | Bin 0 -> 519 bytes
 static/js/message_edit.js                     |   5 +++--
 static/js/ui_init.js                          |   6 ++++--
 static/styles/zulip.css                       |  14 +++++++-------
 static/templates/message_edit_form.handlebars |   1 +
 6 files changed, 15 insertions(+), 11 deletions(-)
 create mode 100644 static/images/clippy_hover.svg

diff --git a/static/images/clippy.svg b/static/images/clippy.svg
index e1b17035905df02cbdca2fbb8417ca48dc4842e2..f1aac40321659195f46249471a62028f3a6a1cc4 100644
GIT binary patch
delta 22
dcmZo?nanc5n>#HtC&yMv+1%V*X`|O(MgUDy2C@JE

delta 10
RcmbQt(#|r$dt>+>MgSC91H%9S

diff --git a/static/images/clippy_hover.svg b/static/images/clippy_hover.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e1b17035905df02cbdca2fbb8417ca48dc4842e2
GIT binary patch
literal 519
zcmZWm%Wi`(5WMphE8iXbTuc>m>4igk<zA5rM@rhLAgK8IjtxqsR>DR*yYpB$j`KkA
z{W8R<5n351Xt|uH*oaWGpzquDV{Am6ru$P_F3WOQ?BVlkD2-C81Xr92qT~H-iga$o
zt2Tiu4$*j?*|jKV$!?{aHA>pBA?zZ`y^$EYHl1_f1p~xRT~TMOQhBoT6}LE$ktPHP
zW?{%^-efjkOz*(n2LUulMs_oddZ|eVS&_9;*W~;tO_dPm;n%Y3rS+s>AWfZab{(?x
zi0&yP&;l3%K4V4lkkXbErQ~W%y8y~7nUJRXqz4k%=|&7}9+NKKFr1MO;Z%o@w&pD$
n8@=8<A1RV2&i{B=U=NBmp5K(&Fd=`akBL=Kc`A<SC!UHQNql*%

literal 0
HcmV?d00001

diff --git a/static/js/message_edit.js b/static/js/message_edit.js
index 0c05c4ceef..e7e01b4fbf 100644
--- a/static/js/message_edit.js
+++ b/static/js/message_edit.js
@@ -201,11 +201,10 @@ function edit_message(row, raw_content) {
     var message_edit_countdown_timer = row.find('.message_edit_countdown_timer');
     var copy_message = row.find('.copy_message');
 
-    initClipboard(copy_message[0]);
-
     if (editability === editability_types.NO) {
         message_edit_content.prop("readonly", "readonly");
         message_edit_topic.prop("readonly", "readonly");
+        initClipboard(copy_message[0]);
     } else if (editability === editability_types.NO_LONGER) {
         // You can currently only reach this state in non-streams. If that
         // changes (e.g. if we stop allowing topics to be modified forever
@@ -213,10 +212,12 @@ function edit_message(row, raw_content) {
         // row.find('input.message_edit_topic') as well.
         message_edit_content.prop("readonly", "readonly");
         message_edit_countdown_timer.text(i18n.t("View source"));
+        initClipboard(copy_message[0]);
     } else if (editability === editability_types.TOPIC_ONLY) {
         message_edit_content.prop("readonly", "readonly");
         // Hint why you can edit the topic but not the message content
         message_edit_countdown_timer.text(i18n.t("Topic editing only"));
+        initClipboard(copy_message[0]);
     } else if (editability === editability_types.FULL) {
         copy_message.remove();
         composebox_typeahead.initialize_compose_typeahead("#message_edit_content", {emoji: true, stream: true});
diff --git a/static/js/ui_init.js b/static/js/ui_init.js
index 4ad9d6fbbe..b7cccf80d2 100644
--- a/static/js/ui_init.js
+++ b/static/js/ui_init.js
@@ -222,12 +222,14 @@ $(function () {
         $(this).closest(".message_row").find(".copy_message").hide();
     });
 
-    $("body").on("mouseover", ".copy_message", function () {
+    $("body").on("mouseenter", ".copy_message", function () {
+        $(this).find('img#clipboard_image').attr("src", "/static/images/clippy_hover.svg");
         $(this).show();
         $(this).tooltip('show');
     });
 
-    $("body").on("mouseout", ".copy_message", function () {
+    $("body").on("mouseleave", ".copy_message", function () {
+        $(this).find('img#clipboard_image').attr("src", "/static/images/clippy.svg");
         $(this).tooltip('hide');
     });
 
diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index cb6637099c..cf4bee49bd 100644
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@@ -282,15 +282,11 @@ li,
 
 .copy_message,
 .copy_message:focus {
-    background-image: url('/static/images/clippy.svg');
-    background-size: contain;
-    background-repeat: no-repeat;
     background-color: white;
-    background-position: center;
     height: 20px;
     width: 15px;
     padding: 5px 10px;
-    border-radius: 2px;
+    border: none;
     position: relative;
     top: 32px;
     left: -5px;
@@ -298,8 +294,12 @@ li,
     display: block;
 }
 
-.copy_message:hover {
-    background-color: #dadada;
+#clipboard_image {
+    height: inherit;
+    width: inherit;
+    max-width: inherit;
+    margin-top: inherit;
+    margin-left: -7px;
 }
 
 .btn-large {
diff --git a/static/templates/message_edit_form.handlebars b/static/templates/message_edit_form.handlebars
index a995076732..3d7fbe67f5 100644
--- a/static/templates/message_edit_form.handlebars
+++ b/static/templates/message_edit_form.handlebars
@@ -17,6 +17,7 @@
     <div class="control-group no-margin">
         <div class="controls edit-controls">
             <button class="btn pull-right copy_message" data-toggle="tooltip" title="{{t "Copy and close" }}" data-clipboard-target="#message_edit_content">
+                <img src="/static/images/clippy.svg" id="clipboard_image" />
             </button>
             <label class="edit-control-label" for="message_edit_topic">{{t "Content" }}</label>
             <textarea class="message_edit_content" id="message_edit_content">{{content}}</textarea>