From a2d4243bc3437ee407e47180dc08b11f88e7254f Mon Sep 17 00:00:00 2001 From: ErickSkrauch Date: Thu, 25 Mar 2021 04:35:45 +0100 Subject: [PATCH 1/6] Allow to pull languages without proofreading --- config.js | 2 +- packages/app/components/i18n/localeFlags.ts | 2 ++ packages/scripts/i18n-crowdin.ts | 14 ++++++++------ 3 files changed, 11 insertions(+), 7 deletions(-) diff --git a/config.js b/config.js index ff7ed81..450f19b 100644 --- a/config.js +++ b/config.js @@ -16,6 +16,6 @@ module.exports = { filePath: 'accounts/site.json', sourceLang: 'en', basePath: `${__dirname}/packages/app/i18n`, - minApproved: 80, // Minimal ready percent before translation can be published + minTranslated: 80, // Minimal ready percent before translation can be published }, }; diff --git a/packages/app/components/i18n/localeFlags.ts b/packages/app/components/i18n/localeFlags.ts index c0151af..68f8f08 100644 --- a/packages/app/components/i18n/localeFlags.ts +++ b/packages/app/components/i18n/localeFlags.ts @@ -10,6 +10,8 @@ const localeToCountryCode: Record = { sr: 'rs', zh: 'cn', cs: 'cz', + fil: 'ph', + he: 'il', }; const SUPPORTED_LANGUAGES: ReadonlyArray = Object.keys(supportedLocales); diff --git a/packages/scripts/i18n-crowdin.ts b/packages/scripts/i18n-crowdin.ts index fc2f7ff..7425a3c 100644 --- a/packages/scripts/i18n-crowdin.ts +++ b/packages/scripts/i18n-crowdin.ts @@ -28,7 +28,7 @@ const CROWDIN_FILE_PATH = config.filePath; const SOURCE_LANG = config.sourceLang; const LANG_DIR = config.basePath; const INDEX_FILE_NAME = 'index.js'; -const MIN_RELEASE_PROGRESS = config.minApproved; +const MIN_RELEASE_PROGRESS = config.minTranslated; const crowdin = new Crowdin({ token: config.apiKey, @@ -43,6 +43,7 @@ const releasedLocales: ReadonlyArray = ['be', 'fr', 'id', 'pt', 'ru', 'u * Map Crowdin locales into our internal locales representation */ const LOCALES_MAP: Record = { + 'es-ES': 'es', 'pt-BR': 'pt', 'zh-CN': 'zh', }; @@ -54,6 +55,7 @@ const LOCALES_MAP: Record = { const NATIVE_NAMES_MAP: Record = { be: 'Беларуская', cs: 'Čeština', + fil: 'Wikang Filipino', id: 'Bahasa Indonesia', lt: 'Lietuvių', pl: 'Polski', @@ -67,6 +69,7 @@ const NATIVE_NAMES_MAP: Record = { * This arrays allows us to override Crowdin English languages names */ const ENGLISH_NAMES_MAP: Record = { + fil: 'Filipino', pt: 'Portuguese, Brazilian', sr: 'Serbian', zh: 'Simplified Chinese', @@ -225,7 +228,7 @@ async function pull(): Promise { } console.log('Pulling translation progress...'); - const { data: translationProgress } = await crowdin.translationStatusApi.getFileProgress(PROJECT_ID, fileId, 100); + const { data: fileProgress } = await crowdin.translationStatusApi.getFileProgress(PROJECT_ID, fileId, 100); const localesToPull: Array = []; const indexFileEntries: Record = { @@ -238,16 +241,16 @@ async function pull(): Promise { }, }; - translationProgress.forEach(({ data: { languageId, approvalProgress } }) => { + fileProgress.forEach(({ data: { languageId, translationProgress } }) => { const locale = toInternalLocale(languageId); - if (releasedLocales.includes(locale) || approvalProgress >= MIN_RELEASE_PROGRESS) { + if (releasedLocales.includes(locale) || translationProgress >= MIN_RELEASE_PROGRESS) { localesToPull.push(languageId); indexFileEntries[locale] = { code: locale, name: NATIVE_NAMES_MAP[locale] || iso639.getNativeName(locale), englishName: ENGLISH_NAMES_MAP[locale] || iso639.getName(locale), - progress: approvalProgress, + progress: translationProgress, isReleased: releasedLocales.includes(locale), }; } @@ -268,7 +271,6 @@ async function pull(): Promise { data: { url }, } = await crowdin.translationsApi.buildProjectFileTranslation(PROJECT_ID, fileId, { targetLanguageId: languageId, - exportApprovedOnly: true, }); const { data: fileContents } = await axios.get(url, { From 370725dd7e59fb19e390ae9b76c821645851057e Mon Sep 17 00:00:00 2001 From: ErickSkrauch Date: Thu, 25 Mar 2021 04:35:50 +0100 Subject: [PATCH 2/6] Add html dir attribute --- packages/app/components/i18n/IntlProvider.tsx | 10 +++++++++- packages/app/package.json | 2 ++ packages/app/pages/root/RootPage.tsx | 5 ----- yarn.lock | 10 ++++++++++ 4 files changed, 21 insertions(+), 6 deletions(-) diff --git a/packages/app/components/i18n/IntlProvider.tsx b/packages/app/components/i18n/IntlProvider.tsx index 2340aae..134c75d 100644 --- a/packages/app/components/i18n/IntlProvider.tsx +++ b/packages/app/components/i18n/IntlProvider.tsx @@ -1,5 +1,8 @@ import React, { useState, useEffect, ComponentType } from 'react'; import { RawIntlProvider, IntlShape } from 'react-intl'; +import { Helmet } from 'react-helmet-async'; + +import { getLangDir } from 'rtl-detect'; import i18n from 'app/services/i18n'; import { useReduxSelector } from 'app/functions'; @@ -26,7 +29,12 @@ const IntlProvider: ComponentType = ({ children }) => { return null; } - return {children}; + return ( + + + {children} + + ); }; export default IntlProvider; diff --git a/packages/app/package.json b/packages/app/package.json index a3a13ce..b733761 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -30,6 +30,7 @@ "redux": "^4.0.5", "redux-localstorage": "^0.4.1", "redux-thunk": "^2.0.0", + "rtl-detect": "^1.0.2", "url-search-params-polyfill": "^8.1.0", "webfontloader": "^1.6.26", "whatwg-fetch": "^3.0.0" @@ -45,6 +46,7 @@ "@types/react-helmet": "^6.0.0", "@types/react-motion": "^0.0.29", "@types/react-transition-group": "^4.2.4", + "@types/rtl-detect": "^1.0.0", "@types/webfontloader": "^1.6.30", "@types/webpack-env": "^1.15.2", "utility-types": "^3.10.0" diff --git a/packages/app/pages/root/RootPage.tsx b/packages/app/pages/root/RootPage.tsx index f65a667..c9ba816 100644 --- a/packages/app/pages/root/RootPage.tsx +++ b/packages/app/pages/root/RootPage.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { Route, Switch } from 'react-router-dom'; -import { Helmet } from 'react-helmet-async'; import clsx from 'clsx'; import { connect } from 'app/functions'; @@ -54,10 +53,6 @@ class RootPage extends React.PureComponent<{ return (
- - - -
Date: Fri, 26 Mar 2021 04:19:04 +0100 Subject: [PATCH 3/6] The UI is adapted to the RTL layout --- package.json | 1 + .../app/components/auth/PanelTransition.tsx | 1 + .../app/components/auth/appInfo/appInfo.scss | 1 - .../auth/chooseAccount/accountSwitcher.scss | 18 ++++-- .../auth/forgotPassword/forgotPassword.scss | 2 +- .../auth/permissions/permissions.scss | 12 ++-- .../app/components/contact/contactForm.scss | 2 +- .../dev/apps/applicationsIndex.scss | 20 +++--- .../app/components/footerMenu/footerMenu.scss | 2 +- .../changeLanguageLink/link.scss | 2 +- .../languageSwitcher/languageSwitcher.scss | 12 ++-- .../profile/deleteAccount/deleteAccount.scss | 4 +- .../instructions/OsInstruction.tsx | 2 +- .../instructions/instructions.scss | 46 ++++++++++---- .../multiFactorAuth/keyForm/key-form.scss | 4 +- packages/app/components/profile/profile.scss | 8 ++- .../app/components/profile/profileForm.scss | 5 +- .../sourceCode/sourceCodePopup.scss | 8 ++- packages/app/components/ui/button-groups.scss | 20 ------ .../app/components/ui/form/FormComponent.tsx | 26 ++++---- packages/app/components/ui/form/Input.tsx | 4 +- packages/app/components/ui/form/dropdown.scss | 22 +++++-- packages/app/components/ui/form/form.scss | 11 ++-- packages/app/components/ui/icons.scss | 20 ++++++ packages/app/components/ui/loader/loader.scss | 2 + .../app/components/ui/motion/SlideMotion.tsx | 1 + packages/app/components/ui/panel.scss | 6 +- packages/app/components/ui/popup/popup.scss | 8 ++- packages/app/components/ui/pseudoAvatar.scss | 2 +- .../app/components/ui/stepper/stepper.scss | 8 +-- .../components/userbar/AccountSwitcher.tsx | 12 ++-- .../components/userbar/accountSwitcher.scss | 23 +++---- .../app/components/userbar/loggedInPanel.scss | 10 ++- packages/app/pages/404/404.scss | 61 ++++++++++++------- packages/app/pages/auth/auth.scss | 4 +- packages/app/pages/dev/dev.scss | 2 +- packages/app/pages/profile/profile.scss | 2 +- packages/app/pages/root/root.scss | 10 +-- packages/app/pages/rules/rules.scss | 4 +- postcss.config.js | 1 + yarn.lock | 15 +++++ 41 files changed, 254 insertions(+), 170 deletions(-) delete mode 100644 packages/app/components/ui/button-groups.scss diff --git a/package.json b/package.json index d8c3b8d..852812c 100644 --- a/package.json +++ b/package.json @@ -144,6 +144,7 @@ "loader-utils": "^2.0.0", "mini-css-extract-plugin": "^0.9.0", "node-sass": "^4.14.1", + "postcss-bidirection": "https://github.com/erickskrauch/postcss-bidirection.git#iss_23", "postcss-import": "^12.0.1", "postcss-loader": "^3.0.0", "postcss-scss": "^2.1.1", diff --git a/packages/app/components/auth/PanelTransition.tsx b/packages/app/components/auth/PanelTransition.tsx index 085a05f..29beac9 100644 --- a/packages/app/components/auth/PanelTransition.tsx +++ b/packages/app/components/auth/PanelTransition.tsx @@ -119,6 +119,7 @@ interface State { formsHeights: Record; } +// TODO: completely broken for RTL languages class PanelTransition extends React.PureComponent { state: State = { contextHeight: 0, diff --git a/packages/app/components/auth/appInfo/appInfo.scss b/packages/app/components/auth/appInfo/appInfo.scss index febbe2c..443525f 100644 --- a/packages/app/components/auth/appInfo/appInfo.scss +++ b/packages/app/components/auth/appInfo/appInfo.scss @@ -16,7 +16,6 @@ display: block; position: absolute; - left: 0; bottom: 0; height: 3px; width: 40px; diff --git a/packages/app/components/auth/chooseAccount/accountSwitcher.scss b/packages/app/components/auth/chooseAccount/accountSwitcher.scss index b93012a..83fbc95 100644 --- a/packages/app/components/auth/chooseAccount/accountSwitcher.scss +++ b/packages/app/components/auth/chooseAccount/accountSwitcher.scss @@ -3,7 +3,7 @@ .accountSwitcher { background: $black; - text-align: left; + text-align: start; } $border: 1px solid lighter($black); @@ -37,12 +37,12 @@ $border: 1px solid lighter($black); .accountAvatar { font-size: 35px; - margin-right: 15px; + margin-inline-end: 15px; } .accountInfo { flex-grow: 1; - margin-right: 15px; + margin-inline-end: 15px; min-width: 0; // Fix for text-overflow. See https://stackoverflow.com/a/40612184 } @@ -76,17 +76,25 @@ $border: 1px solid lighter($black); composes: arrowRight from '~app/components/ui/icons.scss'; position: relative; - left: 0; + inset-inline-start: 0; font-size: 24px; color: #4e4e4e; line-height: 35px; + transition: color 0.25s, inset-inline-start 0.5s; + // TODO: right now transition property doesn't support the bidirectional value. + // See https://github.com/gasolin/postcss-bidirection/issues/25. + // noinspection CssOverwrittenProperties Graceful degradation transition: color 0.25s, left 0.5s; + html[dir='rtl'] & { + transition: color 0.25s, right 0.5s; + } + .item:hover & { color: #aaa; - left: 5px; + inset-inline-start: 5px; } } diff --git a/packages/app/components/auth/forgotPassword/forgotPassword.scss b/packages/app/components/auth/forgotPassword/forgotPassword.scss index de7757a..5f4cdfe 100644 --- a/packages/app/components/auth/forgotPassword/forgotPassword.scss +++ b/packages/app/components/auth/forgotPassword/forgotPassword.scss @@ -16,7 +16,7 @@ position: relative; bottom: 1px; - padding-left: 3px; + padding-inline-start: 3px; color: #666666; font-size: 10px; diff --git a/packages/app/components/auth/permissions/permissions.scss b/packages/app/components/auth/permissions/permissions.scss index c3400d6..a329ca4 100644 --- a/packages/app/components/auth/permissions/permissions.scss +++ b/packages/app/components/auth/permissions/permissions.scss @@ -4,18 +4,18 @@ .authInfo { // Отступы сверху и снизу разные т.к. мы ужимаем высоту линии строки с логином на 2 пикселя и из-за этого теряем отступ снизу padding: 5px 20px 7px; - text-align: left; + text-align: start; } .authInfoAvatar { $size: 30px; - float: left; + float: start; height: $size; width: $size; font-size: $size; line-height: 1; - margin-right: 10px; + margin-inline-end: 10px; margin-top: 2px; color: #aaa; @@ -38,7 +38,7 @@ .permissionsContainer { padding: 15px 12px; - text-align: left; + text-align: start; } .permissionsTitle { @@ -57,7 +57,7 @@ font-size: 14px; line-height: 1.4; padding-bottom: 4px; - padding-left: 17px; + padding-inline-start: 17px; position: relative; &:last-of-type { @@ -71,7 +71,7 @@ line-height: 9px; position: absolute; top: 6px; - left: -4px; + inset-inline-start: -4px; } } } diff --git a/packages/app/components/contact/contactForm.scss b/packages/app/components/contact/contactForm.scss index b98b20b..5efc474 100644 --- a/packages/app/components/contact/contactForm.scss +++ b/packages/app/components/contact/contactForm.scss @@ -37,7 +37,7 @@ width: 50%; &:first-of-type { - margin-right: $popupPadding; + margin-inline-end: $popupPadding; } } diff --git a/packages/app/components/dev/apps/applicationsIndex.scss b/packages/app/components/dev/apps/applicationsIndex.scss index ebfa986..d4770c3 100644 --- a/packages/app/components/dev/apps/applicationsIndex.scss +++ b/packages/app/components/dev/apps/applicationsIndex.scss @@ -160,7 +160,7 @@ composes: arrowRight from '~app/components/ui/icons.scss'; position: relative; - left: 0; + inset-inline-start: 0; font-size: 28px; color: #ebe8e1; @@ -173,7 +173,11 @@ .appExpanded & { color: #777; - transform: rotate(360deg) !important; // Prevent it from hover rotating + transform: rotate(360deg)!important; // Prevent it from hover rotating + + html[dir='rtl'] & { + transform: rotate(0)!important; + } } } @@ -195,7 +199,7 @@ $appDetailsContainerRightLeftPadding: 30px; .editAppLink { position: absolute; top: 4px; - right: 0; + inset-inline-end: 0; font-size: 12px; color: #9a9a9a; @@ -221,17 +225,19 @@ $appDetailsContainerRightLeftPadding: 30px; } .appActionButton { - margin: 0 10px 10px 0; + margin-inline-end: 10px; + margin-bottom: 10px; &:last-of-type { - margin-right: 0; + margin-inline-end: 0; } } .appActionContainer { position: absolute; + width: calc(100% - #{$appDetailsContainerRightLeftPadding * 2}); top: 100%; - left: 0; + inset-inline-start: 0; padding: 0 $appDetailsContainerRightLeftPadding; background: #f5f5f5; } @@ -244,7 +250,7 @@ $appDetailsContainerRightLeftPadding: 30px; .continueActionButtonWrapper { display: inline-block; - margin-left: 10px; + margin-inline-start: 10px; } .continueActionLink { diff --git a/packages/app/components/footerMenu/footerMenu.scss b/packages/app/components/footerMenu/footerMenu.scss index 1be8be0..0d79a6f 100644 --- a/packages/app/components/footerMenu/footerMenu.scss +++ b/packages/app/components/footerMenu/footerMenu.scss @@ -24,5 +24,5 @@ position: relative; bottom: 1px; font-size: 11px; - margin-right: 3px; + margin-inline-end: 3px; } diff --git a/packages/app/components/languageSwitcher/changeLanguageLink/link.scss b/packages/app/components/languageSwitcher/changeLanguageLink/link.scss index 8d38218..3dd30af 100644 --- a/packages/app/components/languageSwitcher/changeLanguageLink/link.scss +++ b/packages/app/components/languageSwitcher/changeLanguageLink/link.scss @@ -26,7 +26,7 @@ position: relative; top: 1px; display: inline-block; - margin-right: 4px; + margin-inline-end: 4px; height: $height; width: $height * 4 / 3; box-shadow: 0 0 1px rgba(#000, 0.2); diff --git a/packages/app/components/languageSwitcher/languageSwitcher.scss b/packages/app/components/languageSwitcher/languageSwitcher.scss index db8351e..3cb5ac3 100644 --- a/packages/app/components/languageSwitcher/languageSwitcher.scss +++ b/packages/app/components/languageSwitcher/languageSwitcher.scss @@ -33,7 +33,7 @@ position: absolute; top: 14px; - right: 12px; + inset-inline-end: 12px; font-size: 22px; color: #edebe5; pointer-events: none; // Иконка чисто декоративная, так что клик должен проходить сквозь неё @@ -94,7 +94,7 @@ $languageListBorderStyle: 1px solid $languageListBorderColor; .languageIco { display: inline-block; - margin-right: 7px; + margin-inline-end: 7px; width: 40px; height: 30px; box-shadow: 0 0 1px rgba(#000, 0.2); @@ -129,7 +129,7 @@ $languageListBorderStyle: 1px solid $languageListBorderColor; box-sizing: border-box; width: 22px; height: 22px; - right: -32px; + inset-inline-end: -32px; font-size: 10px; line-height: 18px; @@ -146,13 +146,13 @@ $languageListBorderStyle: 1px solid $languageListBorderColor; } .languageItem:hover & { - right: 0; + inset-inline-end: 0; } .activeLanguageItem & { border-color: $green; background: $green; - right: 0; + inset-inline-end: 0; &:before { opacity: 1; @@ -209,7 +209,7 @@ $languageListBorderStyle: 1px solid $languageListBorderColor; color: lighter($blue); font-size: 22px; - margin-right: 10px; + margin-inline-end: 10px; } .improveTranslatesContent { diff --git a/packages/app/components/profile/deleteAccount/deleteAccount.scss b/packages/app/components/profile/deleteAccount/deleteAccount.scss index 06d9266..3c070fc 100644 --- a/packages/app/components/profile/deleteAccount/deleteAccount.scss +++ b/packages/app/components/profile/deleteAccount/deleteAccount.scss @@ -19,12 +19,12 @@ li { position: relative; - padding-left: 11px; + padding-inline-start: 11px; &:before { content: '—'; position: absolute; - left: 0; + inset-inline-start: 0; top: 2px; } diff --git a/packages/app/components/profile/multiFactorAuth/instructions/OsInstruction.tsx b/packages/app/components/profile/multiFactorAuth/instructions/OsInstruction.tsx index 7c9994f..7b2ffd7 100644 --- a/packages/app/components/profile/multiFactorAuth/instructions/OsInstruction.tsx +++ b/packages/app/components/profile/multiFactorAuth/instructions/OsInstruction.tsx @@ -75,7 +75,7 @@ export default function OsInstruction({ os }: { os: OS }) {