From 5b205c8c0cb1c5af14d0fce50db82785c5c2d87b Mon Sep 17 00:00:00 2001
From: Piyush Mishra <piyush.raj.kit@gmail.com>
Date: Mon, 10 May 2021 21:58:57 +0530
Subject: [PATCH] reply

---
 static/css/style.css  |   8 +--
 static/img/copy.svg   |  46 +++++++++++++++++
 static/img/delete.svg | 116 ++++++++++++++++++++++++++++++++++++++++++
 static/img/edit.svg   | 101 ++++++++++++++++++++++++++++++++++++
 static/index.html     |  14 +++--
 static/js/app.js      |   4 +-
 static/js/message.js  |   7 ++-
 7 files changed, 283 insertions(+), 13 deletions(-)
 create mode 100644 static/img/copy.svg
 create mode 100644 static/img/delete.svg
 create mode 100644 static/img/edit.svg

diff --git a/static/css/style.css b/static/css/style.css
index 9a9813e..2cdc116 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -215,9 +215,9 @@ input {
 .clip-win {
     position: fixed;
     z-index: 9999;
-    padding: 6px;
-    margin: 5px;
-    bottom: 50px;
+    padding: 6px;    
+    bottom: 55px;
+    left: 5px;
     border: 1px dashed #1E86D7;
     background-color: var(--bg-secondary-color);
 }
@@ -232,7 +232,7 @@ input {
 }
 
 .clip-win.selected-clip {
-    min-width: 250px;
+    min-width: 320px;
     left: 50%; 
     transform: translateX(-50%);
     border-radius:  15px;
diff --git a/static/img/copy.svg b/static/img/copy.svg
new file mode 100644
index 0000000..0a95072
--- /dev/null
+++ b/static/img/copy.svg
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 460 460" style="enable-background:new 0 0 460 460;" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<path d="M425.934,0H171.662c-18.122,0-32.864,14.743-32.864,32.864v77.134c6.985,0,144.07,0,149.543,0
+				c34.664,0,62.865,28.201,62.865,62.865c0,6.489,0,145.491,0,147.139h74.728c18.121,0,32.864-14.743,32.864-32.865V32.864
+				C458.797,14.743,444.055,0,425.934,0z"/>
+			<path d="M288.339,139.998H34.068c-18.121,0-32.865,14.743-32.865,32.865v254.272C1.204,445.257,15.946,460,34.068,460h254.272
+				c18.122,0,32.865-14.743,32.865-32.864V172.863C321.206,154.741,306.461,139.998,288.339,139.998z"/>
+		</g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/static/img/delete.svg b/static/img/delete.svg
new file mode 100644
index 0000000..f254c61
--- /dev/null
+++ b/static/img/delete.svg
@@ -0,0 +1,116 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 330 330"
+   style="enable-background:new 0 0 330 330;"
+   xml:space="preserve"
+   sodipodi:docname="delete.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)"><metadata
+   id="metadata47"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+   id="defs45" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="755"
+   inkscape:window-height="480"
+   id="namedview43"
+   showgrid="false"
+   inkscape:zoom="0.64772727"
+   inkscape:cx="130.94235"
+   inkscape:cy="170.34453"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="0"
+   inkscape:current-layer="Layer_1"
+   inkscape:document-rotation="0" />
+<g
+   id="XMLID_6_"
+   style="fill:#ff2a2a">
+	<g
+   id="XMLID_11_"
+   style="fill:#ff2a2a">
+		<path
+   d="M240,121.076H30V275c0,8.284,6.716,15,15,15h60h37.596c19.246,24.348,49.031,40,82.404,40c57.897,0,105-47.103,105-105    C330,172.195,290.816,128.377,240,121.076z M225,300c-41.355,0-75-33.645-75-75s33.645-75,75-75s75,33.645,75,75    S266.355,300,225,300z"
+   id="path2"
+   style="fill:#ff2a2a" />
+	</g>
+	<g
+   id="XMLID_18_"
+   style="fill:#ff2a2a">
+		<path
+   d="M240,90h15c8.284,0,15-6.716,15-15s-6.716-15-15-15h-30h-15V15c0-8.284-6.716-15-15-15H75c-8.284,0-15,6.716-15,15v45H45    H15C6.716,60,0,66.716,0,75s6.716,15,15,15h15H240z M90,30h90v30h-15h-60H90V30z"
+   id="path5"
+   style="fill:#ff2a2a" />
+	</g>
+	<g
+   id="XMLID_23_"
+   style="fill:#ff2a2a">
+		<path
+   d="M256.819,193.181c-5.857-5.858-15.355-5.858-21.213,0L225,203.787l-10.606-10.606c-5.857-5.858-15.355-5.858-21.213,0    c-5.858,5.858-5.858,15.355,0,21.213L203.787,225l-10.606,10.606c-5.858,5.858-5.858,15.355,0,21.213    c2.929,2.929,6.768,4.394,10.606,4.394c3.839,0,7.678-1.465,10.607-4.394L225,246.213l10.606,10.606    c2.929,2.929,6.768,4.394,10.607,4.394c3.839,0,7.678-1.465,10.606-4.394c5.858-5.858,5.858-15.355,0-21.213L246.213,225    l10.606-10.606C262.678,208.535,262.678,199.039,256.819,193.181z"
+   id="path8"
+   style="fill:#ff2a2a" />
+	</g>
+</g>
+<g
+   id="g12">
+</g>
+<g
+   id="g14">
+</g>
+<g
+   id="g16">
+</g>
+<g
+   id="g18">
+</g>
+<g
+   id="g20">
+</g>
+<g
+   id="g22">
+</g>
+<g
+   id="g24">
+</g>
+<g
+   id="g26">
+</g>
+<g
+   id="g28">
+</g>
+<g
+   id="g30">
+</g>
+<g
+   id="g32">
+</g>
+<g
+   id="g34">
+</g>
+<g
+   id="g36">
+</g>
+<g
+   id="g38">
+</g>
+<g
+   id="g40">
+</g>
+</svg>
diff --git a/static/img/edit.svg b/static/img/edit.svg
new file mode 100644
index 0000000..91ef233
--- /dev/null
+++ b/static/img/edit.svg
@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 59.527 59.527"
+   style="enable-background:new 0 0 59.527 59.527;"
+   xml:space="preserve"
+   sodipodi:docname="edit.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)"><metadata
+   id="metadata47"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+   id="defs45" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="755"
+   inkscape:window-height="480"
+   id="namedview43"
+   showgrid="false"
+   inkscape:zoom="3.5908075"
+   inkscape:cx="-17.163737"
+   inkscape:cy="25.390491"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="0"
+   inkscape:current-layer="Capa_1" />
+<g
+   id="g10"
+   transform="matrix(1.1453044,0,0,1.1122816,4.9621713,-0.46547213)">
+	<polygon
+   points="17.156,53.327 35.095,48.52 33.491,42.535 15.664,47.76 "
+   id="polygon2" />
+	<path
+   d="m 13.81,1.32 6.665,24.66 c 0.062,-0.003 0.124,-0.012 0.186,-0.012 2.054,0 3.861,1.388 4.394,3.374 0.649,2.424 -0.794,4.925 -3.218,5.574 -0.386,0.104 -0.783,0.156 -1.18,0.156 -2.055,0 -3.862,-1.388 -4.394,-3.375 -0.315,-1.174 -0.153,-2.4 0.454,-3.453 0.437,-0.756 1.072,-1.35 1.827,-1.745 L 11.924,2.005 0,38.316 5.495,36.844 c 0.596,-0.159 1.207,-0.24 1.817,-0.24 3.157,0 5.934,2.133 6.752,5.188 l 1.082,4.036 17.827,-5.225 -0.969,-3.617 c -0.483,-1.806 -0.235,-3.691 0.699,-5.31 0.934,-1.619 2.443,-2.776 4.249,-3.26 l 5.495,-1.473 z"
+   id="path4" />
+	<path
+   d="m 18.194,31.18 c 0.356,1.329 1.781,2.167 3.125,1.805 1.358,-0.364 2.168,-1.767 1.804,-3.125 -0.299,-1.113 -1.311,-1.892 -2.462,-1.892 -0.221,0 -0.443,0.029 -0.66,0.088 H 20 c -0.001,0 -0.002,0 -0.003,0 -0.658,0.177 -1.208,0.599 -1.548,1.188 -0.341,0.591 -0.431,1.278 -0.255,1.936 z"
+   id="path6" />
+	
+</g>
+<g
+   id="g12">
+</g>
+<g
+   id="g14">
+</g>
+<g
+   id="g16">
+</g>
+<g
+   id="g18">
+</g>
+<g
+   id="g20">
+</g>
+<g
+   id="g22">
+</g>
+<g
+   id="g24">
+</g>
+<g
+   id="g26">
+</g>
+<g
+   id="g28">
+</g>
+<g
+   id="g30">
+</g>
+<g
+   id="g32">
+</g>
+<g
+   id="g34">
+</g>
+<g
+   id="g36">
+</g>
+<g
+   id="g38">
+</g>
+<g
+   id="g40">
+</g>
+</svg>
diff --git a/static/index.html b/static/index.html
index e72aa6d..5bb8c96 100644
--- a/static/index.html
+++ b/static/index.html
@@ -186,9 +186,17 @@
     <!-- Selected Clip -->
     <div id="selected_clip" class="clip-win selected-clip is-hidden">
         <div style="padding: 4px;">
-            <div onclick="Messages.copyMessagesToClipboard()" class="button outline primary">Copy</div>
-            <div onclick="Messages.prepareReply()" class="button outline primary">Reply</div>
-            <a onclick="Messages.unselectAll()" style="float: right; padding: 6px 2px 6px 8px;">
+            <button onclick="Messages.copyMessagesToClipboard()" class="button outline primary" style="padding: 1rem 1rem;">
+                <img src="img/delete.svg" style="height: 1.6rem;">
+            </button>
+            <button onclick="Messages.copyMessagesToClipboard()" class="button outline primary" style="padding: 1rem 1rem;">
+                <img src="img/edit.svg" class="svg-filter" style="height: 1.6rem;">
+            </button>
+            <button onclick="Messages.copyMessagesToClipboard()" class="button outline primary" style="padding: 1rem 1rem;">
+                <img src="img/copy.svg" class="svg-filter" style="height: 1.6rem;">
+            </button>
+            <button onclick="Messages.prepareReply()" class="button outline primary">Reply</button>
+            <a onclick="Messages.unselectAll()" style="float: right; padding: 7px 2px 7px 15px;">
                 <img src="img/close.svg" alt="X" style="height: 1.8rem; width: auto; cursor: pointer;">
             </a>
         </div>
diff --git a/static/js/app.js b/static/js/app.js
index 4a099bc..ae4b1ef 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -224,7 +224,7 @@ function autosize(el){
     setTimeout(function(){
         el.style.cssText = 'height:auto; padding:0';
         el.style.cssText = 'height:' + el.scrollHeight + 'px';
-        $('#reply_clip').css('bottom',  (el.scrollHeight + 10) + 'px');
-        $('#selected_clip').css('bottom',  (el.scrollHeight + 25) + 'px');
+        $('#reply_clip').css('bottom',  (el.scrollHeight + 20) + 'px');
+        $('#selected_clip').css('bottom',  (el.scrollHeight + 30) + 'px');
     },0);    
 }
\ No newline at end of file
diff --git a/static/js/message.js b/static/js/message.js
index 1aa37a2..97a6608 100644
--- a/static/js/message.js
+++ b/static/js/message.js
@@ -121,10 +121,9 @@ let Messages = class {
 
     static selectedMessageToText() {
         var text = "";
-        $('.active').each(function() {
-            $(this).find('pre').each(function() {
-                text += $(this).text() + '\n' 
-            });
+        $('.message.active').each(function() {
+            text += $(this).find('.message-by').text()+' : ';
+            text += $(this).find('pre').last().text() + '\n';
         });
     
         return text.trim();