Show recent languages in drop list
This commit is contained in:
parent
ef6812ad91
commit
0ded3881da
|
@ -41,6 +41,12 @@
|
||||||
"langList": {
|
"langList": {
|
||||||
"message": "af:Afrikaans, sq:Albanian, am:Amharic, ar:Arabic, hy:Armenian, az:Azerbaijani, eu:Basque, be:Belarusian, bn:Bengali, bs:Bosnian, bg:Bulgarian, ca:Catalan, ceb:Cebuano, ny:Chewa, zh-CN:Chinese (PRC), zh-TW:Chinese (Taiwan), co:Corsican, hr:Croatian, cs:Czech, da:Danish, nl:Dutch, en:English, eo:Esperanto, et:Estonian, fi:Finnish, fr:French, fy:Frisian, gl:Galician, ka:Georgian, de:German, el:Greek, gu:Gujarati, ht:Haitian, ha:Hausa, haw:Hawaiian, he:Hebrew, hi:Hindi, hu:Hungarian, is:Icelandic, ig:Igbo, id:Indonesian, ga:Irish, it:Italian, ja:Japanese, jv:Javanese, kn:Kannada, kk:Kazakh, km:Khmer, ky:Kirghiz, ko:Korean, ku:Kurdish, lo:Laotian, la:Latin, lv:Latvian, lt:Lithuanian, lb:Luxembourgish, mk:Macedonian, mg:Malagasy, ms:Malay, ml:Malayalam, mt:Maltese, mi:Maori, mr:Marathi, mn:Mongolian, hmn:Monk, my:Myanmar, ne:Nepali, no:Norwegian, fa:Persian, pl:Polish, pt:Portuguese, pa:Punjabi, ps:Pushto, ro:Romanian, ru:Russian, sm:Samoan, gd:Scottish Gaelic, sr:Serbian, sn:Shona, sd:Sindhi, si:Sinhala, sk:Slovak, sl:Slovenian, so:Somali, sx:Sotho, es:Spanish, su:Sundanese, sw:Swahili, sv:Swedish, tl:Tagalog, tg:Tajiki, ta:Tamil, te:Telugu, th:Thai, tr:Turkish, uk:Ukrainian, ur:Urdu, uz:Uzbek, vi:Vietnamese, cy:Welsh, xh:Xosa, yi:Yiddish, yo:Yoruba, zu:Zulu"
|
"message": "af:Afrikaans, sq:Albanian, am:Amharic, ar:Arabic, hy:Armenian, az:Azerbaijani, eu:Basque, be:Belarusian, bn:Bengali, bs:Bosnian, bg:Bulgarian, ca:Catalan, ceb:Cebuano, ny:Chewa, zh-CN:Chinese (PRC), zh-TW:Chinese (Taiwan), co:Corsican, hr:Croatian, cs:Czech, da:Danish, nl:Dutch, en:English, eo:Esperanto, et:Estonian, fi:Finnish, fr:French, fy:Frisian, gl:Galician, ka:Georgian, de:German, el:Greek, gu:Gujarati, ht:Haitian, ha:Hausa, haw:Hawaiian, he:Hebrew, hi:Hindi, hu:Hungarian, is:Icelandic, ig:Igbo, id:Indonesian, ga:Irish, it:Italian, ja:Japanese, jv:Javanese, kn:Kannada, kk:Kazakh, km:Khmer, ky:Kirghiz, ko:Korean, ku:Kurdish, lo:Laotian, la:Latin, lv:Latvian, lt:Lithuanian, lb:Luxembourgish, mk:Macedonian, mg:Malagasy, ms:Malay, ml:Malayalam, mt:Maltese, mi:Maori, mr:Marathi, mn:Mongolian, hmn:Monk, my:Myanmar, ne:Nepali, no:Norwegian, fa:Persian, pl:Polish, pt:Portuguese, pa:Punjabi, ps:Pushto, ro:Romanian, ru:Russian, sm:Samoan, gd:Scottish Gaelic, sr:Serbian, sn:Shona, sd:Sindhi, si:Sinhala, sk:Slovak, sl:Slovenian, so:Somali, sx:Sotho, es:Spanish, su:Sundanese, sw:Swahili, sv:Swedish, tl:Tagalog, tg:Tajiki, ta:Tamil, te:Telugu, th:Thai, tr:Turkish, uk:Ukrainian, ur:Urdu, uz:Uzbek, vi:Vietnamese, cy:Welsh, xh:Xosa, yi:Yiddish, yo:Yoruba, zu:Zulu"
|
||||||
},
|
},
|
||||||
|
"allLangLabel": {
|
||||||
|
"message": "All languages"
|
||||||
|
},
|
||||||
|
"recentLangLabel": {
|
||||||
|
"message": "Recent languages"
|
||||||
|
},
|
||||||
"settingsLabel": {
|
"settingsLabel": {
|
||||||
"message": "Settings"
|
"message": "Settings"
|
||||||
},
|
},
|
||||||
|
|
|
@ -23,7 +23,7 @@ export default class Footer extends Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { tabUrl, targetLang } = this.props;
|
const { tabUrl, targetLang, langHistory } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div id="footer">
|
<div id="footer">
|
||||||
|
@ -37,11 +37,22 @@ export default class Footer extends Component {
|
||||||
onChange={this.handleChange}
|
onChange={this.handleChange}
|
||||||
title={browser.i18n.getMessage("targetLangLabel")}
|
title={browser.i18n.getMessage("targetLangLabel")}
|
||||||
>
|
>
|
||||||
{this.langList.map(option => (
|
|
||||||
<option value={option.value} key={option.value}>
|
<optgroup label={browser.i18n.getMessage("recentLangLabel")}>
|
||||||
{option.name}
|
{this.langList.filter(option => langHistory.includes(option.value))
|
||||||
</option>
|
.map(option => (
|
||||||
))}
|
<option value={option.value} key={option.value}>
|
||||||
|
{option.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</optgroup>
|
||||||
|
<optgroup label={browser.i18n.getMessage("allLangLabel")}>
|
||||||
|
{this.langList.map(option => (
|
||||||
|
<option value={option.value} key={option.value}>
|
||||||
|
{option.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</optgroup>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import browser from "webextension-polyfill";
|
import browser from "webextension-polyfill";
|
||||||
import log from "loglevel";
|
import log from "loglevel";
|
||||||
import { initSettings, getSettings } from "src/settings/settings";
|
import { initSettings, getSettings, setSettings } from "src/settings/settings";
|
||||||
import { updateLogLevel, overWriteLogLevel } from "src/common/log";
|
import { updateLogLevel, overWriteLogLevel } from "src/common/log";
|
||||||
import translate from "src/common/translate";
|
import translate from "src/common/translate";
|
||||||
import Header from "./Header";
|
import Header from "./Header";
|
||||||
|
@ -43,7 +43,8 @@ export default class PopupPage extends Component {
|
||||||
statusText: "OK",
|
statusText: "OK",
|
||||||
tabUrl: "",
|
tabUrl: "",
|
||||||
isConnected: true,
|
isConnected: true,
|
||||||
isEnabledOnPage: true
|
isEnabledOnPage: true,
|
||||||
|
langHistory: []
|
||||||
};
|
};
|
||||||
this.isSwitchedSecondLang = false;
|
this.isSwitchedSecondLang = false;
|
||||||
this.init();
|
this.init();
|
||||||
|
@ -56,8 +57,15 @@ export default class PopupPage extends Component {
|
||||||
|
|
||||||
document.body.dataset.theme = getSettings("theme");
|
document.body.dataset.theme = getSettings("theme");
|
||||||
const targetLang = getSettings("targetLang");
|
const targetLang = getSettings("targetLang");
|
||||||
|
let langHistory = getSettings("langHistory");
|
||||||
|
if (!langHistory) {
|
||||||
|
const secondLang = getSettings("secondTargetLang");
|
||||||
|
langHistory = [targetLang, secondLang];
|
||||||
|
setSettings("langHistory", langHistory);
|
||||||
|
}
|
||||||
this.setState({
|
this.setState({
|
||||||
targetLang: targetLang
|
targetLang: targetLang,
|
||||||
|
langHistory: langHistory
|
||||||
});
|
});
|
||||||
|
|
||||||
const tabInfo = await getTabInfo();
|
const tabInfo = await getTabInfo();
|
||||||
|
@ -82,11 +90,20 @@ export default class PopupPage extends Component {
|
||||||
}, waitTime);
|
}, waitTime);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
setLangHistory = lang => {
|
||||||
|
let langHistory = getSettings("langHistory") || [];
|
||||||
|
langHistory.push(lang);
|
||||||
|
if (langHistory.length > 30) langHistory = langHistory.slice(-30);
|
||||||
|
setSettings("langHistory", langHistory);
|
||||||
|
this.setState({ langHistory: langHistory });
|
||||||
|
};
|
||||||
|
|
||||||
handleLangChange = lang => {
|
handleLangChange = lang => {
|
||||||
log.info(logDir, "handleLangChange()", lang);
|
log.info(logDir, "handleLangChange()", lang);
|
||||||
this.setState({ targetLang: lang });
|
this.setState({ targetLang: lang });
|
||||||
const inputText = this.state.inputText;
|
const inputText = this.state.inputText;
|
||||||
if (inputText !== "") this.translateText(inputText, lang);
|
if (inputText !== "") this.translateText(inputText, lang);
|
||||||
|
this.setLangHistory(lang);
|
||||||
};
|
};
|
||||||
|
|
||||||
translateText = async (text, targetLang) => {
|
translateText = async (text, targetLang) => {
|
||||||
|
@ -162,6 +179,7 @@ export default class PopupPage extends Component {
|
||||||
<Footer
|
<Footer
|
||||||
tabUrl={this.state.tabUrl}
|
tabUrl={this.state.tabUrl}
|
||||||
targetLang={this.state.targetLang}
|
targetLang={this.state.targetLang}
|
||||||
|
langHistory={this.state.langHistory}
|
||||||
handleLangChange={this.handleLangChange}
|
handleLangChange={this.handleLangChange}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue