Отображаем прогресс перевода для не зарелиженных локалей

Блоку переключения языков добавлена общая тень
Исправлено отображение переключателя в профиле пользователя
This commit is contained in:
ErickSkrauch 2017-06-09 02:09:57 +03:00
parent e026944862
commit a7c75bc5c8
4 changed files with 77 additions and 19 deletions

View File

@ -113,6 +113,7 @@ async function pull() {
mapFileContent[elem.locale] = { mapFileContent[elem.locale] = {
name: elem.local_name.match(/^([^\(]+)/)[0].trim(), // Обрезаем значения в скобках name: elem.local_name.match(/^([^\(]+)/)[0].trim(), // Обрезаем значения в скобках
progress: parseFloat(elem.translation_progress), progress: parseFloat(elem.translation_progress),
isReleased: elem.is_ready_to_publish,
}; };
}); });
fs.writeFileSync(`${LANG_DIR}/${INDEX_FILE_NAME}`, formatTranslates(mapFileContent)); fs.writeFileSync(`${LANG_DIR}/${INDEX_FILE_NAME}`, formatTranslates(mapFileContent));

View File

@ -37,7 +37,7 @@ class LangMenu extends Component {
} }
render() { render() {
const {userLang, showCurrentLang} = this.props; const {userLang: userLocale, showCurrentLang} = this.props;
const {isActive} = this.state; const {isActive} = this.state;
return ( return (
@ -50,10 +50,10 @@ class LangMenu extends Component {
})}> })}>
{Object.keys(LANGS).map((locale) => ( {Object.keys(LANGS).map((locale) => (
<li className={classNames(styles.menuItem, { <li className={classNames(styles.menuItem, {
[styles.activeMenuItem]: locale === userLang [styles.activeMenuItem]: locale === userLocale
})} onClick={this.onChangeLang(locale)} key={locale} })} onClick={this.onChangeLang(locale)} key={locale}
> >
{this.renderLangLabel(locale)} {this.renderLangLabel(locale, LANGS[locale])}
</li> </li>
))} ))}
<li className={styles.improveTranslatesLink}> <li className={styles.improveTranslatesLink}>
@ -67,7 +67,7 @@ class LangMenu extends Component {
<div className={styles.triggerContainer} onClick={this.onToggle}> <div className={styles.triggerContainer} onClick={this.onToggle}>
<a className={styles.trigger} href="#"> <a className={styles.trigger} href="#">
{showCurrentLang {showCurrentLang
? this.renderLangLabel(userLang) : ( ? this.renderLangLabel(userLocale, LANGS[userLocale]) : (
<span> <span>
<span className={styles.triggerIcon} /> <span className={styles.triggerIcon} />
{' '} {' '}
@ -82,17 +82,41 @@ class LangMenu extends Component {
); );
} }
renderLangLabel(locale) { renderLangLabel(locale, localeData) {
const langLabel = LANGS[locale].name; const {name, progress, isReleased} = localeData;
let progressLabel;
if (progress !== 100) {
progressLabel = (
<span className={styles.langTranslateUnfinished}>
{`(${progress}%)`}
</span>
);
} else if (!isReleased) {
progressLabel = (
<span className={styles.langTranslateUnreviewed}>
{'*'}
</span>
);
}
return ( return (
<span> <span>
<span className={styles[`lang${locale[0].toUpperCase() + locale.slice(1)}`]} /> <span className={styles[`lang${locale[0].toUpperCase() + locale.slice(1)}`]} />
{langLabel} {this.formatLocaleName(locale) || name}
{progressLabel}
</span> </span>
); );
} }
formatLocaleName(locale) {
switch (locale) {
case 'pt':
return 'Português (Br)';
default:
return null;
}
}
onChangeLang(lang) { onChangeLang(lang) {
return (event) => { return (event) => {
event.preventDefault(); event.preventDefault();

View File

@ -26,11 +26,12 @@
border-left: 0; border-left: 0;
border-right: 0; border-right: 0;
text-align: left; text-align: left;
box-shadow: 0 0 1px rgba(#000, .2);
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
transition: .3s cubic-bezier(0.075, 0.82, 0.165, 1); // easeOutCirc transition: .3s cubic-bezier(0.075, 0.82, 0.165, 1); // easeOutCirc
transform: translateY(10px) rotateX(-22deg); transform: translateY(10px) rotateX(-17deg);
} }
.menuActive { .menuActive {
@ -45,11 +46,12 @@
} }
.menuContainer { .menuContainer {
margin-left: 0; justify-content: flex-start;
} }
} }
.menuItem { .menuItem {
position: relative;
padding: 10px; padding: 10px;
font-size: 13px; font-size: 13px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
@ -73,6 +75,7 @@
} }
.langIco { .langIco {
position: relative;
display: inline-block; display: inline-block;
margin-right: 5px; margin-right: 5px;
width: 20px; width: 20px;
@ -83,6 +86,26 @@
background-size: cover; background-size: cover;
} }
.langTranslateProgress {
font-size: 9px;
position: relative;
font-family: $font-family-base;
color: #ccc;
}
.langTranslateUnfinished {
composes: langTranslateProgress;
top: -1px;
padding-left: 3px;
}
.langTranslateUnreviewed {
composes: langTranslateProgress;
top: -4px;
}
.langBe { .langBe {
composes: langIco; composes: langIco;

View File

@ -1,42 +1,52 @@
{ {
"be": { "be": {
"name": "Беларуская", "name": "Беларуская",
"progress": 100 "progress": 100,
"isReleased": true
}, },
"en": { "en": {
"name": "English", "name": "English",
"progress": 100 "progress": 100,
"isReleased": true
}, },
"id": { "id": {
"name": "Bahasa Indonesia", "name": "Bahasa Indonesia",
"progress": 100 "progress": 100,
"isReleased": false
}, },
"pl": { "pl": {
"name": "Polski", "name": "Polski",
"progress": 99.5 "progress": 99.5,
"isReleased": false
}, },
"pt": { "pt": {
"name": "Português", "name": "Português",
"progress": 100 "progress": 100,
"isReleased": true
}, },
"ro": { "ro": {
"name": "Română", "name": "Română",
"progress": 99.5 "progress": 99.5,
"isReleased": false
}, },
"ru": { "ru": {
"name": "Русский", "name": "Русский",
"progress": 100 "progress": 100,
"isReleased": true
}, },
"sl": { "sl": {
"name": "Slovenščina", "name": "Slovenščina",
"progress": 100 "progress": 100,
"isReleased": false
}, },
"uk": { "uk": {
"name": "Українська", "name": "Українська",
"progress": 100 "progress": 100,
"isReleased": true
}, },
"vi": { "vi": {
"name": "Tiếng Việt", "name": "Tiếng Việt",
"progress": 100 "progress": 100,
"isReleased": true
} }
} }