From ade2565f497243a5e428f4906d8ed80c872fd981 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Mon, 4 Jan 2021 02:21:52 +0530 Subject: [PATCH 01/37] feat: add langCode and renderFooter props (#2644) Co-authored-by: Aakansha Doshi Co-authored-by: dwelle --- src/components/App.tsx | 19 ++- src/components/InitializeApp.tsx | 23 ++- src/components/LayerUI.tsx | 20 +-- src/components/MobileMenu.tsx | 15 +- .../components/LanguageList.tsx | 18 +-- src/excalidraw-app/index.tsx | 60 +++++++- src/i18n.ts | 127 +++++++---------- src/packages/excalidraw/CHANGELOG.md | 3 + src/packages/excalidraw/README.md | 20 +++ src/packages/excalidraw/index.tsx | 8 +- .../regressionTests.test.tsx.snap | 134 +++++++++--------- src/tests/align.test.tsx | 4 +- src/tests/regressionTests.test.tsx | 9 +- src/types.ts | 3 + 14 files changed, 271 insertions(+), 192 deletions(-) rename src/{ => excalidraw-app}/components/LanguageList.tsx (58%) diff --git a/src/components/App.tsx b/src/components/App.tsx index ecce0fd2f..30c069f42 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -111,7 +111,7 @@ import { selectGroupsForSelectedElements, } from "../groups"; import { createHistory, SceneHistory } from "../history"; -import { getLanguage, t } from "../i18n"; +import { t, getLanguage, setLanguage, languages, defaultLang } from "../i18n"; import { CODES, getResizeCenterPointKey, @@ -332,7 +332,7 @@ class App extends React.Component { offsetLeft, } = this.state; - const { onCollabButtonClick, onExportToBackend } = this.props; + const { onCollabButtonClick, onExportToBackend, renderFooter } = this.props; const canvasScale = window.devicePixelRatio; const canvasWidth = canvasDOMWidth * canvasScale; @@ -369,9 +369,10 @@ class App extends React.Component { } zenModeEnabled={zenModeEnabled} toggleZenMode={this.toggleZenMode} - lng={getLanguage().lng} + langCode={getLanguage().code} isCollaborating={this.props.isCollaborating || false} onExportToBackend={onExportToBackend} + renderCustomFooter={renderFooter} /> {this.state.showStats && ( { } componentDidUpdate(prevProps: ExcalidrawProps, prevState: AppState) { + if (prevProps.langCode !== this.props.langCode) { + this.updateLanguage(); + } + if ( prevProps.width !== this.props.width || prevProps.height !== this.props.height || @@ -3849,6 +3854,14 @@ class App extends React.Component { offsetTop: typeof offsets?.offsetTop === "number" ? offsets.offsetTop : 0, }; } + + private async updateLanguage() { + const currentLang = + languages.find((lang) => lang.code === this.props.langCode) || + defaultLang; + await setLanguage(currentLang); + this.setAppState({}); + } } // ----------------------------------------------------------------------------- diff --git a/src/components/InitializeApp.tsx b/src/components/InitializeApp.tsx index 091f726d7..ae0bea036 100644 --- a/src/components/InitializeApp.tsx +++ b/src/components/InitializeApp.tsx @@ -1,18 +1,29 @@ import React from "react"; import { LoadingMessage } from "./LoadingMessage"; -import { setLanguageFirstTime } from "../i18n"; +import { + defaultLang, + Language, + languages, + setLanguageFirstTime, +} from "../i18n"; -export class InitializeApp extends React.Component< - any, - { isLoading: boolean } -> { +interface Props { + langCode: Language["code"]; +} +interface State { + isLoading: boolean; +} +export class InitializeApp extends React.Component { public state: { isLoading: boolean } = { isLoading: true, }; async componentDidMount() { - await setLanguageFirstTime(); + const currentLang = + languages.find((lang) => lang.code === this.props.langCode) || + defaultLang; + await setLanguageFirstTime(currentLang); this.setState({ isLoading: false, }); diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx index 5a806e829..dd09ffef9 100644 --- a/src/components/LayerUI.tsx +++ b/src/components/LayerUI.tsx @@ -19,8 +19,7 @@ import { FixedSideContainer } from "./FixedSideContainer"; import { UserList } from "./UserList"; import { LockIcon } from "./LockIcon"; import { ExportDialog, ExportCB } from "./ExportDialog"; -import { LanguageList } from "./LanguageList"; -import { t, languages, setLanguage } from "../i18n"; +import { Language, t } from "../i18n"; import { HintViewer } from "./HintViewer"; import useIsMobile from "../is-mobile"; @@ -64,13 +63,14 @@ interface LayerUIProps { onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void; zenModeEnabled: boolean; toggleZenMode: () => void; - lng: string; + langCode: Language["code"]; isCollaborating: boolean; onExportToBackend?: ( exportedElements: readonly NonDeletedExcalidrawElement[], appState: AppState, canvas: HTMLCanvasElement | null, ) => void; + renderCustomFooter?: (isMobile: boolean) => JSX.Element; } const useOnClickOutside = ( @@ -316,6 +316,7 @@ const LayerUI = ({ toggleZenMode, isCollaborating, onExportToBackend, + renderCustomFooter, }: LayerUIProps) => { const isMobile = useIsMobile(); @@ -551,14 +552,7 @@ const LayerUI = ({ "transition-right disable-pointerEvents": zenModeEnabled, })} > - { - await setLanguage(lng); - setAppState({}); - }} - languages={languages} - floating - /> + {renderCustomFooter?.(false)} {actionManager.renderAction("toggleShortcuts")} ))} diff --git a/src/components/ShortcutsDialog.scss b/src/components/ShortcutsDialog.scss index 2feb38fbf..6cb6898c3 100644 --- a/src/components/ShortcutsDialog.scss +++ b/src/components/ShortcutsDialog.scss @@ -29,6 +29,7 @@ box-sizing: border-box; display: flex; align-items: center; + font-family: inherit; } .ShortcutsDialog-footer { diff --git a/src/components/ShortcutsDialog.tsx b/src/components/ShortcutsDialog.tsx index ff9327d90..15c57bb2e 100644 --- a/src/components/ShortcutsDialog.tsx +++ b/src/components/ShortcutsDialog.tsx @@ -82,7 +82,7 @@ Shortcut.defaultProps = { }; const ShortcutKey = (props: { children: React.ReactNode }) => ( - + ); const Footer = () => ( From 6a16caf13c5f90c277d08c2003dbc925482269c2 Mon Sep 17 00:00:00 2001 From: Shahzeb Parkar Date: Thu, 14 Jan 2021 12:54:50 +0530 Subject: [PATCH 33/37] fix: broken Individuals link (#2782) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 148812e77..e06eebccc 100644 --- a/README.md +++ b/README.md @@ -117,7 +117,7 @@ Become a financial contributor and help us sustain our community. [[Contribute]( #### Individuals - + #### Organizations From fd699c044766a1c03e34aca2f6bc794a25a7c5c6 Mon Sep 17 00:00:00 2001 From: Lipis Date: Thu, 14 Jan 2021 12:09:05 +0200 Subject: [PATCH 34/37] chore: Update translations from Crowdin (#2742) Co-authored-by: Kostas Bariotis --- .github/workflows/locales-coverage.yml | 2 +- .../components/LanguageList.tsx | 1 - src/locales/ja-JP.json | 22 +++++++++---------- src/locales/nn-NO.json | 2 +- src/locales/percentages.json | 2 +- src/locales/pl-PL.json | 2 +- src/locales/ru-RU.json | 10 ++++----- src/locales/zh-CN.json | 20 ++++++++--------- 8 files changed, 30 insertions(+), 31 deletions(-) diff --git a/.github/workflows/locales-coverage.yml b/.github/workflows/locales-coverage.yml index d391639e1..f43d93afc 100644 --- a/.github/workflows/locales-coverage.yml +++ b/.github/workflows/locales-coverage.yml @@ -43,5 +43,5 @@ jobs: uses: kt3k/update-pr-description@v1.0.1 with: pr_body: ${{ steps.getCommentBody.outputs.body }} - pr_title: "chore: New Crowdin updates" + pr_title: "chore: Update translations from Crowdin" github_token: ${{ secrets.PUSH_TRANSLATIONS_COVERAGE_PAT }} diff --git a/src/excalidraw-app/components/LanguageList.tsx b/src/excalidraw-app/components/LanguageList.tsx index 4b707907e..18f38a320 100644 --- a/src/excalidraw-app/components/LanguageList.tsx +++ b/src/excalidraw-app/components/LanguageList.tsx @@ -25,7 +25,6 @@ export const LanguageList = ({ - {languages.map((lang) => (