Add copy button to popup

package-lock.json

@@ -2540,6 +2540,14 @@
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
       "dev": true
     },
+    "copy-to-clipboard": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.0.8.tgz",
+      "integrity": "sha512-c3GdeY8qxCHGezVb1EFQfHYK/8NZRemgcTIzPq7PuxjHAf/raKibn2QdhHPb/y6q74PMgH6yizaDZlRmw6QyKw==",
+      "requires": {
+        "toggle-selection": "^1.0.3"
+      }
+    },
     "copy-webpack-plugin": {
       "version": "4.5.2",
       "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-4.5.2.tgz",
@@ -8084,6 +8092,15 @@
         "prop-types": "^15.6.0"
       }
     },
+    "react-copy-to-clipboard": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz",
+      "integrity": "sha512-ELKq31/E3zjFs5rDWNCfFL4NvNFQvGRoJdAKReD/rUPA+xxiLPQmZBZBvy2vgH7V0GE9isIQpT9WXbwIVErYdA==",
+      "requires": {
+        "copy-to-clipboard": "^3",
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-dom": {
       "version": "16.4.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.4.2.tgz",
@@ -9397,6 +9414,11 @@
         "repeat-string": "^1.6.1"
       }
     },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
+    },
     "toposort": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/toposort/-/toposort-1.0.7.tgz",

package.json

@@ -6,6 +6,7 @@
     "loglevel": "^1.6.1",
     "query-string": "^6.1.0",
     "react": "^16.4.0",
+    "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "^16.4.0",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1"

src/_locales/en/messages.json

@@ -18,6 +18,12 @@
   "openInGoogleLabel": {
     "message": "Open in Google Translate"
   },
+  "copyLabel": {
+    "message": "Copy"
+  },
+  "copiedLabel": {
+    "message": "Copied."
+  },
   "targetLangLabel": {
     "message": "Target language"
   },

src/popup/components/CopyButton.js

@@ -0,0 +1,38 @@
+import React, { Component } from "react";
+import browser from "webextension-polyfill";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+import CopyIcon from "../icons/copy.svg";
+import "../styles/CopyButton.scss";
+
+export default class CopyButton extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { isCopied: false };
+  }
+
+  handleCopy = () => {
+    this.setState({ isCopied: true });
+  };
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.resultText !== nextProps.resultText) this.setState({ isCopied: false });
+  }
+
+  render() {
+    const { resultText } = this.props;
+    return (
+      resultText && (
+        <div className="row">
+          {this.state.isCopied && (
+            <span className="copiedText">{browser.i18n.getMessage("copiedLabel")}</span>
+          )}
+          <CopyToClipboard text={resultText} onCopy={this.handleCopy}>
+            <button className="copyButton" title={browser.i18n.getMessage("copyLabel")}>
+              <CopyIcon />
+            </button>
+          </CopyToClipboard>
+        </div>
+      )
+    );
+  }
+}

src/popup/components/ResultArea.js

@@ -4,6 +4,7 @@ import getErrorMessage from "src/common/getErrorMessage";
 import { getSettings } from "src/settings/settings";
 import openUrl from "src/common/openUrl";
 import "../styles/ResultArea.scss";
+import CopyButton from "./CopyButton";
 
 const splitLine = text => {
   const regex = /(\n)/g;
@@ -32,6 +33,7 @@ export default props => {
           <a onClick={handleLinkClick}>{browser.i18n.getMessage("openInGoogleLabel")}</a>
         </p>
       )}
+      <CopyButton resultText={resultText} />
     </div>
   );
 };

src/popup/icons/copy.svg

@@ -0,0 +1,5 @@
+<!--Icon made by Google from www.flaticon.com is licensed by CC 3.0 BY-->
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="561px" height="561px" viewBox="0 0 561 561" style="enable-background:new 0 0 561 561;" xml:space="preserve">
+	<path d="M395.25,0h-306c-28.05,0-51,22.95-51,51v357h51V51h306V0z M471.75,102h-280.5c-28.05,0-51,22.95-51,51v357
+	c0,28.05,22.95,51,51,51h280.5c28.05,0,51-22.95,51-51V153C522.75,124.95,499.8,102,471.75,102z M471.75,510h-280.5iV153h280.5V510z"/>
+</svg>

src/popup/styles/CopyButton.scss

@@ -0,0 +1,28 @@
+.row {
+  display: flex;
+  flex-direction: row;
+  justify-content: right;
+
+  .copiedText {
+    color: var(--sub-text);
+    font-size: 12px;
+    margin-right: 5px;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+  }
+  .copyButton {
+    padding: 0;
+    border: 0;
+    background-color: var(--main-bg);
+    cursor: pointer;
+
+    svg {
+      height: 16px;
+      width: 16px;
+      fill: var(--sub-text);
+      &:hover {
+        fill: var(--highlight);
+      }
+    }
+  }
+}