Show google translate link on error

This commit is contained in:
sienori 2021-05-24 02:21:18 +09:00
parent b699271313
commit 2bd616e866
3 changed files with 40 additions and 23 deletions

View file

@ -39,6 +39,7 @@ export default class TranslateContainer extends Component {
buttonPosition: { x: 0, y: 0 },
shouldShowPanel: false,
panelPosition: { x: 0, y: 0 },
currentLang: getSettings("targetLang"),
resultText: "",
candidateText: "",
statusText: "OK"
@ -85,20 +86,20 @@ export default class TranslateContainer extends Component {
const panelPosition = useClickedPosition ? clickedPosition : this.selectedPosition;
let result = await translateText(this.selectedText);
if (getSettings("ifChangeSecondLangOnPage")) {
const targetLang = getSettings("targetLang");
const secondLang = getSettings("secondTargetLang");
const shouldSwitchSecondLang =
result.sourceLanguage === targetLang && result.percentage > 0 && targetLang !== secondLang;
if (shouldSwitchSecondLang) result = await translateText(this.selectedText, secondLang);
}
const targetLang = getSettings("targetLang");
const secondLang = getSettings("secondTargetLang");
const shouldSwitchSecondLang =
getSettings("ifChangeSecondLangOnPage") &&
result.sourceLanguage === targetLang && result.percentage > 0 && targetLang !== secondLang;
if (shouldSwitchSecondLang) result = await translateText(this.selectedText, secondLang);
this.setState({
shouldShowPanel: true,
panelPosition: panelPosition,
resultText: result.resultText,
candidateText: getSettings("ifShowCandidate") ? result.candidateText : "",
statusText: result.statusText
statusText: result.statusText,
currentLang: shouldSwitchSecondLang ? secondLang : targetLang
});
};
@ -117,6 +118,8 @@ export default class TranslateContainer extends Component {
<TranslatePanel
shouldShow={this.state.shouldShowPanel}
position={this.state.panelPosition}
selectedText={this.selectedText}
currentLang={this.state.currentLang}
resultText={this.state.resultText}
candidateText={this.state.candidateText}
statusText={this.state.statusText}

View file

@ -1,3 +1,4 @@
import browser from "webextension-polyfill";
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { getSettings } from "src/settings/settings";
@ -162,7 +163,7 @@ export default class TranslatePanel extends Component {
};
render = () => {
const { shouldShow, resultText, candidateText, statusText } = this.props;
const { shouldShow, selectedText, currentLang, resultText, candidateText, statusText } = this.props;
const isError = statusText !== "OK";
const { width, height } = this.state.shouldResize
? { width: parseInt(getSettings("width")), height: parseInt(getSettings("height")) }
@ -204,6 +205,13 @@ export default class TranslatePanel extends Component {
{isError && (
<p className="simple-translate-error" style={candidateStyles}>
{getErrorMessage(statusText)}
<br />
<a
href={`https://translate.google.com/?sl=auto&tl=${currentLang}&text=${encodeURIComponent(selectedText)}`}
target="_blank"
>
{browser.i18n.getMessage("openInGoogleLabel")}
</a>
</p>
)}
</div>

View file

@ -39,7 +39,8 @@
.simple-translate-result-contents {
padding: 0px 18px 15px;
p {
p,
a {
all: initial;
display: block;
margin: 0;
@ -50,21 +51,26 @@
line-height: 150%;
visibility: inherit;
opacity: inherit;
}
&::-moz-selection {
background: var(--simple-translate-line);
}
a {
color: var(--simple-translate-highlight);
cursor: pointer;
}
&.simple-translate-result {
color: var(--simple-translate-main-text);
}
&.simple-translate-candidate,
&.simple-translate-error {
color: var(--simple-translate-sub-text);
margin-top: 1em;
&:empty {
margin-top: 0;
}
&::-moz-selection {
background: var(--simple-translate-line);
}
&.simple-translate-result {
color: var(--simple-translate-main-text);
}
&.simple-translate-candidate,
&.simple-translate-error {
color: var(--simple-translate-sub-text);
margin-top: 1em;
&:empty {
margin-top: 0;
}
}
}