Show link to google translate on error in popup
This commit is contained in:
parent
0bcc153103
commit
f84daddf84
|
@ -15,6 +15,9 @@
|
|||
"showLink": {
|
||||
"message": "Translate this page"
|
||||
},
|
||||
"openInGoogleLabel": {
|
||||
"message": "Open in Google Translate"
|
||||
},
|
||||
"targetLangLabel": {
|
||||
"message": "Target language"
|
||||
},
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -23,4 +23,16 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.translateLink {
|
||||
a {
|
||||
font-style: normal;
|
||||
text-decoration: none;
|
||||
color: var(--highlight);
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue