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

Блоку переключения языков добавлена общая тень
Исправлено отображение переключателя в профиле пользователя

scripts/i18n-onesky.js

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

src/components/langMenu/LangMenu.jsx

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

src/components/langMenu/langMenu.scss

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

src/i18n/index.json

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