diff --git a/src/content/components/TranslateContainer.js b/src/content/components/TranslateContainer.js index 29c10ac..34a530a 100644 --- a/src/content/components/TranslateContainer.js +++ b/src/content/components/TranslateContainer.js @@ -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 { { - 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 && (

{getErrorMessage(statusText)} +
+ + {browser.i18n.getMessage("openInGoogleLabel")} +

)} diff --git a/src/content/styles/TranslatePanel.scss b/src/content/styles/TranslatePanel.scss index f264056..8df998d 100644 --- a/src/content/styles/TranslatePanel.scss +++ b/src/content/styles/TranslatePanel.scss @@ -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; } } }