narayana/simple-translate
3
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Show google translate link on error

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/content/components/TranslateContainer.js
View file

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

10
src/content/components/TranslatePanel.js
View file

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

34
src/content/styles/TranslatePanel.scss
View file

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