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

@@ -1,3 +1,3 @@
 <svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg">
-  <path d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z" />
+  <path fill="#777" d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z" />
 </svg>

static/images/clippy_hover.svg

@@ -0,0 +1,3 @@
+<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg">
+  <path d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z" />
+</svg>

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});

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');
     });
 

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 {
+#clipboard_image {
-    background-color: #dadada;
+    height: inherit;
+    width: inherit;
+    max-width: inherit;
+    margin-top: inherit;
+    margin-left: -7px;
 }
 
 .btn-large {

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>