diff --git a/static/images/clippy.svg b/static/images/clippy.svg index e1b1703590..f1aac40321 100644 Binary files a/static/images/clippy.svg and b/static/images/clippy.svg differ diff --git a/static/images/clippy_hover.svg b/static/images/clippy_hover.svg new file mode 100644 index 0000000000..e1b1703590 Binary files /dev/null and b/static/images/clippy_hover.svg differ 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 @@