Add copy button to popup
This commit is contained in:
parent
f84daddf84
commit
05813a1eeb
22
package-lock.json
generated
22
package-lock.json
generated
|
@ -2540,6 +2540,14 @@
|
||||||
"integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
|
"integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
|
||||||
"dev": true
|
"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": {
|
"copy-webpack-plugin": {
|
||||||
"version": "4.5.2",
|
"version": "4.5.2",
|
||||||
"resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-4.5.2.tgz",
|
"resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-4.5.2.tgz",
|
||||||
|
@ -8084,6 +8092,15 @@
|
||||||
"prop-types": "^15.6.0"
|
"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": {
|
"react-dom": {
|
||||||
"version": "16.4.2",
|
"version": "16.4.2",
|
||||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.4.2.tgz",
|
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.4.2.tgz",
|
||||||
|
@ -9397,6 +9414,11 @@
|
||||||
"repeat-string": "^1.6.1"
|
"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": {
|
"toposort": {
|
||||||
"version": "1.0.7",
|
"version": "1.0.7",
|
||||||
"resolved": "https://registry.npmjs.org/toposort/-/toposort-1.0.7.tgz",
|
"resolved": "https://registry.npmjs.org/toposort/-/toposort-1.0.7.tgz",
|
||||||
|
|
|
@ -6,6 +6,7 @@
|
||||||
"loglevel": "^1.6.1",
|
"loglevel": "^1.6.1",
|
||||||
"query-string": "^6.1.0",
|
"query-string": "^6.1.0",
|
||||||
"react": "^16.4.0",
|
"react": "^16.4.0",
|
||||||
|
"react-copy-to-clipboard": "^5.0.1",
|
||||||
"react-dom": "^16.4.0",
|
"react-dom": "^16.4.0",
|
||||||
"react-router": "^4.3.1",
|
"react-router": "^4.3.1",
|
||||||
"react-router-dom": "^4.3.1"
|
"react-router-dom": "^4.3.1"
|
||||||
|
|
|
@ -18,6 +18,12 @@
|
||||||
"openInGoogleLabel": {
|
"openInGoogleLabel": {
|
||||||
"message": "Open in Google Translate"
|
"message": "Open in Google Translate"
|
||||||
},
|
},
|
||||||
|
"copyLabel": {
|
||||||
|
"message": "Copy"
|
||||||
|
},
|
||||||
|
"copiedLabel": {
|
||||||
|
"message": "Copied."
|
||||||
|
},
|
||||||
"targetLangLabel": {
|
"targetLangLabel": {
|
||||||
"message": "Target language"
|
"message": "Target language"
|
||||||
},
|
},
|
||||||
|
|
38
src/popup/components/CopyButton.js
Normal file
38
src/popup/components/CopyButton.js
Normal file
|
@ -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>
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
|
@ -4,6 +4,7 @@ import getErrorMessage from "src/common/getErrorMessage";
|
||||||
import { getSettings } from "src/settings/settings";
|
import { getSettings } from "src/settings/settings";
|
||||||
import openUrl from "src/common/openUrl";
|
import openUrl from "src/common/openUrl";
|
||||||
import "../styles/ResultArea.scss";
|
import "../styles/ResultArea.scss";
|
||||||
|
import CopyButton from "./CopyButton";
|
||||||
|
|
||||||
const splitLine = text => {
|
const splitLine = text => {
|
||||||
const regex = /(\n)/g;
|
const regex = /(\n)/g;
|
||||||
|
@ -32,6 +33,7 @@ export default props => {
|
||||||
<a onClick={handleLinkClick}>{browser.i18n.getMessage("openInGoogleLabel")}</a>
|
<a onClick={handleLinkClick}>{browser.i18n.getMessage("openInGoogleLabel")}</a>
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
|
<CopyButton resultText={resultText} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
5
src/popup/icons/copy.svg
Normal file
5
src/popup/icons/copy.svg
Normal file
|
@ -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>
|
After Width: | Height: | Size: 498 B |
28
src/popup/styles/CopyButton.scss
Normal file
28
src/popup/styles/CopyButton.scss
Normal file
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue