From 05813a1eebf27d24fcdd1e6f218434117c4e17d9 Mon Sep 17 00:00:00 2001 From: sienori Date: Sat, 23 Feb 2019 05:59:45 +0900 Subject: [PATCH] Add copy button to popup --- package-lock.json | 22 +++++++++++++++++ package.json | 1 + src/_locales/en/messages.json | 6 +++++ src/popup/components/CopyButton.js | 38 ++++++++++++++++++++++++++++++ src/popup/components/ResultArea.js | 2 ++ src/popup/icons/copy.svg | 5 ++++ src/popup/styles/CopyButton.scss | 28 ++++++++++++++++++++++ 7 files changed, 102 insertions(+) create mode 100644 src/popup/components/CopyButton.js create mode 100644 src/popup/icons/copy.svg create mode 100644 src/popup/styles/CopyButton.scss diff --git a/package-lock.json b/package-lock.json index c28ebaf..3d26cb4 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index b3cf711..63d2770 100644 --- a/package.json +++ b/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" diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index 5792182..d547d9d 100644 --- a/src/_locales/en/messages.json +++ b/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" }, diff --git a/src/popup/components/CopyButton.js b/src/popup/components/CopyButton.js new file mode 100644 index 0000000..4736b8d --- /dev/null +++ b/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 && ( +
+ {this.state.isCopied && ( + {browser.i18n.getMessage("copiedLabel")} + )} + + + +
+ ) + ); + } +} diff --git a/src/popup/components/ResultArea.js b/src/popup/components/ResultArea.js index 60374bd..84f40db 100644 --- a/src/popup/components/ResultArea.js +++ b/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 => { {browser.i18n.getMessage("openInGoogleLabel")}

)} + ); }; diff --git a/src/popup/icons/copy.svg b/src/popup/icons/copy.svg new file mode 100644 index 0000000..55b2183 --- /dev/null +++ b/src/popup/icons/copy.svg @@ -0,0 +1,5 @@ + + + + diff --git a/src/popup/styles/CopyButton.scss b/src/popup/styles/CopyButton.scss new file mode 100644 index 0000000..09c382b --- /dev/null +++ b/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); + } + } + } +}