Show link to google translate on error in popup
This commit is contained in:
parent
0bcc153103
commit
f84daddf84
|
@ -15,6 +15,9 @@
|
||||||
"showLink": {
|
"showLink": {
|
||||||
"message": "Translate this page"
|
"message": "Translate this page"
|
||||||
},
|
},
|
||||||
|
"openInGoogleLabel": {
|
||||||
|
"message": "Open in Google Translate"
|
||||||
|
},
|
||||||
"targetLangLabel": {
|
"targetLangLabel": {
|
||||||
"message": "Target language"
|
"message": "Target language"
|
||||||
},
|
},
|
||||||
|
|
|
@ -111,6 +111,8 @@ export default class PopupPage extends Component {
|
||||||
<InputArea inputText={this.state.inputText} handleInputText={this.handleInputText} />
|
<InputArea inputText={this.state.inputText} handleInputText={this.handleInputText} />
|
||||||
<hr />
|
<hr />
|
||||||
<ResultArea
|
<ResultArea
|
||||||
|
inputText={this.state.inputText}
|
||||||
|
targetLang={this.state.targetLang}
|
||||||
resultText={this.state.resultText}
|
resultText={this.state.resultText}
|
||||||
candidateText={this.state.candidateText}
|
candidateText={this.state.candidateText}
|
||||||
statusText={this.state.statusText}
|
statusText={this.state.statusText}
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
import browser from "webextension-polyfill";
|
||||||
import getErrorMessage from "src/common/getErrorMessage";
|
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 "../styles/ResultArea.scss";
|
import "../styles/ResultArea.scss";
|
||||||
|
|
||||||
const splitLine = text => {
|
const splitLine = text => {
|
||||||
|
@ -13,11 +15,23 @@ export default props => {
|
||||||
const isError = statusText !== "OK";
|
const isError = statusText !== "OK";
|
||||||
const shouldShowCandidate = getSettings("ifShowCandidate");
|
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 (
|
return (
|
||||||
<div id="resultArea">
|
<div id="resultArea">
|
||||||
<p className="resultText">{splitLine(resultText)}</p>
|
<p className="resultText">{splitLine(resultText)}</p>
|
||||||
{shouldShowCandidate && <p className="candidateText">{splitLine(candidateText)}</p>}
|
{shouldShowCandidate && <p className="candidateText">{splitLine(candidateText)}</p>}
|
||||||
{isError && <p className="error">{getErrorMessage(statusText)}</p>}
|
{isError && <p className="error">{getErrorMessage(statusText)}</p>}
|
||||||
|
{isError && (
|
||||||
|
<p className="translateLink">
|
||||||
|
<a onClick={handleLinkClick}>{browser.i18n.getMessage("openInGoogleLabel")}</a>
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
</div>
|
</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