Show link to google translate on error in popup

This commit is contained in:
sienori 2019-02-23 04:28:00 +09:00
parent 0bcc153103
commit f84daddf84
4 changed files with 31 additions and 0 deletions

View file

@ -15,6 +15,9 @@
"showLink": {
"message": "Translate this page"
},
"openInGoogleLabel": {
"message": "Open in Google Translate"
},
"targetLangLabel": {
"message": "Target language"
},

View file

@ -111,6 +111,8 @@ export default class PopupPage extends Component {
<InputArea inputText={this.state.inputText} handleInputText={this.handleInputText} />
<hr />
<ResultArea
inputText={this.state.inputText}
targetLang={this.state.targetLang}
resultText={this.state.resultText}
candidateText={this.state.candidateText}
statusText={this.state.statusText}

View file

@ -1,6 +1,8 @@
import React from "react";
import browser from "webextension-polyfill";
import getErrorMessage from "src/common/getErrorMessage";
import { getSettings } from "src/settings/settings";
import openUrl from "src/common/openUrl";
import "../styles/ResultArea.scss";
const splitLine = text => {
@ -13,11 +15,23 @@ export default props => {
const isError = statusText !== "OK";
const shouldShowCandidate = getSettings("ifShowCandidate");
const handleLinkClick = () => {
const { inputText, targetLang } = props;
const encodedText = encodeURIComponent(inputText);
const translateUrl = `https://translate.google.com/?sl=auto&tl=${targetLang}&text=${encodedText}`;
openUrl(translateUrl);
};
return (
<div id="resultArea">
<p className="resultText">{splitLine(resultText)}</p>
{shouldShowCandidate && <p className="candidateText">{splitLine(candidateText)}</p>}
{isError && <p className="error">{getErrorMessage(statusText)}</p>}
{isError && (
<p className="translateLink">
<a onClick={handleLinkClick}>{browser.i18n.getMessage("openInGoogleLabel")}</a>
</p>
)}
</div>
);
};

View file

@ -23,4 +23,16 @@
}
}
}
.translateLink {
a {
font-style: normal;
text-decoration: none;
color: var(--highlight);
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
}
}