From 9707c74f339baee168bac8fc6c0d3ef6b557edb5 Mon Sep 17 00:00:00 2001
From: Raghav Jajodia <jajodia.raghav@gmail.com>
Date: Wed, 18 Jan 2017 01:21:30 +0530
Subject: [PATCH] message_edit: Added copy to clipboard button.

A copy-to-clipboard button is added over message-edit textarea.
Closes #3239.
---
 .eslintrc.json                                |   3 ++-
 package.json                                  |   1 +
 static/images/clippy.svg                      | Bin 0 -> 519 bytes
 static/js/click_handlers.js                   |   8 +++++++
 static/js/message_edit.js                     |   6 +++++
 static/js/ui_init.js                          |  19 ++++++++++++++++
 static/styles/zulip.css                       |  21 ++++++++++++++++++
 static/templates/message_edit_form.handlebars |   2 ++
 version.py                                    |   2 +-
 zproject/settings.py                          |   1 +
 10 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 static/images/clippy.svg

diff --git a/.eslintrc.json b/.eslintrc.json
index 614aa2b12e..c0dfa499ea 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -118,7 +118,8 @@
         "Plotly": false,
         "emoji_codes": false,
         "drafts": false,
-        "katex": false
+        "katex": false,
+        "Clipboard": false
     },
     "rules": {
         "no-restricted-syntax": 0,
diff --git a/package.json b/package.json
index 23327e5deb..7b82bd04b2 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "description": "",
   "main": "",
   "dependencies": {
+    "clipboard": "1.5.16",
     "handlebars": "4.0.6",
     "i18next": "3.4.4",
     "i18next-parser": "0.11.1",
diff --git a/static/images/clippy.svg b/static/images/clippy.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/click_handlers.js b/static/js/click_handlers.js
index 3a8ab9bd08..9e27249a7c 100644
--- a/static/js/click_handlers.js
+++ b/static/js/click_handlers.js
@@ -151,6 +151,14 @@ $(function () {
         e.stopPropagation();
         popovers.hide_all();
     });
+    $("body").on("click", ".copy_message", function (e) {
+        $(this).attr("data-original-title", "Copied!");
+        $(this).tooltip().tooltip('show');
+        var row = $(this).closest(".message_row");
+        message_edit.end(row);
+        e.preventDefault();
+        e.stopPropagation();
+    });
     $("body").on("click", "a", function () {
         if (document.activeElement === this) {
             ui_util.blur_active_element();
diff --git a/static/js/message_edit.js b/static/js/message_edit.js
index 9869c09e54..f4dca9f362 100644
--- a/static/js/message_edit.js
+++ b/static/js/message_edit.js
@@ -16,6 +16,10 @@ var editability_types = {
 };
 exports.editability_types = editability_types;
 
+function initClipboard(elem) {
+    return new Clipboard(elem);
+}
+
 function get_editability(message, edit_limit_seconds_buffer) {
     edit_limit_seconds_buffer = edit_limit_seconds_buffer || 0;
     if (!(message && message.sent_by_me)) {
@@ -189,6 +193,8 @@ function edit_message(row, raw_content) {
     currently_editing_messages[message.id] = edit_obj;
     current_msg_list.show_edit_message(row, edit_obj);
 
+    initClipboard(row.find('.copy_message')[0]);
+
     form.keydown(_.partial(handle_edit_keydown, false));
 
     var message_edit_content = row.find('textarea.message_edit_content');
diff --git a/static/js/ui_init.js b/static/js/ui_init.js
index a026cd2937..de3fcc2e0a 100644
--- a/static/js/ui_init.js
+++ b/static/js/ui_init.js
@@ -212,6 +212,25 @@ $(function () {
 
     $('.message_failed i[data-toggle="tooltip"]').tooltip();
 
+    $('.copy_message[data-toggle="tooltip"]').tooltip();
+
+    $("body").on("mouseover", "#message_edit_content", function () {
+        $(this).closest(".message_row").find(".copy_message").show();
+    });
+
+    $("body").on("mouseout", "#message_edit_content", function () {
+        $(this).closest(".message_row").find(".copy_message").hide();
+    });
+
+    $("body").on("mouseover", ".copy_message", function () {
+        $(this).show();
+        $(this).tooltip('show');
+    });
+
+    $("body").on("mouseout", ".copy_message", function () {
+        $(this).tooltip('hide');
+    });
+
     if (!page_params.realm_allow_message_editing) {
         $("#edit-message-hotkey-help").hide();
     }
diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index 1372e636c3..4f0e3524ca 100644
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@@ -281,6 +281,27 @@ li,
     line-height: 100%;
 }
 
+.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;
+    position: relative;
+    top: 32px;
+    left: -5px;
+    margin-top: -8px;
+    display: block;
+}
+
+.copy_message:hover {
+    background-color: #dadada;
+}
+
 .btn-large {
     font-size: 115%;
 }
diff --git a/static/templates/message_edit_form.handlebars b/static/templates/message_edit_form.handlebars
index d688d7a7c3..e79218301d 100644
--- a/static/templates/message_edit_form.handlebars
+++ b/static/templates/message_edit_form.handlebars
@@ -16,6 +16,8 @@
 {{/if}}
     <div class="control-group no-margin">
         <div class="controls edit-controls">
+            <button class="btn pull-right copy_message" data-toggle="tooltip" title="{{t "Copy to clipboard" }}" data-clipboard-target="#message_edit_content">
+            </button>
             <label class="edit-control-label" for="message_edit_topic">{{t "Content" }}</label>
             <textarea class="message_edit_content" id="message_edit_content">{{content}}</textarea>
         </div>
diff --git a/version.py b/version.py
index bd6eae3c97..5bf1fbd09f 100644
--- a/version.py
+++ b/version.py
@@ -1,2 +1,2 @@
 ZULIP_VERSION = "1.5.1+git"
-PROVISION_VERSION = '4.12'
+PROVISION_VERSION = '4.13'
diff --git a/zproject/settings.py b/zproject/settings.py
index 02405d57a0..a40b6471e7 100644
--- a/zproject/settings.py
+++ b/zproject/settings.py
@@ -793,6 +793,7 @@ JS_SPECS = {
             'third/bootstrap-notify/js/bootstrap-notify.js',
             'third/html5-formdata/formdata.js',
             'node_modules/jquery-validation/dist/jquery.validate.js',
+            'node_modules/clipboard/dist/clipboard.js',
             'third/jquery-form/jquery.form.js',
             'third/jquery-filedrop/jquery.filedrop.js',
             'third/jquery-caret/jquery.caret.1.5.2.js',